arcgis js 画多条线

最新推荐文章于 2025-06-03 10:43:30 发布

原创最新推荐文章于 2025-06-03 10:43:30 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #line

本文介绍如何使用ArcGIS JavaScript API 3.29版本进行地图初始化、加载底图，并详细讲解了组织多条线路径集合、绘制多条线及实现画线监听的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入需要的css、js文件，github地址：https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29

<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/esri.css}"/>   
<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/tundra.css}"/>
<script th:src="@{/dist/arcgis/3.29/js/init.js}"></script>

2.页面定义div：

    <!-- 底图展示的div开始 -->            
    <div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div> 
    <!-- 底图展示的div结束 -->

3.加载地图连接：

 var map = null;                       //共用地图定义
    var pointLayer = null;                //单点图层
    var aimedatLayer = null;              //瞄准点图层
    var pointListLayer = null;            //多点图层
    var lineLayer = null;                 //单线图层
    var lineListLayer = null;             //多线图层
    var pictureMarkerSymbol = null;       //图标marker
    var aimedatMarkerSymbol = null;       //瞄准图标marker
    var simpleLineSymbol = null;          //画线marker
    var url = "http://xxx.xx.xx.xxx:6080/arcgis/rest/services/CMAPDT/MapServer";  //底图的链接地址   

 //加载超图底图--超图
    function loadSupermapBaseMap(){        
        require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/GraphicsLayer","esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color","dojo/dom-construct", "esri/dijit/InfoWindow"
        ], function(Map,ArcGISTiledMapServiceLayer,GraphicsLayer,PictureMarkerSymbol,SimpleLineSymbol,Color,domConstruct,InfoWindow) {        
            //var infoWindow = new InfoWindow({}, domConstruct.create("div"));
            //infoWindow.startup();     
            map = new Map("map", {center: [105.85, 36.79],zoom: 1});    //创建地图、指明中心点、放大程度值设置    
            var tiledLayer = new ArcGISTiledMapServiceLayer(url);       //根据图层链接创建图层
            map.addLayer(tiledLayer);                                   //图层添加到地图中         
            pointLayer = new GraphicsLayer({"id":"pointLayer"});        
            aimedatLayer = new GraphicsLayer({"id":"aimedatLayer"});   
            pointListLayer = new GraphicsLayer({"id":"apointListLayer"});
            lineLayer = new GraphicsLayer({"id":"lineLayer"});
            lineListLayer = new GraphicsLayer({"id":"lineListLayer"});
            map.addLayer(pointLayer, 2);     
            map.addLayer(aimedatLayer, 2);          
            map.addLayer(pointListLayer, 2);          
            map.addLayer(lineLayer, 2);          
            map.addLayer(lineListLayer, 2);             
            pictureMarkerSymbol = new PictureMarkerSymbol({"url":"/dist/img/marker-icon.png","height":25,"width":20,"xoffset":0,"yoffset":12});          
            aimedatMarkerSymbol = new PictureMarkerSymbol("/dist/img/aimedat.png", 45, 45);     
        });    
    }

4.组织多条线路径集合，单条线二维数组，多条线使用三维数组

 var pointListThree = new Array();             //存放点集合（三维）  
         var pointList = new Array();                  //存放点集合（二维）  
         var tempProv = data[0].regionCode; 
         var index = 0;
         for(var i = 0 ;i < data.length;i++){
             if(tempProv == data[i].regionCode){
                 pointList[index] = new Array();    //在声明二维
                 pointList[index][0] = data[i].jd;
                 pointList[index][1] = data[i].wd;    
                 index++;    
             }else{
                 pointListThree.push(pointList);  
                 pointList = [];                     //清空
                 tempProv = data[i].regionCode;      //重新赋值
                 index = 0;                          //重新赋值   
                 pointList[index] = new Array();//在声明二维
                 pointList[index][0] = data[i].jd;
                 pointList[index][1] = data[i].wd;
                 index++;
             }     
             if(i == data.length-1){                 //最后一行记录的情况    
                 pointListThree.push(pointList);
             }   
         }
         if(pointListThree != null && pointListThree.length > 0){
             drawLineListSameTipArcgis(pointListThree,popContent,roadCode,firstLi,firstLiBeforePicture,moveTip,firstOnePoint);    //把路线先画了 
         }

5.开始画多条线，画线监听：

//画路线集合，适用于同一个提示信息的画线
    function drawLineListSameTipArcgis(pointListThree,popContent,roadCode,firstLi,firstLiBeforePicture,moveTip,firstOnePoint){ 
        require(["esri/graphic","esri/dijit/InfoWindow","dojo/dom-construct","dojo/dom-attr","dojo/dom-style","dojo/dom","esri/geometry/Point"], function(Graphic,InfoWindow,domConstruct,domAttr,domStyle,dom,Point) {           
            cleanLayer();                                   //清理图层
            var myLine ={geometry:{"paths":pointListThree,  //画多条线   
                "spatialReference":{"wkid":4326}},    
                "symbol":{"color":[29,157,225],"width":4,"type":"esriSLS","style":"esriSLSSolid"}};
            var graphic = new Graphic(myLine);                    
            lineLayer.add(graphic);               
            lineLayer.on("click",popupLayerClick);    //点击提示层的方法
            lineLayer.on("mouse-over",showMoveTip);   //鼠标放到提示层的方法
            lineLayer.on("mouse-out",popupLayerOut);  //鼠标移开提示层的方法    
            lineLayer.on("mouse-move",showMoveTip);   //鼠标移动提示层的方法    
            map.infoWindow.hide();                     //隐藏弹出提示框     
            position();                                //定位放大地图
            
            //清理图层 
            function cleanLayer(){
               lineLayer.clear();
            } 
            
            //定位放大地图
            function position(){  
               var latitude = parseFloat(firstOnePoint[0]);
               var longitude = parseFloat(firstOnePoint[1]);          
               var point = new Point(latitude, longitude, map.spatialReference);        
               map.setScale(8000000);        //缩放比例 （比例尺）                                                           
               map.centerAndZoom(point);     //定位               
            }  
            
            //点击提示层的方法   
            function popupLayerClick(e){        
                var currentStackTemp = getCurrentStackByLngLat(e.mapPoint.x,e.mapPoint.y,roadCode);//通过经纬度得到当前桩号  
                   var currentStackPopContent = "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-bottom:10px'><li>当前桩号："+stakeTransformation(currentStackTemp)+"</li></ul>";
                 var popContentTemp = "";
                 if(!atBeforePictureNow){    //当前不处于前方图像展示
                     popContentTemp = firstLi+popContent+currentStackPopContent;
                 }else{
                     popContentTemp = firstLiBeforePicture+popContent+currentStackPopContent;
                     clickMapRoadPositionCharts(currentStackTemp,e.mapPoint.x,e.mapPoint.y);   //点击地图路线重新定位前方图像底部图表、重新请求前方图像
                 }  
                 e.stopPropagation();   
                map.infoWindow.setTitle("基本信息");            
                map.infoWindow.setContent(popContentTemp);      
                map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);    //e.mapPoint为地图点击的点         
            }

            //鼠标移开提示层的方法    
            function popupLayerOut(e){  
                map.setMapCursor("default");             //设置地图的小手样式
                if(dom.byId("text") != null){            //判断提示框存在则移除提示框
                    dom.byId("map").removeChild(dom.byId("text"));   
                }
            }  

            //展示提示的方法
            function showMoveTip(e){
                map.setMapCursor("pointer");
                var scrPt = map.toScreen(e.mapPoint);     //e.mapPoint为地图点击的点 ， map.toScreen转成屏幕的坐标 
                var textDiv = domConstruct.create("div"); //创建一个div
                domAttr.set(textDiv,{                     //给div设置Attr
                    "id":"text",
                    "text":""  
                });  
                domStyle.set(textDiv, {                   //给div设置Style
                    "left": scrPt.x+10 + "px",   
                    "top": scrPt.y-10 + "px",     
                    "position": "absolute",
                    "z-index":99,
                    "background":"#fcffd1",
                    "font-size":"10px",
                    "border":"1px solid #0096ff",
                    "padding": "0.1em 0.3em 0.1em",
                    "border-radius": "3px",
                    "box-shadow": "0 0 0.75em #777777"
                });   
                var currentStackTemp = getCurrentStackByLngLat(e.mapPoint.x,e.mapPoint.y,roadCode);//通过经纬度得到当前桩号
                  var popContentTemp = "<div style='font-size:14px;height:20px;margin-left:5px;margin-right:5px'>"+moveTip+" "+stakeTransformation(currentStackTemp)+"</div>";  
                textDiv.innerHTML = popContentTemp;             //给div设置显示内容
                if(dom.byId("text") != null){            //判断提示框存在则移除提示框
                    dom.byId("map").removeChild(dom.byId("text"));   
                }
                dom.byId("map").appendChild(textDiv);    //把div添加到地图子节点中  
            }   
        });           

    }