supermap节点MapboxGl绘制多个地标，添加地标鼠标提示监听

不念不忘少年蓝@ 2023-10-18 14:38 155阅读 0赞

1.页面中引入需要的js文件(js文件中又引入其他js文件，需要的所有js文件见之前的博客：[https://mp.csdn.net/postedit/87778048][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）定义鼠标放上去出现的提示对象、自定义地标对象

var popupNoClose = new mapboxgl.Popup({
            anchor: 'bottom',
            closeButton: false   
        }); 
    
       map.loadImage('../../dist/img/marker-icon.png', function (error, image) {
            if (error) throw error;
            map.addImage('positionPoint', image);       
        });

（2）组织地标的经纬度集合、提示信息集合（data为数据集合，每条记录包含jd、wd和基础信息)

var pointList = new Array();
            var tipArray = 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;
                tipArray[i] = getPointTip(data[i]);   //得到每行记录提示信息的方法
            }
    
      function getPointTip(data){
                return "<ul><li>桥梁名称："+data.bridgeName+"</li><li>桥梁全长："+data.bridgeTotalLength+"</li><li>桥梁全宽："+data.bridgeTotalWidth+"</li></ul>";
        }

（3）把组织好的集合添加到map需要的数据集后在地图上画出（pointList和tipArray数组是有序的，长度相等）

（4）添加鼠标监听提示

map.on('mouseenter', 'layerId', function (e) {   //根据id绑定鼠标进入事件
                popupNoClose.remove();
                popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
                map.getCanvas().style.cursor = 'pointer';          
            });           
            
            map.on('mousemove', 'layerId', function (e) {   
                popupNoClose.remove();
                popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
                map.getCanvas().style.cursor = 'pointer';
            });  
            
            map.on('mouseout', 'layerId', function () {
                map.getCanvas().style.cursor = '';
                popupNoClose.remove();      
            })   
                 
            map.on('click', 'layerId', function (e) {       //根据id绑定鼠标点击事件       
                popupNoClose.remove();
                popupNoClose.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(map);
                map.getCanvas().style.cursor = 'pointer';                  
            });

[https_mp.csdn.net_postedit_87778048]: https://mp.csdn.net/postedit/87778048