diff --git a/public/assets/cgfx.png b/public/assets/cgfx.png index f27dd34..1399db1 100644 Binary files a/public/assets/cgfx.png and b/public/assets/cgfx.png differ diff --git a/public/assets/ddjg.png b/public/assets/ddjg.png new file mode 100644 index 0000000..aa724b7 Binary files /dev/null and b/public/assets/ddjg.png differ diff --git a/public/assets/yyzl.png b/public/assets/yyzl.png new file mode 100644 index 0000000..ab38384 Binary files /dev/null and b/public/assets/yyzl.png differ diff --git a/public/data3/line2.geojson b/public/data3/line2.geojson new file mode 100644 index 0000000..49b7fb1 --- /dev/null +++ b/public/data3/line2.geojson @@ -0,0 +1,8 @@ +{"type":"FeatureCollection", +"features":[{"type":"Feature", +"id":2, +"bbox":[114.88191247,31.16683581,114.88643309,31.16825998], +"properties":{"gid":2,"geometry":"LineString"}, +"geometry":{ + "type":"LineString", + "coordinates":[[114.878250,31.169557],[114.879593,31.169511],[114.880543,31.169543],[114.881345,31.170357]]}}]} \ No newline at end of file diff --git a/src/views/Home/InfoDlg/XcxqDlg/TrackMap.js b/src/views/Home/InfoDlg/XcxqDlg/TrackMap.js new file mode 100644 index 0000000..74e3293 --- /dev/null +++ b/src/views/Home/InfoDlg/XcxqDlg/TrackMap.js @@ -0,0 +1,120 @@ +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
; +}; + +export default TrackMap; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/XcxqDlg/index.js b/src/views/Home/InfoDlg/XcxqDlg/index.js index 0cf6adb..0dd2078 100644 --- a/src/views/Home/InfoDlg/XcxqDlg/index.js +++ b/src/views/Home/InfoDlg/XcxqDlg/index.js @@ -8,6 +8,7 @@ import DpAppBar from '../../../../layouts/mui/DpAppBar'; import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; import TaskInspectionDetail from './TaskInspectionDetail' +import TrackMap from './TrackMap' function HDStDlg({ record, onClose }) { const [value, setValue] = React.useState(0); @@ -21,7 +22,7 @@ function HDStDlg({ record, onClose }) { BackdropComponent={DpBackgroundDrop} >
- + setValue(v)}> @@ -30,7 +31,13 @@ function HDStDlg({ record, onClose }) {
{/* */} - +
+
+ +
+ {/*
*/} + {/* */} +
diff --git a/src/views/Home/components/Title/index.js b/src/views/Home/components/Title/index.js index d376a04..06fb844 100644 --- a/src/views/Home/components/Title/index.js +++ b/src/views/Home/components/Title/index.js @@ -168,7 +168,15 @@ export default function Title() { <>
{ dispatch.map.setView(item.key) - if(item.key===200){ + const map = window.__mapref; + if (map) { + const layer = map.getLayer('临时线') + if (layer) { + map.removeLayer('临时线'); + map.removeSource('临时线'); + } + } + if (item.key === 200) { const center = JSON.parse(sessionStorage.getItem('lastCenter')) if(center){ dispatch.runtime.setCameraTarget({ diff --git a/src/views/Home/panels/Diaodujg/index.js b/src/views/Home/panels/Diaodujg/index.js index ff21a69..cbd08fe 100644 --- a/src/views/Home/panels/Diaodujg/index.js +++ b/src/views/Home/panels/Diaodujg/index.js @@ -143,8 +143,8 @@ function HDReal({ style }) {
{ - renderChart &&
- + renderChart &&
+
} diff --git a/src/views/Home/panels/Xczl/index.js b/src/views/Home/panels/Xczl/index.js index 7a49d5f..8f63c01 100644 --- a/src/views/Home/panels/Xczl/index.js +++ b/src/views/Home/panels/Xczl/index.js @@ -85,11 +85,45 @@ function DrpReal({ style }) { const flyTo = () => { dispatch?.runtime.setInfoDlg({ layerId: 'XunchachaoshiLayer', properties: {} }) } + const setSkLayer1 = ()=>{ + const map = window.__mapref; + const layer = map.getLayer('临时线') + if(layer){ + map.removeLayer('临时线'); + map.removeSource('临时线'); + } + map.addLayer({ + 'id': '临时线', + 'type': 'line', + 'source': { + 'type': 'geojson', + 'data': `${window.location.origin}/data3/line2.geojson` + }, + 'layout': { + 'line-join': 'round' + }, + 'paint': { + 'line-color': 'red', + 'line-width': 10 + // [ + // 'case', + // ['==', ['get', 'LEVEL'], 1], 2.2, + // ['==', ['get', 'LEVEL'], 2], 2.2, + // ['==', ['get', 'LEVEL'], 3], 2.2, + // ['==', ['get', 'LEVEL'], 4], 1.6, + // ['==', ['get', 'LEVEL'], 5], 1.3, + // 10 + // ] + }, + 'visibility': 'visible', + }); + } const jumpTo = (record) => { const { lgtd, lttd } = record; const lgtdNum = Number(lgtd); const lttdNum = Number(lttd) if (record.code == 1) { + setSkLayer1() if (lgtdNum && lttdNum) { dispatch.runtime.setCameraTarget({ center: [lgtdNum, lttdNum], diff --git a/src/views/Home/panels/Yuanyfa/index.js b/src/views/Home/panels/Yuanyfa/index.js index 90f4e44..8f87854 100644 --- a/src/views/Home/panels/Yuanyfa/index.js +++ b/src/views/Home/panels/Yuanyfa/index.js @@ -155,8 +155,8 @@ export default function Warn({ style }) { {res.yy && -
- +
+ {/*
最大淹没范围
@@ -170,7 +170,7 @@ export default function Warn({ style }) {
*/}
} -
+