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）先给地图添加图标

      

  map.loadImage('../../dist/img/marker-icon.png', function (error, image) {
            if (error) throw error;
            map.addImage('positionPoint', image);
        });

（2）组织图表显示的坐标（data为一个包含jd、wd的对象）
      

 var point = new Array();
        point[0] = data.jd;
        point[1] = data.wd;   
        var pointGeometryFetures = new Array();
        pointGeometryFetures.push({
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": point,
            }
        });

        var existSource = map.getSource("sourceId");               //（根据id查询）资源存在则移除
        if(existSource){
              map.removeSource("sourceId");                       
        }                   
        var existLayer = map.getLayer("PointLayer");                 //（根据id查询）layer存在则移除
        if(existLayer){
              map.removeLayer("PointLayer");            
        }    
        map.addSource("sourceId", {   //添加source
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": pointGeometryFetures
            }      
        });  
        
        //type的形状值：[fill, line, symbol, circle, heatmap, fill-extrusion, raster, hillshade, background]
        map.addLayer({
            "id": "PointLayer",
            "type": "symbol",
            "source": "sourceId",
            "layout": {
                "icon-image": "positionPoint",  //此值对应上面添加的地标
                "icon-size": 0.1,        
                "icon-offset": [0, -15] //设置偏移量
            },
        });       

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

   var popupNoClose = new mapboxgl.Popup({
        anchor: 'bottom',
        closeButton: false   //false不包含关闭按钮，true带有关闭按钮
    });      

              
（4）添加地标的鼠标监听事件         

   map.on('mouseenter', "PointLayer", function (e) {   //根据id绑定鼠标进入事件（PointLayer对应添加layui的id）
              var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
              popupNoClose.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';       //地图鼠标画布样式变为手                     
              popupNoClose.setLngLat(clickPoint)
            .setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
            .addTo(map);               
        });              
       
        map.on('mouseleave', "PointLayer", function (e) {    //根据id绑定鼠标移出事件
              map.getCanvas().style.cursor = '';
              popupNoClose.remove();          
        });       
        
        map.on('click', "PointLayer", function (e) {       //根据id绑定鼠标点击事件       
              var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
              popupNoClose.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';       //地图鼠标画布样式变为手                     
              popupNoClose.setLngLat(clickPoint)
            .setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
            .addTo(map);             
        });  
        
        map.on('mousemove', layerId, function (e) {   //根据id绑定鼠标移动事件           
              var clickPoint = e.lngLat;                                    //获取点击的点坐标                      
              popupNoClose.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';       //地图鼠标画布样式变为手                     
              popupNoClose.setLngLat(clickPoint)
             .setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
             .addTo(map);          
        });