要在 React.js 和
Mapbox 地图上实现测距功能，可以使用
Mapbox GL JS 库结合 Turf.js 库来实现。
首先，确保你已经在 React 项目中安装了
mapbox-gl 和 turf 库：
```shell
npm install
mapbox-gl turf
```
然后，在你的 React 组件中引入所需的库：
```javascript
import React, { useRef, useEffect } from 'react';
import
mapboxgl from '
mapbox-gl';
import * as turf from '@turf/turf';
```
接下来，在你的组件函数中创建地图容器和引用：
```javascript
const MapComponent = () => {
const mapContainerRef = useRef(null);
useEffect(() => {
// 初始化地图
mapboxgl.accessToken = 'YOUR_
MAPBOX_ACCESS_TOKEN';
const map = new
mapboxgl.Map({
container: mapContainerRef.current,
style: '
mapbox://styles/
mapbox/streets-v11',
center: [lng, lat], // 设置地图初始中心点经纬度
zoom: 10, // 设置初始缩放级别
});
// 添加地图控件
map.addControl(new
mapboxgl.NavigationControl());
// 添加测距功能
let lineString = turf.lineString([]);
let distance = 0;
let measureStartPoint = null;
map.on('click', (e) => {
if (!measureStartPoint) {
measureStartPoint = e.lngLat;
} else {
const endPoint = e.lngLat;
distance += turf.distance(measureStartPoint, endPoint);
lineString.geometry.coordinates.push([
measureStartPoint.lng,
measureStartPoint.lat,
]);
lineString.geometry.coordinates.push([endPoint.lng, endPoint.lat]);
map.getSource('measure-line').setData(lineString);
measureStartPoint = null;
}
});
map.on('load', () => {
// 添加测距线
map.addSource('measure-line', {
type: 'geojson',
data: {
type: 'Feature',
geometry: lineString.geometry,
},
});
map.add
Layer({
id: 'measure-line',
type: 'line',
source: 'measure-line',
paint: {
'line-color': '#0080ff',
'line-width': 2,
},
});
});
return () => map.remove(); // 清除地图实例
}, []);
return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
};
```
请注意，上述代码中需要替换 `YOUR_
MAPBOX_ACCESS_TOKEN` 为你自己的
Mapbox 访问令牌。
以上代码创建了一个地图容器和引用，并在组件加载时初始化地图。通过点击地图，你可以在不同位置之间绘制线段并计算总距离。测距线的样式可以根据需要进行自定义。
希望这可以帮助你在 React.js 和
Mapbox 地图上实现测距功能！
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
