fix(): 修改预演图表
parent
9a42c45df7
commit
bfc27021e4
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
|
|
@ -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]]}}]}
|
||||
|
|
@ -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 <div ref={mapContainer} style={{width:500}} />;
|
||||
};
|
||||
|
||||
export default TrackMap;
|
||||
|
|
@ -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}
|
||||
>
|
||||
<div className="boxhead"></div>
|
||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'80rem' }}>
|
||||
<DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden',height:'80rem' }}>
|
||||
<DpAppBar position="sticky">
|
||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||
<DpTab label="任务信息" />
|
||||
|
|
@ -30,7 +31,13 @@ function HDStDlg({ record, onClose }) {
|
|||
</DpAppBar>
|
||||
<div >
|
||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
||||
<TaskInspectionDetail />
|
||||
<div style={{display:'flex'}}>
|
||||
<div style={{flex:1}}>
|
||||
<TaskInspectionDetail />
|
||||
</div>
|
||||
{/* <div style={{width:500}}></div> */}
|
||||
{/* <TrackMap /> */}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<div className="boxfoot"></div>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,15 @@ export default function Title() {
|
|||
<>
|
||||
<div style={{padding:'1rem',color:item.key===view?'#65dbfb':'#ffffff',cursor:'pointer',margin:"0 1rem"}} onClick={()=>{
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -143,8 +143,8 @@ function HDReal({ style }) {
|
|||
<img src={`${process.env.PUBLIC_URL}/assets/cgfx.png`} alt="" style={{ width: 420}} />
|
||||
</div>
|
||||
{
|
||||
renderChart &&<div style={{position:'absolute',top:80,right:450}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/dcjg.jpg`} alt="" style={{ width: 370}} />
|
||||
renderChart &&<div style={{position:'absolute',top:130,right:450}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/ddjg.png`} alt="" style={{ width: 370}} />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -155,8 +155,8 @@ export default function Warn({ style }) {
|
|||
</RadioGroup>
|
||||
</FormControl>
|
||||
{res.yy &&
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 90, left: '-380px' }}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yjzl.jpg`} alt="" style={{ width: 370 }} />
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 130, left: '-380px' }}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/yyzl.png`} alt="" style={{ width: 370 }} />
|
||||
{/* <div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
|
||||
<div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
|
||||
<div style={{display:'flex',columnGap:10}}>
|
||||
|
|
@ -170,7 +170,7 @@ export default function Warn({ style }) {
|
|||
</div> */}
|
||||
</div>}
|
||||
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
|
||||
<div style={{ color: "#fff", position: 'absolute', top: 83, right: 600 }}>
|
||||
<WaterLevelAlert />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue