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

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

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

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

猜你喜欢