Arcgis 地图

最新推荐文章于 2024-06-04 20:15:00 发布

流尺水

最新推荐文章于 2024-06-04 20:15:00 发布

阅读量237

点赞数

文章标签： Arcgis

本文链接：https://blog.csdn.net/u010261238/article/details/86654190

版权

该博客展示了合肥地铁沿线的详细站点数据，包括火车站、长淮、明光路等，涉及城市顺序、ID和各站流量信息。

摘要由CSDN通过智能技术生成

<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“地铁沿线.aspx.cs” Inherits=“NPI.MapAPI.地铁沿线” %>

<script src="js/init.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var map;
    var poiGraphicLry, lineGraphicLry;;
    var pointArr = [];
    var gisApi = {};
    var gjPointArr=[];
    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/GraphicsLayer", "dojo/dom", "dojo/on", "dojo/domReady!"],
    function (Map, Tiled, GraphicsLayer, dom, on) {
        map = new Map("map", { center: [117.339934, 31.784765], zoom: 4 ,slider:false,logo:false});
        var tiled = new Tiled("http://ahtdt.ahmap.gov.cn/arcgis/rest/services/AH_ELETest/MapServer");
        map.addLayer(tiled);
        poiGraphicLry = new GraphicsLayer();
        lineGraphicLry = new GraphicsLayer();
        map.addLayer(lineGraphicLry);
        map.addLayer(poiGraphicLry);
        var jsonO="";
                 try{
                       $.ajax({ 
                          type: "get",//请求方式 
                          url: "jsons.json",//地址，就是action请求路径 
                          data: "json",//数据类型text xml json  script  jsonp 
                          success:succFunction,                 
                          error: function(msg){
                              console.log(msg)
                          }
                       });  
                 }catch(ex){
                       console.log(ex);
                 }
                 var images = "subway.png";
                 var gjStr="";
                 function succFunction(json){
                       var jsonO = eval(json);
                       for (var i = 0; i < jsonO.results.length; i++) {
                   var lng = 0;
                   var lat = 0;
                   var city_name = jsonO.results[i].city_name;
                   var gjvalue = jsonO.results[i].value;
                   lng = GetLnglat(jsonO.results[i].city_name)[0];
                   lat = GetLnglat(jsonO.results[i].city_name)[1];
                   if (gjvalue > 0) {                     
                        gjStr+=i.toString()+",";                        
                       document.getElementById("gj").innerHTML +=
                           "<div class='divClass' id=city_" + i + " onclick=getCenter('" + city_name + "'," +i+ ")>" +
                           city_name + "</div>";
                   }
                  
                   if (jsonO.results[i].value > 0) {
                       images = "subway_red.png";
                   } else {
                       images = "subway.png";
                   }
                   pointArr.push({ x: lng, y: lat, pic: images, cityname: city_name, value: gjvalue });
               }
                       gjStr=gjStr.substring(0,gjStr.length-1);
                       gjPointArr=gjStr.split(",");
                       showPoints(images);
               showLine();
               dojo.connect(poiGraphicLry, "onMouseOver", poiGraphicLryHandler);
                 }                                         
    }
  );
    /*
           鼠标悬浮事件-弹窗（地铁站）
           * */
    function poiGraphicLryHandler(evt) {
        var hgraphic = evt.graphic;
        var point = hgraphic.mapPoint;
        var attribute = hgraphic.attributes;
        var sContent = "<div class='subject'>"
                     + "<span>" + attribute.name + "</span><br />"
                     + "<span>告警数量：" + attribute.value + "</span>"
                     + "</div>";
        map.infoWindow.setContent(sContent);
        map.infoWindow.resize(150, 100);
        map.infoWindow.setTitle("告警详情");
        map.infoWindow.show(event.screenPoint, map.getInfoWindowAnchor(event.screenPoint));
        map.centerAt(point);          
    }
          /*
           根据点增加线图层
           * */
    function showLine() {
        lineGraphicLry.clear();
        var points = [];
        var sls;
        require(["esri/layers/GraphicsLayer", "esri/symbols/SimpleLineSymbol",
                 "esri/Color", "esri/InfoTemplate", "esri/graphic", "esri/geometry/Polyline", "esri/geometry/Point"],
                 function (GraphicsLayer, SimpleLineSymbol, Color, InfoTemplate, Graphic, Polyline, Point) {
                     sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                              new Color([122,185, 0]), 6
                         );
                     var path = [];
                     for (var i = 0; i < pointArr.length; i++) {
                         var val = pointArr[i];
                         var point = new Point(val.x, val.y);
                         points.push(point);
                     };
                     var polyline = new Polyline();
                     polyline.addPath(points);
                     var graphic = new Graphic(polyline, sls);
                     lineGraphicLry.add(graphic);
                     dojo.connect(lineGraphicLry, "onMouseOver", linGraphicLryHandler);
                 });
    }
          /**
           *增加点图层 （如果不需要传images，可以去掉）
           */
    function showPoints(images) {
        //poiGraphicLry.clear();
        require(["esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
        "esri/Color", "esri/InfoTemplate", "esri/graphic", "esri/symbols/PictureMarkerSymbol"],
        function (Point, SimpleMarkerSymbol, Color, InfoTemplate, Graphic, PictureMarkerSymbol) {
            var marksymbol = new SimpleMarkerSymbol();
            var pictureMarkerSymbol = null;
            for (var i = 0; i < pointArr.length; i++) {
                var val = pointArr[i];
                pictureMarkerSymbol = new PictureMarkerSymbol(val.pic, 20, 20);
                var attribute = { name: val.cityname, value: val.value, ID: i };
                var point = new Point(val.x, val.y);
                poiGraphicLry.add(new Graphic(point, pictureMarkerSymbol, attribute));
            };
        });
    }
          /*
           鼠标悬浮事件-弹窗（地铁线）
           * */
    function linGraphicLryHandler() {
        map.infoWindow.setContent("合肥地铁一号线");
        map.infoWindow.resize(150, 100);
        map.infoWindow.setTitle("地铁一号线");
        map.infoWindow.show(event.screenPoint, map.getInfoWindowAnchor(event.screenPoint));
        //map.centerAt(point);
    }
          /*
          
           * 点击告警导航栏，地图重点显示该地点
           * */
    function getCenter(point,i) {
        addStyle(i);
        var lng = 0; var lat = 0;
        lng = GetLnglat(point)[0];
        lat = GetLnglat(point)[1];
        var position = new esri.geometry.Point(lng,lat);
        map.centerAndZoom(position, 9);
        //debugger
        //var xy = map.toScreen(position);
       
        //map.infoWindow.hide();
        //map.infoWindow.setContent("哈哈");
        //map.infoWindow.resize(150, 100);
        //map.infoWindow.setTitle("告警详情");
        //map.infoWindow.show(xy, map.getInfoWindowAnchor(xy));
    }
    /*
    
     * 点击告警导航栏添加样式
     * */
    function addStyle(i) {           
        var id = ("city_" + i);
        var cityid = document.getElementById(id);
        for(var s=0;s<gjPointArr.length;s++){
          var sValue=parseInt(gjPointArr[s]);
          if(i==sValue){
                 cityid.style.background = "#fff";
                cityid.style.border = "1px solid #78AEE5";
          }
          else{
                 try{
                       document.getElementById("city_" + sValue).style.background = "#FAF5F5";
                 document.getElementById("city_" + sValue).style.border = "0px solid #78AEE5";
                 }catch(ex){}
                 
          }
        }      
    }
                 /*
                 
                  * 字典方法（地铁一号线）
                  * 如果有地铁二号线，可以再建function  GetLnglat2(point)
                  * */
        function GetLnglat(point) {
            var Lnglat = [];
            switch (point) {
                case '火车站': Lnglat = [117.32213, 31.889231]; return Lnglat; break;
                case '长淮': Lnglat = [117.315762, 31.881251]; return Lnglat; break;
                case '明光路': Lnglat = [117.311287, 31.875701]; return Lnglat; break;
                case '大东门': Lnglat = [117.307281, 31.869806]; return Lnglat; break;
                case '包公园': Lnglat = [117.308053, 31.862032]; return Lnglat; break;
                case '工大南区': Lnglat = [117.307182, 31.853222]; return Lnglat; break;
                case '朱岗': Lnglat = [117.307936, 31.837816]; return Lnglat; break;
                case '秋浦河路': Lnglat = [117.308575, 31.82869]; return Lnglat; break;
                case '葛大店': Lnglat = [117.309806, 31.820215]; return Lnglat; break;
                case '望湖城': Lnglat = [117.298685, 31.811409]; return Lnglat; break;
                case '合肥南站': Lnglat = [117.297001, 31.804752]; return Lnglat; break;
                case '南站南广场': Lnglat = [117.29853, 31.798292]; return Lnglat; break;
                case '骆岗': Lnglat = [117.298065, 31.789183]; return Lnglat; break;
                case '高王': Lnglat = [117.298073, 31.778655]; return Lnglat; break;
                case '滨湖会展中心': Lnglat = [117.309517, 31.760239]; return Lnglat; break;
                case '紫庐': Lnglat = [117.309528, 31.746766]; return Lnglat; break;
                case '塘西河公园': Lnglat = [117.30915, 31.737311]; return Lnglat; break;
                case '金斗公园': Lnglat = [117.309402, 31.728848]; return Lnglat; break;
                case '云谷路': Lnglat = [117.309068, 31.718808]; return Lnglat; break;
                case '万达城': Lnglat = [117.308628, 31.711451]; return Lnglat; break;
                case '万年埠': Lnglat = [117.308538, 31.704101]; return Lnglat; break;
                case '丙子铺': Lnglat = [117.304171, 31.697148]; return Lnglat; break;
                case '九联圩': Lnglat = [117.292773, 31.697136]; return Lnglat; break;
            }
        }
</script>

<div id="gj" class="gjdiv"></div>
<div id="map" style="float:left;width:50%;margin-left:5px;"></div>

jsons.json

{
“success”: true,
“count”: 0,
“message”: null,
“results”: [
{
“id”: 23,
“railway”: “合肥地铁”,
“city_name”: “火车站”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 24,
“railway”: “合肥地铁”,
“city_name”: “长淮”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 26,
“railway”: “合肥地铁”,
“city_name”: “明光路”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 27,
“railway”: “合肥地铁”,
“city_name”: “大东门”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 28,
“railway”: “合肥地铁”,
“city_name”: “包公园”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 29,
“railway”: “合肥地铁”,
“city_name”: “工大南区”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 30,
“railway”: “合肥地铁”,
“city_name”: “朱岗”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 31,
“railway”: “合肥地铁”,
“city_name”: “秋浦河路”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 32,
“railway”: “合肥地铁”,
“city_name”: “葛大店”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 33,
“railway”: “合肥地铁”,
“city_name”: “望湖城”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 34,
“railway”: “合肥地铁”,
“city_name”: “合肥南站”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 35,
“railway”: “合肥地铁”,
“city_name”: “南站南广场”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 36,
“railway”: “合肥地铁”,
“city_name”: “骆岗”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 37,
“railway”: “合肥地铁”,
“city_name”: “高王”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 38,
“railway”: “合肥地铁”,
“city_name”: “滨湖会展中心”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 39,
“railway”: “合肥地铁”,
“city_name”: “紫庐”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 40,
“railway”: “合肥地铁”,
“city_name”: “塘西河公园”,
“cityorder”: 3,
“value”: 4.0
},
{
“id”: 41,
“railway”: “合肥地铁”,
“city_name”: “金斗公园”,
“cityorder”: 4,
“value”: 381.0
},
{
“id”: 42,
“railway”: “合肥地铁”,
“city_name”: “云谷路”,
“cityorder”: 5,
“value”: 12.0
},
{
“id”: 43,
“railway”: “合肥地铁”,
“city_name”: “万达城”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 44,
“railway”: “合肥地铁”,
“city_name”: “万年埠”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 45,
“railway”: “合肥地铁”,
“city_name”: “丙子铺”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 49,
“railway”: “合肥地铁”,
“city_name”: “九联圩”,
“cityorder”: 4,
“value”: 0.0
}
],
“results1”: [
{
“id”: 23,
“railway”: “合肥地铁”,
“city_name”: “火车站”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 24,
“railway”: “合肥地铁”,
“city_name”: “长淮”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 26,
“railway”: “合肥地铁”,
“city_name”: “明光路”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 27,
“railway”: “合肥地铁”,
“city_name”: “大东门”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 28,
“railway”: “合肥地铁”,
“city_name”: “包公园”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 29,
“railway”: “合肥地铁”,
“city_name”: “工大南区”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 30,
“railway”: “合肥地铁”,
“city_name”: “朱岗”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 31,
“railway”: “合肥地铁”,
“city_name”: “秋浦河路”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 32,
“railway”: “合肥地铁”,
“city_name”: “葛大店”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 33,
“railway”: “合肥地铁”,
“city_name”: “望湖城”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 34,
“railway”: “合肥地铁”,
“city_name”: “合肥南站”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 35,
“railway”: “合肥地铁”,
“city_name”: “南站南广场”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 36,
“railway”: “合肥地铁”,
“city_name”: “骆岗”,
“cityorder”: 3,
“value”: 0.0
},
{
“id”: 37,
“railway”: “合肥地铁”,
“city_name”: “高王”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 38,
“railway”: “合肥地铁”,
“city_name”: “滨湖会展中心”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 39,
“railway”: “合肥地铁”,
“city_name”: “紫庐”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 40,
“railway”: “合肥地铁”,
“city_name”: “塘西河公园”,
“cityorder”: 3,
“value”: 4.0
},
{
“id”: 41,
“railway”: “合肥地铁”,
“city_name”: “金斗公园”,
“cityorder”: 4,
“value”: 381.0
},
{
“id”: 42,
“railway”: “合肥地铁”,
“city_name”: “云谷路”,
“cityorder”: 5,
“value”: 12.0
},
{
“id”: 43,
“railway”: “合肥地铁”,
“city_name”: “万达城”,
“cityorder”: 4,
“value”: 0.0
},
{
“id”: 44,
“railway”: “合肥地铁”,
“city_name”: “万年埠”,
“cityorder”: 5,
“value”: 0.0
},
{
“id”: 45,
“railway”: “合肥地铁”,
“city_name”: “丙子铺”,
“cityorder”: 2,
“value”: 0.0
},
{
“id”: 49,
“railway”: “合肥地铁”,
“city_name”: “九联圩”,
“cityorder”: 4,
“value”: 0.0
}
],
“results2”: null
}