arcgis js 画多条线

缺乏、安全感 2023-10-18 22:35 39阅读 0赞

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

2.**页面定义div：**

<div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div>

3.**加载地图连接：**

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

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添加到地图子节点中  
                }   
            });           
    
        }