supermap节点MapboxGl绘制多条线，添加地标鼠标提示监听

快来打我* 2023-10-18 14:38 95阅读 0赞

1.页面中引入需要的js文件(js文件中又引入其他js文件，需要的所有js文件见之前的博客：[https://mp.csdn.net/postedit/87778048][https_mp.csdn.net_postedit_87778048]）

2.引入底图，创建map对象，其中container: 'arcgisDiv'为页面中定义的div

3.添加比例尺、导航、绘画工具

var navigationControl = new mapboxgl.NavigationControl();
        var scaleControl = new mapboxgl.ScaleControl();
        var draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                line_string: true,
                polygon: true,
                trash: true
            }
        });
    
        map.addControl(navigationControl, 'top-left');     //导航条
        map.addControl(scaleControl);     
        map.addControl(draw, "top-right");

4.画多条线，添加鼠标提示监听

（1）定义鼠标放上去出现的提示对象、自定义地标对象

var popup= new mapboxgl.Popup({
            anchor: 'bottom',
            closeButton: true
        });

（2）组织多条线集合（data每条记录包含起点和终点坐标，每条线路包含提示）

var optimalData = new Array();
    
          for(var i = 0;i < data.length;i++){
                  var capital = getIndicatorsPointTip(data[i].startStake);  //得到提示
                  var pointList = getPointListByGps(data[i].gps)    //通过gps值组织成画线需要的起始点坐标
                  optimalData.push({   
                         "type": "Feature",
                         "geometry": {
                             "type": "LineString",
                             "coordinates": pointList
                         },
                         "properties": {POP: 1, CAPITAL: capital,STACK:data[i].startStake}
                  });                    
            }
    
           function getIndicatorsPointTip(startStake){     
                  return "<ul><li>桩号："+startStake+"</li></ul>";
            }
    
         //通过gps值组织成画线需要的起始点坐标
         function getPointListByGps(gps){
             var gpsArr = gps.split(",");
             var pointList = new Array();
             if(gpsArr.length == 4){
                   pointList[0] = new Array(0);    //在声明二维
                   pointList[0][0] = gpsArr[0];
                   pointList[0][1] = gpsArr[1];
                   pointList[1] = new Array(1);    //在声明二维
                   pointList[1][0] = gpsArr[2];
                   pointList[1][1] = gpsArr[3];
              }
              return pointList;
        }

（3）把路线数据添加到地图上展示

map.addSource("sourceId", {   //添加source
               "type": "geojson",
               "data": {
                    "type": "FeatureCollection",   //申明是一个数据集合
                    "features": optimalData
                }    
            });
              
            map.addLayer({     
               "id": "layerId",
               "type": "line",
               "source":"sourceId",   
               "layout": {
                  "line-join": "round",
                  "line-cap": "round"
               },
               "paint": {
                  "line-color": color,
                  "line-width": 6     
               },
            });

（4）添加路线鼠标监听提示

map.on('mouseenter',"layerId", function (e) {   //根据id绑定鼠标进入事件
                popup.remove();
                map.getCanvas().style.cursor = 'pointer';
                var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
                popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);       
            });           
            
            map.on('mousemove', "layerId", function (e) {   
                  popup.remove();
                  map.getCanvas().style.cursor = 'pointer';
                  var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
                  popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);       
            });  
          
            /*
            map.on('mouseout', "layerId", function () {
                map.getCanvas().style.cursor = '';
                popup.remove();      
            })  
            */    
                 
            map.on('click', "layerId", function (e) {       //根据id绑定鼠标点击事件       
                  popup.remove();    
                  map.getCanvas().style.cursor = 'pointer';
                  var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
                  popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);       
            });

[https_mp.csdn.net_postedit_87778048]: https://mp.csdn.net/postedit/87778048