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

墨蓝 2023-10-18 14:38 95阅读 0赞

1.页面中引入需要的js文件(js文件中又引入其他js文件，需要的所有js文件见之前的博客：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）组织画线需要的坐标集合（二维坐标，data是集合，每个对象包含jd、wd属性）

var pointList = new Array();
          for(var i = 0 ;i < data.length;i++){
              pointList[i] = new Array(i);    //在声明二维
              pointList[i][0] = data[i].jd;
              pointList[i][1] = data[i].wd;
          }

（2）把组织的坐标集合添加到地图中画线，添加之前先根据id清除资源，一个Id不能重复赋值

（3）定义一个鼠标放上去的提示对象

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

（4）添加鼠标监听提示，提示信息上添加跳转链接

map.on('mouseenter', 'bufferLine', function (e) {   //根据id绑定鼠标进入事件
                  var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
                  popup.remove(); 
                  var clickPointTemp = clickPoint+"";
                  var lngLatStrArr = clickPointTemp.split("(");         
                  var lngLatArr = lngLatStrArr[1].split(",");
                  var lng = lngLatArr[0];
                  var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
                  map.getCanvas().style.cursor = 'pointer';       //地图鼠标画布样式变为手   (crosshair:为  十字架）           
                  popup.setLngLat(clickPoint)
                  .setHTML("<ul><li>路线编码：</li><li>路线名称：</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
                    .addTo(map);         
            });              
        
            /*  
            map.on('mouseleave', 'bufferLine', function (e) {    //根据id绑定鼠标移出事件
                  map.getCanvas().style.cursor = '';    
                  popup.remove();          
            });*/     
            
            map.on('click', 'bufferLine', function (e) {        //根据id绑定鼠标点击事件       
                  var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
                  popup.remove(); 
                  var clickPointTemp = clickPoint+"";
                  var lngLatStrArr = clickPointTemp.split("(");
                  var lngLatArr = lngLatStrArr[1].split(",");    
                  var lng = lngLatArr[0];
                  var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
                  map.getCanvas().style.cursor = 'pointer';       //地图鼠标画布样式变为手                     
                  popup.setLngLat(clickPoint)
                  .setHTML("<ul><li>路线编码：</li><li>路线名称：</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
                    .addTo(map);       
            });  
            
            map.on('mousemove', 'bufferLine', function (e) {    //根据id绑定鼠标移动事件           
                  var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
                  popup.remove(); 
                  var clickPointTemp = clickPoint+"";
                  var lngLatStrArr = clickPointTemp.split("(");
                  var lngLatArr = lngLatStrArr[1].split(",");    
                  var lng = lngLatArr[0];
                  var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
                  map.getCanvas().style.cursor = 'pointer';       //地图鼠标画布样式变为手                     
                  var currentStackTemp = getCurrentStackByLngLat(lng,lat,roadCode);//通过经纬度得到当前桩号
                  popup.setLngLat(clickPoint)
                  .setHTML("<ul><li>路线编码：</li><li>路线名称：</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center'  onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
                    .addTo(map);       
            });