diff --git a/src/models/map/index.js b/src/models/map/index.js index 66846e8..d33fbf5 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -373,7 +373,7 @@ const map = { layerVisible = { RealDrpLayer: false, RealHDLayer: false, - RealSkLayer: true, + RealSkLayer: false, BxSkLayer: false, FzdxLayer: false, WataLayer: false, diff --git a/src/views/Home/panels/Glzd/index.js b/src/views/Home/panels/Glzd/index.js index 4f4b5bb..cf2d89c 100644 --- a/src/views/Home/panels/Glzd/index.js +++ b/src/views/Home/panels/Glzd/index.js @@ -14,6 +14,16 @@ import DpTableRow from '../../../../layouts/mui/DpTableRow'; import clsx from 'clsx'; import { renderDrp } from '../../../../utils/renutils'; +const DRP_COLORS = [ + '#ffffff', + 'rgb(122, 232, 122)', + 'rgb(227, 255, 83)', + 'rgb(255, 140, 83)', + 'rgb(255, 0, 0)', + 'rgb(232, 122, 219)', + 'rgb(136, 11, 29)', +] + const data1 = [ { "stcd": "61612150", @@ -867,21 +877,40 @@ function DrpReal({ style }) { useEffect(()=>{ getDrp(skObj) getHd(skObj) + + return ()=>{ + const map = window.__mapref; + const layer = map.getLayer('关联站点') + if(layer){ + map.removeLayer('关联站点'); + map.removeSource('关联站点'); + } + } },[skObj]) useEffect(()=>{ const map = window.__mapref; - - - if(map){ - if(tab==='1'&&drpData?.length>0){ + if(tab==='1'&&drpData){ setLayer(drpData,'drp') } + if(tab==='2'&&hdData){ + setLayer(hdData,'hd') + } + }else{ + const dsq = setInterval(() => { + const map = window.__mapref; + if(map && drpData.length>0){ + clearInterval(dsq) + setLayer(drpData,'drp') + } + }, 500); } },[drpData,hdData,skObj,tab]) + + const getDrp = async(skObj)=>{ const { lgtd, lttd } = skObj const step = 0.05 @@ -929,14 +958,74 @@ function DrpReal({ style }) { } const setLayer = (data=[],type)=>{ - if(data.length===0){return} const map = window.__mapref; const layer = map.getLayer('关联站点') if(layer){ map.removeLayer('关联站点'); map.removeSource('关联站点'); } - map.addLayer({ + if(data.length===0){return} + if(type==='drp'){ + map.addLayer({ + 'id': '关联站点',//+new Date().getTime(), + 'type': 'circle', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'paint': { + 'circle-color': [ + 'case', + ['==', ['get', 'state'], 1], [ + 'interpolate-hcl', + ['linear'], + ['get', 'h1'], + 0, DRP_COLORS[0], + 10, DRP_COLORS[1], + 25, DRP_COLORS[2], + 50, DRP_COLORS[3], + 100, DRP_COLORS[4], + 250, DRP_COLORS[5], + 500, DRP_COLORS[6], + ], + '#aaa' + ], + 'circle-opacity': [ + 'case', + ['==', ['get', 'state'], 1], 1, + 0.6 + ], + 'circle-stroke-width': [ + 'step', + ['zoom'], + 0, + 12, 2, + 14, 3 + ], + 'circle-stroke-color': [ + 'match', + ['get', 'type'], + 'sh', '#91eda1', + 'sw', '#f8ec82', + 'qx', '#e091ed', + '#fff' + ], + 'circle-radius': [ + 'interpolate', + ['linear'], + ['zoom'], + 10, 6, + 14, 10, + ] + }, + 'visibility': 'visible', + }); + } + if(type==='hd'){ + map.addLayer({ 'id': '关联站点',//+new Date().getTime(), 'type': 'symbol', 'source': { @@ -947,35 +1036,36 @@ function DrpReal({ style }) { }, }, 'layout': { - // 'icon-allow-overlap': true, - // 'text-allow-overlap': true, - 'icon-image': '水库-离线', // 从properties中动态读取icon字段 - 'icon-size': [ - 'interpolate', ['linear'], ['zoom'], - 10, 0.6, - 14, 0.6, - ], - 'text-size': [ + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '水位站', + 'icon-size': [ 'interpolate', ['linear'], ['zoom'], - 5, 10, - 14, 14, - ], - 'text-font': ['Roboto Black'], - 'text-field': [ - 'step', - ['zoom'], - '', - 8, ['get', 'stnm'] - ], - 'text-anchor': 'top', - 'text-offset': [0, 1], - }, + 10, 0.5, + 14, 1, + ], + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 16, + ], + }, 'paint': { - 'text-color': '#fff' + 'text-color': [ + 'case', + ['!=', ['get', 'state'], 1], '#888', + ['==', ['get', 'warning'], 3], '#f00', + ['==', ['get', 'warning'], 2], 'yellow', + ['==', ['get', 'warning'], 1], 'yellow', + '#0f0' + ], + 'text-halo-color': '#062040', + 'text-halo-width': 1 }, 'visibility': 'visible', - }); - map.getSource('sk1111').setData(parseGeoJSON(data)) + }); + } + map.getSource('关联站点').setData(parseGeoJSON(data)) } @@ -1025,6 +1115,7 @@ function DrpReal({ style }) {
{ const { lgtd, lttd } = row; if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, @@ -1059,6 +1150,7 @@ function DrpReal({ style }) {
{ const { lgtd, lttd } = row; if (lgtd && lttd) { + dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, diff --git a/src/views/Home/panels/Hsfy/index.js b/src/views/Home/panels/Hsfy/index.js index 25b4b2e..c41859e 100644 --- a/src/views/Home/panels/Hsfy/index.js +++ b/src/views/Home/panels/Hsfy/index.js @@ -12,6 +12,7 @@ import DpTableCell from '../../../../layouts/mui/DpTableCell'; import DpTableRow from '../../../../layouts/mui/DpTableRow'; import clsx from 'clsx'; import { adnmExact, adnmZhen } from '../../../../models/_/adcd'; +import { geometryBound, geometryCenter } from '../../../../utils/tools' const data1 = [ @@ -1273,10 +1274,6 @@ function DrpReal({ style }) { const [azdData,setAzdData] = useState([]) const [qsydwData,setQsydwData] = useState([]) const [yhjmhData,setYhjmhData] = useState([]) - - - - const dispatch = useDispatch(); const skObj = useSelector(s => s.runtime.skObj); useEffect(()=>{ @@ -1365,15 +1362,31 @@ function DrpReal({ style }) { tabs={ { + dispatch.map.setLayerVisible({Dcpj_danadLayer:true}); + dispatch.map.setLayerVisible({Dcpj_placementLayer:false}); + dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false}); + dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false}); setTab('1') }}>危险区 { + dispatch.map.setLayerVisible({Dcpj_danadLayer:false}); + dispatch.map.setLayerVisible({Dcpj_placementLayer:true}); + dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false}); + dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false}); setTab('2') }}>安置点 { + dispatch.map.setLayerVisible({Dcpj_danadLayer:false}); + dispatch.map.setLayerVisible({Dcpj_placementLayer:false}); + dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:true}); + dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:false}); setTab('3') }}>企事业单位 { + dispatch.map.setLayerVisible({Dcpj_danadLayer:false}); + dispatch.map.setLayerVisible({Dcpj_placementLayer:false}); + dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:false}); + dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:true}); setTab('4') }}>沿河居民户 @@ -1397,14 +1410,20 @@ function DrpReal({ style }) { {/* {index+1} */}
{ - const { res_lon:lgtd, res_lat:lttd } = row; - if (lgtd && lttd) { - dispatch.runtime.setCameraTarget({ - center: [lgtd, lttd], - zoom: 15, - pitch: 60, - bearing: 0 - }); + const { geometry } = row; + if (geometry) { + const bbox = geometryBound(geometry); + const center = geometryCenter(geometry); + if (bbox && center) { + dispatch.map.setLayerVisible({Dcpj_danadLayer:true}); + dispatch.runtime.setFeaturePop({ type: 'danad', properties: row, coordinates: center }); + dispatch.runtime.setCameraTarget({ + bounds: [[bbox[0], bbox[1]], [bbox[2], bbox[3]]], + zoom: 15, + pitch: 60, + bearing: 0 + }); + } } }}>{row.NAME}
 @@ -1432,6 +1451,8 @@ function DrpReal({ style }) {
{ const { lgtd, lttd } = row; if (lgtd && lttd) { + dispatch.map.setLayerVisible({Dcpj_placementLayer:true}); + dispatch.runtime.setFeaturePop({ type: 'placement', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, @@ -1465,6 +1486,8 @@ function DrpReal({ style }) {
{ const { lgtd, lttd } = row; if (lgtd && lttd) { + dispatch.map.setLayerVisible({Dcpj_bsnssinfoLayer:true}); + dispatch.runtime.setFeaturePop({ type: 'bsnssinfo', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, @@ -1498,6 +1521,8 @@ function DrpReal({ style }) {
{ const { lgtd, lttd } = row; if (lgtd && lttd) { + dispatch.map.setLayerVisible({Dcpj_flrvvlgLayer:true}); + dispatch.runtime.setFeaturePop({ type: 'flrvvlg', properties: row, coordinates: [row.lgtd, row.lttd] }); dispatch.runtime.setCameraTarget({ center: [lgtd, lttd], zoom: 15, diff --git a/src/views/Home/panels/Sklb/index.js b/src/views/Home/panels/Sklb/index.js index b1fd486..5ff0c24 100644 --- a/src/views/Home/panels/Sklb/index.js +++ b/src/views/Home/panels/Sklb/index.js @@ -11612,13 +11612,13 @@ function SkReal({ style }) { const dispatch = useDispatch(); const setSkLayer = (data=[])=>{ - if(data.length===0){return} const map = window.__mapref; const layer = map.getLayer('sk1111') if(layer){ map.removeLayer('sk1111'); map.removeSource('sk1111'); } + if(data.length===0){return} map.addLayer({ 'id': 'sk1111',//+new Date().getTime(), 'type': 'symbol', @@ -11661,13 +11661,13 @@ function SkReal({ style }) { map.getSource('sk1111').setData(parseGeoJSON(data)) } const setSkLayer2 = (data=[])=>{ - if(data.length===0){return} const map = window.__mapref; const layer = map.getLayer('sk2222') if(layer){ map.removeLayer('sk2222'); map.removeSource('sk2222'); } + if(data.length===0){return} map.addLayer({ 'id': 'sk2222',//+new Date().getTime(), 'type': 'symbol', @@ -11756,6 +11756,20 @@ function SkReal({ style }) { setSkLayer2([data1[0]]) } }, 500); + + return ()=>{ + const map = window.__mapref; + const layer = map.getLayer('sk1111') + if(layer){ + map.removeLayer('sk1111'); + map.removeSource('sk1111'); + } + const layer2 = map.getLayer('sk2222') + if(layer2){ + map.removeLayer('sk2222'); + map.removeSource('sk2222'); + } + } },[]) return (