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 = '';
});
3、量测距离
单击地图上的点来创建线，使用turf测量线的长度距离。
这里我们使用到turfjs库，安装并引入turf。
npm安装
npm install @turf/turf
页面中引入：
import * as turf from '@turf/turf'
页面中添加一个容器：
<div id="distance" class="distanceContainer"></div>
核心代码：
const distanceContainer = document.getElementById('distance');
// GeoJSON object to hold our measurement features
const geojson = {
'type': 'FeatureCollection',
'features': []
};
// Used to draw a line between points
const linestring = {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': []
}
};
map.addSource('geojson', {
'type': 'geojson',
'data': geojson
});
// Add styles to the map
map.addLayer({
id: 'measure-points',
type: 'circle',
source: 'geojson',
paint: {
'circle-radius': 5,
'circle-color': '#000'
},
filter: ['in', '$type', 'Point']
});
map.addLayer({
id: 'measure-lines',
type: 'line',
source: 'geojson',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#000',
'line-width': 2.5
},
filter: ['in', '$type', 'LineString']
});
map.on('click', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['measure-points']
});
console.log(features)
// Remove the linestring from the group
// so we can redraw it based on the points collection.
if (geojson.features.length > 1) geojson.features.pop();
// Clear the distance container to populate it with a new value.
distanceContainer.innerHTML = '';
// If a feature was clicked, remove it from the map.
if (features.length) {
const id = features[0].properties.id;
geojson.features = geojson.features.filter(
(point) => point.properties.id !== id
);
} else {
const point = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [e.lngLat.lng, e.lngLat.lat]
},
'properties': {
'id': String(new Date().getTime())
}
};
geojson.features.push(point);
}
if (geojson.features.length > 1) {
linestring.geometry.coordinates = geojson.features.map(
(point) => point.geometry.coordinates
);
geojson.features.push(linestring);
// Populate the distanceContainer with total distance
const value = document.createElement('pre');
const distance = turf.length(linestring);
value.textContent = `Total distance: ${distance.toLocaleString()}km`;
distanceContainer.appendChild(value);
}
map.getSource('geojson').setData(geojson);
});
});
//获取鼠标移动位置
map.on("mousemove", (e) => {
this.screenxy = JSON.stringify(e.point);
this.lnglat = JSON.stringify(e.lngLat);
const features = map.queryRenderedFeatures(e.point, {
layers: ['measure-points']
});
// Change the cursor to a pointer when hovering over a point on the map.
// Otherwise cursor is a crosshair.
map.getCanvas().style.cursor = features.length ?
'pointer' :
'crosshair';
});
效果：
4、量测area面积和中心点坐标
在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。
操作步骤：
-
单击地图开始绘制多边形。
-
绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。
-
要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。
该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。
代码如下：
创建一个div元素：
<div id="calculated-area" style="width: 250px;height: 150px;background-color: #ffff;margin: 10px;padding: 10px;">
实例化mapboxdraw：
const draw = new MapboxDraw({
// displayControlsDefault: false,
// Select which mapbox-gl-draw control buttons to add to the map.
controls: {
polygon: true,
trash: true
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: 'draw_polygon'
});
map.addControl(draw);
map.on('draw.create', updateArea);
map.on('draw.delete', updateArea);
map.on('draw.update', updateArea);
function updateArea(e) {
const data = draw.getAll();
console.log(data)
const answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
const area = turf.area(data);
// const polygonfeatures = turf.points([data.features[0].geometry.coordinates[0]])
const centrepostion = turf.centroid(data.features[0])
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100;
answer.innerHTML = `<p>面积为：<strong>${rounded_area}</strong>square meters</p>
<br />
<p>中心点坐标：${centrepostion.geometry.coordinates}</p>`;
console.log(centrepostion)
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.');
}
}
效果展示：