1

public/config/app.json

@@ -15,7 +15,71 @@
   layers: {
     cdzy: {
       // 草地资源
-      layerName: 'yzt:t_grassland_result'
+      layerName: 'yzt:t_grassland_result',
+      legends: [
+        {
+          name: '高寒草甸类',
+          fillColor: '#0DFBFE',
+          strokeColor: '#0DFBFE'
+        },
+        {
+          name: '低地草甸类',
+          fillColor: '#0EFE63',
+          strokeColor: '#0EFE63'
+        },
+        {
+          name: '山地草甸类',
+          fillColor: '#FEEA09',
+          strokeColor: '#FEEA09'
+        }
+      ]
+    },
+    cdth: {
+      // 草地退化
+      layerName: 'yzt:t_grassland_result_degradation_level',
+      legends: [
+        {
+          name: '未退化',
+          fillColor: '#35DF95',
+          strokeColor: '#35DF95'
+        },
+        {
+          name: '轻度退化',
+          fillColor: '#27DDFA',
+          strokeColor: '#27DDFA'
+        },
+        {
+          name: '中度退化',
+          fillColor: '#FFB12A',
+          strokeColor: '#FFB12A'
+        },
+        {
+          name: '重度退化',
+          fillColor: '#EF2B67',
+          strokeColor: '#EF2B67'
+        }
+      ]
+    },
+
+    stxfgc: {
+      // 生态修复工程
+      layerName: 'yzt:stxfgc'
+    },
+    cdzzy: {
+      // 草地征占用
+      layerName: 'yzt:cdzzy_view',
+      legends: [
+        {
+          name: '临时占用',
+          fillColor: '#00ADFF',
+          strokeColor: '#00ADFF'
+        },
+        {
+          name: '永久占用',
+          fillColor: '#FFB12A',
+          strokeColor: '#FFB12A'
+        }
+      ]
     }
   }
 }

src/components/Main/Content/index.js

@@ -121,6 +121,7 @@ export default function Content(props) {
                             }}>{item.name}</div>
                         </Checkbox>
                         <Button onClick={e => {
+                            props?.onLayerChange?.(item.key);
                             setCurrent(item.key);
                             setFilterVisible(true)
                         }} style={{

src/components/Main/Map/BusinessLayer/index.js

@@ -3,12 +3,14 @@ import { MapContext } from '../MapContext';
 import GlobalContext from '../../../../utils/GlobalContext';
 import { addGeoserverLayer } from '../utils/helper';
 import _ from 'lodash';
+import { Checkbox } from 'antd';
+import './index.less';
 const cacheLayers = [];
 export default function BusinessLayer(props) {
 
     const { layerKey, viewer, filterStr } = useContext(MapContext);
     const { layers, initExtent } = useContext(GlobalContext);
-
+    const [currentLegends, setCurrentLegends] = useState([]);
     // useEffect(() => {
     //     if (viewer) {
     //         cacheLayers.forEach(layer => {
@@ -36,27 +38,96 @@ export default function BusinessLayer(props) {
     // }, [layerKey, layers, viewer, initExtent])
 
     useEffect(() => {
-        if (viewer && layerKey) {
+        if (viewer) {
-            const layerOpt = layers[layerKey];
+            cacheLayers.forEach(layer => {
-            const cacheLayer = cacheLayers.find(l => l.key === layerKey);
+                viewer.imageryLayers.remove(layer.layerInstance);
-            if (cacheLayer) {
+            });
-                viewer.imageryLayers.remove(cacheLayer.layerInstance);
+
-                _.remove(cacheLayers, item => item.key === layerKey);
+            setCurrentLegends([])
-            }
+            if (layerKey) {
-            cacheLayers.push({
+                const layerOpt = layers[layerKey];
-                key: layerKey,
+                const cacheLayer = cacheLayers.find(l => l.key === layerKey);
-                layerInstance: addGeoserverLayer({
+                if (!layerOpt) {
-                    layerName: layerOpt.layerName,
+                    return;
-                    extent: initExtent,
+                }
-                    viewer,
+                if (layerOpt?.legends) {
-                    isWms: true,
+                    setCurrentLegends(layerOpt?.legends)
-                    cql_filter: filterStr || '1=1'
+                }
+                if (cacheLayer) {
+                    _.remove(cacheLayers, item => item.key === layerKey);
+                }
+                cacheLayers.push({
+                    key: layerKey,
+                    layerInstance: addGeoserverLayer({
+                        layerName: layerOpt.layerName,
+                        extent: initExtent,
+                        viewer,
+                        isWms: true,
+                        cql_filter: filterStr || '1=1'
+                    })
                 })
-            })
+            }
         }
     }, [layerKey, filterStr, viewer, layers, initExtent])
 
-    return <>
+    return <div className='business-layer' >
-
+        {currentLegends?.length > 0 && <div className='legend-content' style={{
-    </>;
+            marginTop: 12,
+            padding: 0,
+            width: 'auto',
+            right: 500,
+            position: 'absolute',
+            bottom: 20
+        }}>
+            <div style={{
+                textAlign: "center",
+                padding: 5,
+                background: "#0D1923"
+            }}>图例</div>
+            <div className='layout-v' style={{
+                // marginTop: 8,
+                padding: "8px 24px"
+            }}>
+                {currentLegends?.map(legend => {
+                    let node = <div className='layout-h center layer-item'>
+                        <div className='layout-v center j-center' style={{
+                            width: 24,
+                        }}>
+                            <div className='circle-legend' style={{
+                                background: legend.fillColor,
+                                border: "1px solid " + legend.strokeColor
+                            }}></div>
+                        </div>
+                        <div>{legend.name}</div>
+                    </div>;
+                    if (legend.image) {
+                        node = <div className='layout-h center layer-item'>
+                            <div className='layout-v center j-center' style={{
+                                width: 24,
+                            }}>
+                                <img src={legend.image.src} alt="" style={{
+                                    width: 16
+                                }} />
+                            </div>
+                            <div>{legend.name}</div>
+                        </div>;
+                    }
+                    return <div key={legend.name} className='layout-h center' style={{
+                        fontSize: 12,
+                        // fontStyle: "italic",
+                        // marginLeft: 25,
+                        color: "#ffffff"
+                    }}>
+                        <div className='rect-legend' style={{
+                            background: legend.fillColor,
+                            border: `1px solid ${legend.strokeColor}`
+                        }}></div>
+                        <div style={{
+                            marginLeft: 8
+                        }}>{legend.name}</div>
+                    </div>
+                })}
+            </div>
+        </div>}
+    </div>;
 }

src/components/Main/Map/BusinessLayer/index.less

@@ -0,0 +1,32 @@
+.business-layer {
+    .legend-root {
+        position: absolute;
+        left: 480px;
+        top: 80px;
+    }
+
+    .legend-content {
+        border: 1px solid #00ffff88;
+        width: 180px;
+        height: auto;
+        padding: 10px;
+        background: #041320aa;
+    }
+
+    .circle-legend {
+        border-radius: 50%;
+        width: 10px;
+        height: 10px;
+        margin-top: 2px;
+    }
+
+    .layer-item {
+        color: #fff;
+    }
+
+    .rect-legend {
+        width: 14px;
+        height: 10px;
+        margin-top: 2px;
+    }
+}

src/components/Main/components/Cdth/CdthFilter/index.js

@@ -1,4 +1,4 @@
-import { Col, Divider, Form, Radio, Row, Select } from 'antd';
+import { Button, Col, Divider, Form, Radio, Row, Select } from 'antd';
 import { useState, useEffect } from 'react'
 import ZoneSelector from '../../../../common/ZoneSelector';
 import CdzyApi from '../../../../../utils/apis/CdzyApi';
@@ -30,5 +30,25 @@ export default function CdthFilter(props) {
                 <Radio value={"重度退化"}>重度退化</Radio>
             </Radio.Group>
         </Form.Item>
+        <Form.Item style={{
+            textAlign: "right",
+            marginBottom: 0
+        }}>
+            <Button style={{
+                // background:"#0288F8"
+            }} size='large' onClick={e => {
+                const values = form.getFieldsValue();
+                const filterStr = Object.keys(values).map(key => {
+                    if (values[key] !== '-1') {
+                        if (key === 'area_code') {
+                            return `${key} like '${values[key]}%'`
+                        }
+                        return `${key} = '${values[key]}'`;
+                    }
+                    return null;
+                }).filter(v => v).join(' and ')
+                props?.onOk?.(filterStr)
+            }}>确定</Button>
+        </Form.Item>
     </Form>;
 }

src/components/Main/components/Cdzzy/CdzzyFilter/index.js

@@ -1,4 +1,4 @@
-import { Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd';
+import { Button, Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd';
 import { useState, useEffect } from 'react'
 import ZoneSelector from '../../../../common/ZoneSelector';
 import CdzyApi from '../../../../../utils/apis/CdzyApi';
@@ -28,12 +28,32 @@ export default function CdzzyFilter(props) {
             marginTop: 0,
             borderColor: "#075C88"
         }} />
-        <Form.Item label="占用类型" name="name">
+        <Form.Item label="占用类型" name="type">
             <Radio.Group>
                 <Radio value={"-1"}>全部</Radio>
-                <Radio value={"临时占用"}>临时占用</Radio>
+                <Radio value={"0"}>临时占用</Radio>
-                <Radio value={"永久占用"}>永久占用</Radio>
+                <Radio value={"1"}>永久占用</Radio>
             </Radio.Group>
         </Form.Item>
+        <Form.Item style={{
+            textAlign: "right",
+            marginBottom: 0
+        }}>
+            <Button style={{
+                // background:"#0288F8"
+            }} size='large' onClick={e => {
+                const values = form.getFieldsValue();
+                const filterStr = Object.keys(values).map(key => {
+                    if (values[key] !== '-1' && values[key]) {
+                        if (key === 'area_code') {
+                            return `${key} like '${values[key]}%'`
+                        }
+                        return `${key} = '${values[key]}'`;
+                    }
+                    return null;
+                }).filter(v => v).join(' and ')
+                props?.onOk?.(filterStr)
+            }}>确定</Button>
+        </Form.Item>
     </Form>;
 }

src/components/Main/components/Stxfgc/StxfgcFilter/index.js

@@ -1,4 +1,4 @@
-import { Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd';
+import { Button, Col, Divider, Form, Input, Radio, Row, Select, Space } from 'antd';
 import { useState, useEffect } from 'react'
 import ZoneSelector from '../../../../common/ZoneSelector';
 import CdzyApi from '../../../../../utils/apis/CdzyApi';
@@ -33,5 +33,28 @@ export default function StxfgcFilter(props) {
                 width: 250
             }} />
         </Form.Item>
+        <Form.Item style={{
+            textAlign: "right",
+            marginBottom: 0
+        }}>
+            <Button style={{
+                // background:"#0288F8"
+            }} size='large' onClick={e => {
+                const values = form.getFieldsValue();
+                const filterStr = Object.keys(values).map(key => {
+                    if (values[key] !== '-1' && values[key]) {
+                        if (key === 'area_code') {
+                            return `${key} like '${values[key]}%'`
+                        }
+                        if (key === 'name') {
+                            return `${key} like '%${values[key]}%'`
+                        }
+                        return `${key} = '${values[key]}'`;
+                    }
+                    return null;
+                }).filter(v => v).join(' and ')
+                props?.onOk?.(filterStr)
+            }}>确定</Button>
+        </Form.Item>
     </Form>;
 }

src/components/Main/index.js

@@ -65,6 +65,7 @@ export default function Main(props) {
             </div>
             <div className='fill h0'>
                 <Content onLayerChange={key => {
+                    setFilterStr('1=1')
                     setLayerKey(key)
                 }} onFilterChange={str=>{
                     setFilterStr(str)