Arcgis for js实现北京地铁的展示

概述：

通过获取百度地铁图数据，将北京市地铁图在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实现北京地铁的展示相关推荐

（转） Arcgis for js加载百度地图
http://blog.csdn.net/gisshixisheng/article/details/44853709 概述: 在前面的文章里提到了Arcgis for js加载天地图,在本节,继续讲 ...
Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
【Python Onramp】7. web端可视化：北京地铁数据统计分析实例以及简易Echarts绘图
系列文章目录见[Python Onramp] 0. 卷首语上一篇:[Python Onramp]6.一篇文章了解web开发要点:用Python开发简易的网页端成绩查询系统下一篇:[Python ...
Arcgis for js，Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
Arcgis for JS之Cluster聚类分析的实现
原文:Arcgis for JS之Cluster聚类分析的实现在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含XY坐标信息的,通过graphic和graphicla ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
（转）Arcgis for Js之鼠标经过显示对象名的实现
http://blog.csdn.net/gisshixisheng/article/details/41889345 在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来 ...
（转）基于Arcgis for Js的web GIS数据在线采集简介
http://blog.csdn.net/gisshixisheng/article/details/44310765 在前一篇博文"Arcgis for js之WKT和geometry转换 ...
(转）Arcgis for JS之Cluster聚类分析的实现
http://blog.csdn.net/gisshixisheng/article/details/40711075 在做项目的时候,碰见了这样一个问题:给地图上标注点对象,数据是从数据库来的,包含 ...

Arcgis for js实现北京地铁的展示

Arcgis for js实现北京地铁的展示相关推荐

最新文章

热门文章