从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标

不念不忘少年蓝@ 2023-10-12 15:34 11阅读 0赞

#### 文章目录 ####

*   *   *  1、飞行平移到鼠标点击图层属性的地图中心位置
         *  2、当鼠标光标进入“圆”图层中的某个要素时，将其更改为指针
         *  3、量测距离
         *  4、量测area面积和中心点坐标

#### 1、飞行平移到鼠标点击图层属性的地图中心位置 ####

//鼠标点击事件
            map.on("click", "iconImage", (e) => {
        
              console.log("e", e);
              const lng = e.lngLat.lng;
              const lat = e.lngLat.lat;
              const coordinates = e.lngLat;
    
              const description = "点击的位置坐标为：" + lng + "/" + lat;
              popup.setLngLat(coordinates).setHTML(description).addTo(map);
              //飞行平移到地图中心的位置
              map.flyTo({
        
                  center: e.lngLat,
                  zoom: 3,
                  speed: 0.2,
                  curve: 2,
              });
    
            });

#### 2、当鼠标光标进入“圆”图层中的某个要素时，将其更改为指针 ####

// Change the cursor to a pointer when the it enters a feature in the 'circle' layer.
    	map.on('mouseenter', 'circle', () => {
        
    	map.getCanvas().style.cursor = 'pointer';
    });
    
    // Change it back to a pointer when it leaves.
    	map.on('mouseleave', 'circle', () => {
        
    	map.getCanvas().style.cursor = '';
    });

![在这里插入图片描述][af1422848e4d4aaaade380c0c030e31a.gif]

#### 3、量测距离 ####

单击地图上的点来创建线，使用turf测量线的长度距离。  
这里我们使用到turfjs库，安装并引入turf。

npm安装

npm install @turf/turf

页面中引入：

import * as turf from '@turf/turf'

页面中添加一个容器：

核心代码：

效果：  
![在这里插入图片描述][13c0e2f5f92944939ff3c359cc57ee72.gif]

#### 4、量测area面积和中心点坐标 ####

在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。

操作步骤：

*  单击地图开始绘制多边形。
 *  绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。
 *  要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。

该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。

代码如下：

创建一个div元素：

实例化mapboxdraw：

效果展示：  
![在这里插入图片描述][2d06b783f07f41218325a7db53511939.gif]

[af1422848e4d4aaaade380c0c030e31a.gif]: https://img-blog.csdnimg.cn/af1422848e4d4aaaade380c0c030e31a.gif
[13c0e2f5f92944939ff3c359cc57ee72.gif]: https://img-blog.csdnimg.cn/13c0e2f5f92944939ff3c359cc57ee72.gif
[2d06b783f07f41218325a7db53511939.gif]: https://img-blog.csdnimg.cn/2d06b783f07f41218325a7db53511939.gif