120 lines
3.5 KiB
JavaScript
120 lines
3.5 KiB
JavaScript
|
import React, { useEffect, useRef } from 'react';
|
||
|
|
import mapboxgl from 'mapbox-gl';
|
||
|
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
||
|
|
import config from '../../../../config';
|
||
|
|
import LayerMgr from '../../MapCtrl/mapstyle/layermgr';
|
||
|
|
import { getLayerVisible, getLayerSetting, getCameraTarget } from '../../../../models/map/selectors';
|
||
|
|
import { useDispatch, useSelector } from 'react-redux';
|
||
|
|
// 设置你的 Mapbox 访问令牌
|
||
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoiaW5ob25vb3IiLCJhIjoiQzgzSmFadyJ9.jQDKFw6z_HrtBzu8hY415g';
|
||
|
|
|
||
|
|
const TrackMap = ({ trackData }) => {
|
||
|
|
const mapContainer = useRef(null);
|
||
|
|
const map = useRef(null);
|
||
|
|
const layermgrRef = useRef(new LayerMgr());
|
||
|
|
const layerSetting = useSelector(getLayerSetting);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!mapContainer.current) return;
|
||
|
|
layermgrRef.current.init(layerSetting);
|
||
|
|
// 初始化地图
|
||
|
|
map.current = new mapboxgl.Map({
|
||
|
|
container: mapContainer.current,
|
||
|
|
style: layermgrRef.current.getMapStyle(), // 使用暗色主题
|
||
|
|
center: [114.88069, 31.171967], // 以轨迹起点为中心
|
||
|
|
minZoom: 5,
|
||
|
|
maxZoom: 18,
|
||
|
|
pitch: config.homePitch,
|
||
|
|
bounds: config.initalExtent,
|
||
|
|
maxBounds: config.w_extent_mb,
|
||
|
|
preserveDrawingBuffer: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
map.current.on('load', () => {
|
||
|
|
if (!map.current) return;
|
||
|
|
|
||
|
|
// // 添加轨迹数据源
|
||
|
|
// map.current.addSource('track', {
|
||
|
|
// type: 'geojson',
|
||
|
|
// data: {
|
||
|
|
// type: 'Feature',
|
||
|
|
// properties: {},
|
||
|
|
// geometry: {
|
||
|
|
// type: 'LineString',
|
||
|
|
// coordinates: trackData.coordinates
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
// // 添加轨迹线图层
|
||
|
|
// map.current.addLayer({
|
||
|
|
// id: 'track-line',
|
||
|
|
// type: 'line',
|
||
|
|
// source: 'track',
|
||
|
|
// layout: {
|
||
|
|
// 'line-join': 'round',
|
||
|
|
// 'line-cap': 'round'
|
||
|
|
// },
|
||
|
|
// paint: {
|
||
|
|
// 'line-color': '#1890ff',
|
||
|
|
// 'line-width': 3,
|
||
|
|
// 'line-opacity': 0.8
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 添加起点标记
|
||
|
|
// new mapboxgl.Marker({ color: '#00ff00' })
|
||
|
|
// .setLngLat(trackData.coordinates[0])
|
||
|
|
// .setPopup(new mapboxgl.Popup().setHTML('起点'))
|
||
|
|
// .addTo(map.current);
|
||
|
|
|
||
|
|
// // 添加终点标记
|
||
|
|
// new mapboxgl.Marker({ color: '#ff0000' })
|
||
|
|
// .setLngLat(trackData.coordinates[trackData.coordinates.length - 1])
|
||
|
|
// .setPopup(new mapboxgl.Popup().setHTML('终点'))
|
||
|
|
// .addTo(map.current);
|
||
|
|
|
||
|
|
// 添加轨迹点图层
|
||
|
|
// map.current.addLayer({
|
||
|
|
// id: 'track-points',
|
||
|
|
// type: 'circle',
|
||
|
|
// source: 'track',
|
||
|
|
// paint: {
|
||
|
|
// 'circle-radius': 4,
|
||
|
|
// 'circle-color': '#ffffff',
|
||
|
|
// 'circle-stroke-width': 1,
|
||
|
|
// 'circle-stroke-color': '#1890ff'
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
|
||
|
|
// // 添加动画效果
|
||
|
|
// let animationStep = 0;
|
||
|
|
// const animateTrack = () => {
|
||
|
|
// if (!map.current) return;
|
||
|
|
|
||
|
|
// // 更新轨迹线的渐变动画
|
||
|
|
// map.current.setPaintProperty('track-line', 'line-gradient', [
|
||
|
|
// 'step',
|
||
|
|
// ['line-progress'],
|
||
|
|
// '#1890ff',
|
||
|
|
// animationStep,
|
||
|
|
// '#ffffff'
|
||
|
|
// ]);
|
||
|
|
|
||
|
|
// animationStep = (animationStep + 0.001) % 1;
|
||
|
|
// requestAnimationFrame(animateTrack);
|
||
|
|
// };
|
||
|
|
|
||
|
|
// animateTrack();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 清理函数
|
||
|
|
return () => {
|
||
|
|
map.current?.remove();
|
||
|
|
};
|
||
|
|
}, [[]]);
|
||
|
|
|
||
|
|
return <div ref={mapContainer} style={{width:500}} />;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TrackMap;
|