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

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

   <script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../../dist/js/include-web.js"></script>
   <script type="text/javascript" include="draw,compare" src="../../dist/mapboxgl/include-mapboxgl.js"></script>  

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

 var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";              
    var mapUrl = host+"/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}";//加载底图的url

  var map = new mapboxgl.Map({
        container: 'arcgisDiv',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "type": "raster",
                    "tiles": [mapUrl],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "before",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }],
        },
        center: [105.85, 36.79],
        zoom: 3.8     
    });

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不能重复赋值       

 var existSource = map.getSource("geometryLineSource");               //（根据id查询）资源存在则移除
        if(existSource){
              map.removeSource("geometryLineSource");                       
        }                   
        var existLayer = map.getLayer("bufferLine");                 //（根据id查询）layer存在则移除
        if(existLayer){
              map.removeLayer("bufferLine");            
        }    

      //加载线   
      var geometryLine = {  
          "type": "Feature",
          "geometry": {
              "type": "LineString",            //声明是画线
              "coordinates": pointList
          }
      };    
      map.addSource("geometryLineSource", {   //添加source
          "type": "geojson",
          "data": geometryLine
      });
      map.addLayer({     
          "id": "bufferLine",
          "type": "line",
          "source":"geometryLineSource",   
          "layout": {
              "line-join": "round",
              "line-cap": "round"
          },
          "paint": {
              "line-color": "red",       //线颜色
              "line-width": 4             //线宽度
          },
      });        

（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);       
        });