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

时间:2019-02-20
本文章向大家介绍supermap节点MapboxGl绘制多条线,添加地标鼠标提示监听,主要包括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)定义鼠标放上去出现的提示对象、自定义地标对象

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