Arcgis for js实现北京地铁的展示
2015-04-09 16:08
323 查看
概述:
通过获取百度地铁图数据,将北京市地铁图在Arcgis for js中实现展示。
效果:
初始化效果
放大后
鼠标经过线路高亮并显示名称
点击显示站点信息
实现:
1、获取地铁数据
a、打开百度地铁图
在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing
b、获取网络资源
按下f12,切换到NetWork面板,刷新页面,会出现如下所示:
在新的面板中打开对应的链接,即为北京地铁的原始数据,格式为xml
c、将xml转换为json
利用网络xml2json转换工具将xml转换为json,工具地址为http://www.bejson.com/go.php?u=http://www.bejson.com/xml2json/
2、将站点和线路添加到地图上
将上述转换后的json定义为一个变量,单独存储为一个js文件。在map的load事件完成后将站点和线路添加到地图,代码如下:
3、添加地图事件
添加鼠标经过和单机等事件,代码如下:
到此,基本功能已完成,完整代码如下:
通过获取百度地铁图数据,将北京市地铁图在Arcgis for js中实现展示。
效果:
初始化效果
放大后
鼠标经过线路高亮并显示名称
点击显示站点信息
实现:
1、获取地铁数据
a、打开百度地铁图
在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing
b、获取网络资源
按下f12,切换到NetWork面板,刷新页面,会出现如下所示:
在新的面板中打开对应的链接,即为北京地铁的原始数据,格式为xml
c、将xml转换为json
利用网络xml2json转换工具将xml转换为json,工具地址为http://www.bejson.com/go.php?u=http://www.bejson.com/xml2json/
2、将站点和线路添加到地图上
将上述转换后的json定义为一个变量,单独存储为一个js文件。在map的load事件完成后将站点和线路添加到地图,代码如下:
map.on("load",function(){ var legendDiv = $("<div />").addClass("legend-box").appendTo($("#map")); var titleDiv = $("<div />").addClass("tr-title").appendTo(legendDiv).html("图例"); var legendTab = $("<table />").appendTo(legendDiv).hide(); titleDiv.on("click",function(){ if(!legendTab.is(":hidden")){ legendTab.hide(); } else{ legendTab.show(); } }); var mulPt = new Multipoint(); var subLines = subData.sw.l; for(var i= 0,ll =subLines.length;i<ll;i++){ var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[i]), 3 ), new Color([255,255,255]) ); var pms = PictureMarkerSymbol('chg_stat.png', 12, 12); var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[i]), 4 ); var trItem = $("<tr />").appendTo(legendTab); var legendColor = $("<div />").addClass("legend-item-color").css("background",color[i]); var legendText = $("<div />").addClass("legend-item-text").html(subLines[i].lid); var tdColor = $("<td />").appendTo(trItem).append(legendColor); var tdText = $("<td />").appendTo(trItem).append(legendText); var stops = subLines[i].p; var line = new Array(); for(var j= 0,sl =stops.length;j<sl;j++){ var scrPt = new esri.geometry.ScreenPoint(stops[j].x,stops[j].y); var mapPt = map.toMap(scrPt); mulPt.addPoint(mapPt); line.push([mapPt.x,mapPt.y]); if(stops[j].st==="true"){ var smb = sms; var font = new esri.symbol.Font(); font.setSize("10px"); font.setFamily("微软雅黑"); if(stops[j].ex==="true"){ smb = pms; font.setWeight("bold"); } var gStop = new Graphic(mapPt,smb,stops[j]); subwayStop.add(gStop); var ts = new esri.symbol.TextSymbol(stops[j].lb); ts.setFont(font); ts.setOffset(0,5); var gTxtStop = new Graphic(mapPt,ts); subwayLabel.add(gTxtStop); } } if(subLines[i].loop==="true"){ var scrPt = new esri.geometry.ScreenPoint(stops[0].x,stops[0].y); var mapPt = map.toMap(scrPt); line.push([mapPt.x,mapPt.y]); } var subLine = new Polyline({"paths":[line], "spatialReference":{"wkid":4326}}); var gLine = new Graphic(subLine,sls,subLines[i]); subwayLine.add(gLine); } var trItem = $("<tr />").appendTo(legendTab); var legendColor = $("<img />").attr("src","chg_stat.png").attr("width","15px").attr("height","15px"); var legendText = $("<div />").addClass("legend-item-text").html("换乘站点"); var tdColor = $("<td />").appendTo(trItem).append(legendColor); var tdText = $("<td />").appendTo(trItem).append(legendText); map.setExtent(mulPt.getExtent().expand(1.5)); });
3、添加地图事件
添加鼠标经过和单机等事件,代码如下:
map.on("zoom-end",function(){ var level =map.getLevel(); if(level>0){ subwayLabel.show(); } else{ subwayLabel.hide(); } }); subwayStop.on("mouse-over",function(evt){ var scrPt = map.toScreen(evt.graphic.geometry); var statName = evt.graphic.attributes.lb; var stopName = $("<div />").attr("id","stopName") .addClass("stat-name-box") .html(statName) .css("left",scrPt.x) .css("top",scrPt.y+20) .appendTo($("#map")); map.setMapCursor("pointer"); }); subwayStop.on("mouse-out",function(evt){ $("#stopName").remove(); map.setMapCursor("default"); }); subwayStop.on("click",function(evt){ var stopName= evt.graphic.attributes.lb; var lineName = evt.graphic.attributes.ln; lineName = lineName.split(","); var title = "<span style='font-weight: bold;'>"+stopName+"</span>"; var content="<span style='font-weight: bold;'>可乘坐</span>:<br />"; for(var i=0;i<lineName.length;i++){ var pathName = lineName[i].split("|")[1]; content = content+pathName+"<br />"; } map.infoWindow.setTitle(title); map.infoWindow.setContent(content); map.infoWindow.show(evt.graphic.geometry); $(".maximize").hide(); }); subwayLine.on("mouse-over",function(evt){ var scrPt = map.toScreen(evt.mapPoint); var lineTitle = evt.graphic.attributes.lb; var lineName = $("<div />").attr("id","lineName") .addClass("stat-name-box") .html(lineTitle) .css("left",scrPt.x) .css("top",scrPt.y+20) .appendTo($("#map")); map.setMapCursor("pointer"); evt.graphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#00ffff"), 4 ); subwayLine.redraw(); }); subwayLine.on("mouse-out",function(evt){ $("#lineName").remove(); map.setMapCursor("default"); evt.graphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[evt.graphic.attributes.i-1]), 4 ); subwayLine.redraw(); }); subwayLine.on("click",function(evt){ var geometry = evt.graphic.geometry; var stops = evt.graphic.attributes.p; var startStop =stops[0],endStop=stops[stops.length-1]; var scrStart = new esri.geometry.ScreenPoint(startStop.x,startStop.y); var scrEnd = new esri.geometry.ScreenPoint(endStop.x,endStop.y); var startPt = map.toMap(scrStart); var endPt = map.toMap(scrEnd); var startName = startStop.lb, endName = endStop.lb; var font = new esri.symbol.Font(); font.setSize("8pt"); font.setFamily("微软雅黑"); var startText = new esri.symbol.TextSymbol(startName),endText = new esri.symbol.TextSymbol(endName); startText.setFont(font), endText.setFont(font); startText.setColor(new dojo.Color([0,0,0,100])),endText.setColor(new dojo.Color([0,0,0,100])); subwayLabel.add(new Graphic(startPt, startText)); subwayLabel.add(new Graphic(endPt, endText)); map.setExtent(geometry.getExtent().expand(1.8)); });
到此,基本功能已完成,完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>北京地铁</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.stat-name-box{
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
border: rgb(139, 164, 220) 1px solid;
width: auto;
height: auto;
font:normal 11px "宋体",Arial;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 2px 2px 3px;
border-radius: 3px;
padding: 3px 5px;
}
.legend-box{
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
border: rgb(139, 164, 220) 1px solid;
width: 130px;
height: auto;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.34902) 2px 2px 3px;
border-radius: 3px;
}
tr{
padding: 2px 8px;
}
.tr-title{
text-align: center;
font:bold 13px "宋体",Arial;
padding: 3px 0px;
background: rgb(139, 164, 220);
color: #ffffff;
border-radius: 3px;
}
.tr-title:hover{
cursor: pointer;
}
.legend-item-color{
width: 10px;
height: 10px;
float: left;
background: rgb(139, 164, 220);
margin-top: 5px;
}
.legend-item-text{
font:normal 8px "宋体",Arial;
padding: 3px 5px;
float: left;
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="bj_sub_data.js"></script>
<script src="jquery-1.8.3.js"></script>
<script>
var map;
var color = ["#d92528","#166db2","#02a9bb","#b51c84","#bd9001","#ff9000","#17997d","#90ba78","#0696cb",
"#ffd600","#f55585","#714286","#00a9bc","#ca1e72","#ed9aac","#cd2c24","#eb5e19","#ac96bd"
];
require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/graphic",
"esri/geometry/Point",
"esri/geometry/Multipoint",
"esri/geometry/Polyline",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol", //简单线符号
"dojo/_base/Color",
"dojo/domReady!"
],
function(Map,
Tiled,
GraphicsLayer,
Graphic,
Point,
Multipoint,
Polyline,
SpatialReference,
SimpleMarkerSymbol,
PictureMarkerSymbol,
SimpleLineSymbol,
Color) {
map = new Map("map",{
logo:false
});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/BJ/MapServer",{"id":"tiled"});
map.addLayer(tiled);
tiled.hide();
var pt = new Point(116.88590597052463,40.37521501133166);
map.centerAndZoom(pt, 1);
var subwayStop = new GraphicsLayer({"id":"subwayStop"});
var subwayLine = new GraphicsLayer({"id":"subwayLine"});
var subwayLabel = new GraphicsLayer({"id":"subwayLabel"});
map.addLayer(subwayLine);
map.addLayer(subwayStop);
map.addLayer(subwayLabel);
subwayLabel.hide();
map.on("zoom-end",function(){ var level =map.getLevel(); if(level>0){ subwayLabel.show(); } else{ subwayLabel.hide(); } }); subwayStop.on("mouse-over",function(evt){ var scrPt = map.toScreen(evt.graphic.geometry); var statName = evt.graphic.attributes.lb; var stopName = $("<div />").attr("id","stopName") .addClass("stat-name-box") .html(statName) .css("left",scrPt.x) .css("top",scrPt.y+20) .appendTo($("#map")); map.setMapCursor("pointer"); }); subwayStop.on("mouse-out",function(evt){ $("#stopName").remove(); map.setMapCursor("default"); }); subwayStop.on("click",function(evt){ var stopName= evt.graphic.attributes.lb; var lineName = evt.graphic.attributes.ln; lineName = lineName.split(","); var title = "<span style='font-weight: bold;'>"+stopName+"</span>"; var content="<span style='font-weight: bold;'>可乘坐</span>:<br />"; for(var i=0;i<lineName.length;i++){ var pathName = lineName[i].split("|")[1]; content = content+pathName+"<br />"; } map.infoWindow.setTitle(title); map.infoWindow.setContent(content); map.infoWindow.show(evt.graphic.geometry); $(".maximize").hide(); }); subwayLine.on("mouse-over",function(evt){ var scrPt = map.toScreen(evt.mapPoint); var lineTitle = evt.graphic.attributes.lb; var lineName = $("<div />").attr("id","lineName") .addClass("stat-name-box") .html(lineTitle) .css("left",scrPt.x) .css("top",scrPt.y+20) .appendTo($("#map")); map.setMapCursor("pointer"); evt.graphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#00ffff"), 4 ); subwayLine.redraw(); }); subwayLine.on("mouse-out",function(evt){ $("#lineName").remove(); map.setMapCursor("default"); evt.graphic.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[evt.graphic.attributes.i-1]), 4 ); subwayLine.redraw(); }); subwayLine.on("click",function(evt){ var geometry = evt.graphic.geometry; var stops = evt.graphic.attributes.p; var startStop =stops[0],endStop=stops[stops.length-1]; var scrStart = new esri.geometry.ScreenPoint(startStop.x,startStop.y); var scrEnd = new esri.geometry.ScreenPoint(endStop.x,endStop.y); var startPt = map.toMap(scrStart); var endPt = map.toMap(scrEnd); var startName = startStop.lb, endName = endStop.lb; var font = new esri.symbol.Font(); font.setSize("8pt"); font.setFamily("微软雅黑"); var startText = new esri.symbol.TextSymbol(startName),endText = new esri.symbol.TextSymbol(endName); startText.setFont(font), endText.setFont(font); startText.setColor(new dojo.Color([0,0,0,100])),endText.setColor(new dojo.Color([0,0,0,100])); subwayLabel.add(new Graphic(startPt, startText)); subwayLabel.add(new Graphic(endPt, endText)); map.setExtent(geometry.getExtent().expand(1.8)); });
map.on("load",function(){ var legendDiv = $("<div />").addClass("legend-box").appendTo($("#map")); var titleDiv = $("<div />").addClass("tr-title").appendTo(legendDiv).html("图例"); var legendTab = $("<table />").appendTo(legendDiv).hide(); titleDiv.on("click",function(){ if(!legendTab.is(":hidden")){ legendTab.hide(); } else{ legendTab.show(); } }); var mulPt = new Multipoint(); var subLines = subData.sw.l; for(var i= 0,ll =subLines.length;i<ll;i++){ var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 8, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[i]), 3 ), new Color([255,255,255]) ); var pms = PictureMarkerSymbol('chg_stat.png', 12, 12); var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color(color[i]), 4 ); var trItem = $("<tr />").appendTo(legendTab); var legendColor = $("<div />").addClass("legend-item-color").css("background",color[i]); var legendText = $("<div />").addClass("legend-item-text").html(subLines[i].lid); var tdColor = $("<td />").appendTo(trItem).append(legendColor); var tdText = $("<td />").appendTo(trItem).append(legendText); var stops = subLines[i].p; var line = new Array(); for(var j= 0,sl =stops.length;j<sl;j++){ var scrPt = new esri.geometry.ScreenPoint(stops[j].x,stops[j].y); var mapPt = map.toMap(scrPt); mulPt.addPoint(mapPt); line.push([mapPt.x,mapPt.y]); if(stops[j].st==="true"){ var smb = sms; var font = new esri.symbol.Font(); font.setSize("10px"); font.setFamily("微软雅黑"); if(stops[j].ex==="true"){ smb = pms; font.setWeight("bold"); } var gStop = new Graphic(mapPt,smb,stops[j]); subwayStop.add(gStop); var ts = new esri.symbol.TextSymbol(stops[j].lb); ts.setFont(font); ts.setOffset(0,5); var gTxtStop = new Graphic(mapPt,ts); subwayLabel.add(gTxtStop); } } if(subLines[i].loop==="true"){ var scrPt = new esri.geometry.ScreenPoint(stops[0].x,stops[0].y); var mapPt = map.toMap(scrPt); line.push([mapPt.x,mapPt.y]); } var subLine = new Polyline({"paths":[line], "spatialReference":{"wkid":4326}}); var gLine = new Graphic(subLine,sls,subLines[i]); subwayLine.add(gLine); } var trItem = $("<tr />").appendTo(legendTab); var legendColor = $("<img />").attr("src","chg_stat.png").attr("width","15px").attr("height","15px"); var legendText = $("<div />").addClass("legend-item-text").html("换乘站点"); var tdColor = $("<td />").appendTo(trItem).append(legendColor); var tdText = $("<td />").appendTo(trItem).append(legendText); map.setExtent(mulPt.getExtent().expand(1.5)); });
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
相关文章推荐
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- Arcgis for JS实现台风运动路径与影像范围的显示
- Arcgis for Js实现graphiclayer的空间查询
- ArcGIS for js简单实现
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
- Arcgis for Js之鼠标经过显示对象名的实现
- Arcgis for Js之featurelayer实现空间查询和属性查询
- Arcgis for Js之featurelayer实现空间查询和属性查询
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for js之GP实现缓冲区计算
- Arcgis for JS实现台风运动路径与影像范围的显示
- Arcgis for Js之GeometryService实现测量距离和面积
- arcgis api for js共享干货系列之一自写算法实现地图量算工具
- arcgis api for js共享干货系列之一自写算法实现地图量算工具
- Arcgis for js之GP实现缓冲区计算
- Arcgis for JS之Cluster聚类分析的实现
- Arcgis for Js之featurelayer实现空间查询和属性查询
- arcgis api for js共享干货系列之一自写算法实现地图量算工具
- ArcGIS Runtime SDK for iOS(一) – 实现地图的不同点的callout展示