Vue3中配置turf.js

在Vue3中使用turf.js，可以使用以下步骤： 1. 安装turf.js 在Vue项目的根目录下执行以下命令： ``` npm install turf ``` 2. 在Vue组件中引入turf.js 在Vue组件中，可以通过以下方式引入turf.js: ```javascript import * as turf from '@turf/turf' ``` 3. 使用turf.js 在Vue组件中，可以使用turf.js提供的各种地理空间计算函数。例如： ```javascript // 计算两点之间的距离 const point1 = turf.point([-122.4194, 37.7749]); const point2 = turf.point([-121.8863, 37.3382]); const distance = turf.distance(point1, point2); console.log(distance); ``` 以上就是在Vue3中使用turf.js的基本步骤。需要注意的是，turf.js中的函数使用的是GeoJSON格式的数据，因此在使用时需要将地理空间信息转换为GeoJSON格式的数据。

### Vue3 中 Mapbox GL Marker 连接线路前后站点的实现方法 要在 Vue3 和 Mapbox GL JS 的环境中实现 `mapboxgl.Marker` 与线路上最近的前后站点连接功能，可以按照以下方式设计逻辑： #### 数据准备 首先需要准备好两个主要的数据结构： 1. **线路数据**：通常是一个 GeoJSON LineString 或 MultiLineString 类型的对象。 2. **站点数据**：通常是 GeoJSON Point 或 FeatureCollection 类型的对象。 这些数据可以通过 API 获取或者静态配置。以下是示例代码中的假设数据模型[^4]。 ```javascript const lineData = { type: "Feature", geometry: { type: "LineString", coordinates: [ [113.34, 23.14], [113.35, 23.15], [113.36, 23.16] ] } }; const stationData = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [113.345, 23.145] } }, { type: "Feature", geometry: { type: "Point", coordinates: [113.355, 23.155] } } ] }; ``` #### 主要逻辑 通过计算每个站点到线路的距离以及其在线路上的投影位置来找到前后的站点，并绘制连线。 ##### 计算投影点 利用 Turf.js 库或其他几何工具库可以帮助我们完成复杂的几何运算，比如寻找某个点在线条上的投影点坐标[^1]。 安装 Turf.js： ```bash npm install @turf/turf ``` 引入并使用 Turf.js 来获取投影点： ```javascript import * as turf from '@turf/turf'; function findNearestPointsOnLine(stationCoord, lineCoords) { const point = turf.point(stationCoord); const line = turf.lineString(lineCoords); // 使用 nearestPointOnLine 方法查找最接近的点 const nearestPoint = turf.nearestPointOnLine(line, point); return nearestPoint.geometry.coordinates; } ``` ##### 添加标记和连线 当用户点击某个站点时，在地图上动态创建一个新的 marker 并将其与其他相关联的站点相连形成线条。 更新组件内的方法部分如下所示： ```javascript methods: { addStationConnections(stationIndex) { const selectedStation = this.stationData.features[stationIndex]; // 找到选中站点的位置及其对应的投影点 const projectionPoint = findNearestPointsOnLine( selectedStation.geometry.coordinates, this.lineData.geometry.coordinates ); // 创建新的marker实例表示当前被点击的站点 new mapboxgl.Marker() .setLngLat(selectedStation.geometry.coordinates) .addTo(this.mapInst); // 查找离此站点最近的一组前后节点（这里简化处理） let prevStation = null; let nextStation = null; if (stationIndex > 0) { prevStation = this.stationData.features[stationIndex - 1].geometry.coordinates; } if (stationIndex < this.stationData.features.length - 1) { nextStation = this.stationData.features[stationIndex + 1].geometry.coordinates; } // 如果存在，则分别添加两条线段至地图 if (prevStation && Array.isArray(prevStation)) { drawConnection([selectedStation.geometry.coordinates, prevStation]); } if (nextStation && Array.isArray(nextStation)) { drawConnection([selectedStation.geometry.coordinates, nextStation]); } function drawConnection(coordsArray) { this.mapInst.addLayer({ id: 'connection-line', type: 'line', source: { type: 'geojson', data: { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: coordsArray } } }, layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#ff0000', 'line-width': 2 } }); }.bind(this); // bind context to vue instance }, loadStations() { this.stationData.features.forEach((_, index) => { this.currentMarkers.push(new mapboxgl.Marker() .setLngLat(_.geometry.coordinates) .addTo(this.mapInst)); // Add event listener on each marker for click interaction. this.currentMarkers[index]._element.addEventListener('click', () => { this.addStationConnections(index); }); }); } }, ``` 以上代码片段实现了基于用户的交互行为自动构建从选定站点出发向相邻两站点延伸的红色路径效果[^2]。 #### 注意事项 - 确保所有依赖项已正确导入。 - 对于复杂场景可能还需要考虑性能优化问题，例如减少重复渲染操作次数等。 ---