Merge branch 'qzc-dev'

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,

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,
+          'icon-allow-overlap': true,
-            // 'text-allow-overlap': true,
+          'text-allow-overlap': true,
-            'icon-image': '水库-离线', // 从properties中动态读取icon字段
+          'icon-image': '水位站',
-            'icon-size': [
+          'icon-size': [
-                'interpolate', ['linear'], ['zoom'],
-                10, 0.6,
-                14, 0.6,
-              ],
-            'text-size': [
             'interpolate', ['linear'], ['zoom'],
-            5, 10,
+            10, 0.5,
-            14, 14,
+            14, 1,
-            ],
+          ],
-            'text-font': ['Roboto Black'],
+          'text-size': [
-            'text-field': [
+            'interpolate', ['linear'], ['zoom'],
-            'step',
+            10, 10,
-            ['zoom'],
+            14, 16,
-            '',
+          ],
-            8, ['get', 'stnm']
+        },
-            ],
-            'text-anchor': 'top',
-            'text-offset': [0, 1],
-          },
         '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 }) {
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
                       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 }) {
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
                       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,

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={
         <span className="button-group">
           <span className={clsx({ active: tab==='1' })} onClick={() => {
+            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')
           }}>危险区</span>
           <span className={clsx({ active: tab==='2' })} onClick={() => {
+            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')
           }}>安置点</span>
           <span className={clsx({ active: tab==='3' })} onClick={() => {
+            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')
           }}>企事业单位</span>
           <span className={clsx({ active: tab==='4' })} onClick={() => {
+            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')
           }}>沿河居民户</span>
         </span>
@@ -1397,14 +1410,20 @@ function DrpReal({ style }) {
                   {/* <DpTableCell align="center">{index+1}</DpTableCell> */}
                   <DpTableCell component="th" scope="row">
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
-                      const { res_lon:lgtd, res_lat:lttd } = row;
+                      const { geometry } = row;
-                      if (lgtd && lttd) {
+                      if (geometry) {
-                        dispatch.runtime.setCameraTarget({
+                        const bbox = geometryBound(geometry);
-                          center: [lgtd, lttd],
+                        const center = geometryCenter(geometry);
-                          zoom: 15, 
+                        if (bbox && center) {
-                          pitch: 60,
+                          dispatch.map.setLayerVisible({Dcpj_danadLayer:true});
-                          bearing: 0
+                          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}</div>
                   </DpTableCell>
@@ -1432,6 +1451,8 @@ function DrpReal({ style }) {
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
                       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 }) {
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
                       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 }) {
                     <div className="table-ellipsis cursor-pointer" onClick={() => {
                       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,

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 (