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

清疚 2023-10-18 14:38 107阅读 0赞

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

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

4.画单个用户自己指定地标，添加鼠标提示监听

（1）先给地图添加图标

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

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

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

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