1

public/config/app.json

@@ -4,12 +4,18 @@
     maximumLevel: 21,
     url: 'https://map.shuxitech.com/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}', // 多服务器使用 {s} 语法配合 subdomains 来用
     subdomains: [0, 1, 2, 3, 4, 5, 6, 7]
-  },  
+  },
   initExtent: [
     101.86701132942844, 30.431779754918296, 103.7517428402498, 33.31724803784266
   ],
   zoneLayerOpt: {
     geoserverRoot: 'geoserver2',
     layerName: 'ne:c_area'
+  },
+  layers: {
+    cdzy: {
+      // 草地资源
+      layerName: 'yzt:t_grassland_result'
+    }
   }
 }

src/components/Main/Content/index.js

@@ -108,7 +108,9 @@ export default function Content(props) {
                         <Checkbox checked={current === item.key} onChange={e => {
                             if (current === item.key) {
                                 setCurrent(null)
+                                props?.onLayerChange?.(null);
                             } else {
+                                props?.onLayerChange?.(item.key);
                                 setCurrent(item.key);
                             }
                             setFilterVisible(false)
@@ -130,7 +132,9 @@ export default function Content(props) {
             <FilterPanel title={currentItem?.name + '筛选'} visible={filterVisible} onCancel={e => {
                 setFilterVisible(false)
             }} >
-                {Filter && <Filter />}
+                {Filter && <Filter onOk={filterStr => {
+                    props?.onFilterChange?.(filterStr)
+                }} />}
             </FilterPanel>
         </div>
         <div className='right-panel layout-v' style={{

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

@@ -0,0 +1,62 @@
+import { useState, useEffect, useContext } from 'react'
+import { MapContext } from '../MapContext';
+import GlobalContext from '../../../../utils/GlobalContext';
+import { addGeoserverLayer } from '../utils/helper';
+import _ from 'lodash';
+const cacheLayers = [];
+export default function BusinessLayer(props) {
+
+    const { layerKey, viewer, filterStr } = useContext(MapContext);
+    const { layers, initExtent } = useContext(GlobalContext);
+
+    // useEffect(() => {
+    //     if (viewer) {
+    //         cacheLayers.forEach(layer => {
+    //             layer.layerInstance.show = false;
+    //         })
+    //         if (layerKey) {
+    //             const layerOpt = layers[layerKey];
+    //             const cacheLayer = cacheLayers.find(l => l.key === layerKey);
+    //             if (cacheLayer) {
+    //                 cacheLayer.layerInstance.show = true
+    //             } else if (layerOpt) {
+    //                 cacheLayers.push({
+    //                     key: layerKey,
+    //                     layerInstance: addGeoserverLayer({
+    //                         layerName: layerOpt.layerName,
+    //                         extent: initExtent,
+    //                         viewer,
+    //                         isWms: true
+    //                     })
+    //                 })
+    //             }
+    //         }
+    //     }
+
+    // }, [layerKey, layers, viewer, initExtent])
+
+    useEffect(() => {
+        if (viewer && layerKey) {
+            const layerOpt = layers[layerKey];
+            const cacheLayer = cacheLayers.find(l => l.key === layerKey);
+            if (cacheLayer) {
+                viewer.imageryLayers.remove(cacheLayer.layerInstance);
+                _.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 <>
+
+    </>;
+}

src/components/Main/Map/index.js

@@ -3,6 +3,7 @@ import { MapContext } from './MapContext';
 import GlobalContext from '../../../utils/GlobalContext';
 import ImageLayer from './ImageLayer';
 import ZoneLayer from './ZoneLayer';
+import BusinessLayer from './BusinessLayer';
 
 const Cesium = window.Cesium;
 const turf = window.turf;
@@ -56,7 +57,7 @@ export default function Map(props) {
             viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
             // viewer.scene.skyAtmosphere.show = false
             // viewer.scene.screenSpaceCameraController.minimumZoomDistance = props.minimumZoomDistance || 1000;
-            viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000;
+            // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 50000;
 
             viewer.camera.setView({
                 // 设置相机位置
@@ -77,7 +78,9 @@ export default function Map(props) {
     }, [])
 
     return <MapContext.Provider value={{
-        viewer
+        viewer,
+        layerKey: props.layerKey,
+        filterStr: props.filterStr
     }}>
         <div id="map" style={{
             position: "absolute",
@@ -89,5 +92,6 @@ export default function Map(props) {
         }}></div>
         <ImageLayer />
         <ZoneLayer />
+        <BusinessLayer />
     </MapContext.Provider>;
 }

src/components/Main/Map/utils/helper.js

@@ -44,16 +44,16 @@ export const addPolyline = ({ features, viewer }) => {
     })
 }
 
-export const addGeoserverLayer = ({ layerName, extent, isWms, viewer, geoserverRoot = 'geoserver' }) => {
+export const addGeoserverLayer = ({ layerName, extent, isWms, viewer, geoserverRoot = 'geoserver', cql_filter = '1=1' }) => {
     let layer;
     if (isWms) {
-        let imageryProvider = new Cesium.WebMapServiceImageryProvider({
+        let imageryProvider = window.testWms = new Cesium.WebMapServiceImageryProvider({
-            url: `/${geoserverRoot}/ne/wms`,
+            url: `/${geoserverRoot}/yzt/wms`,
             layers: layerName,
             tileWidth: 256,
             tileHeight: 256,
             enablePickFeatures: false,
-            parameters: { transparent: true, format: 'image/png' },
+            parameters: { transparent: true, format: 'image/png', cql_filter },
             version: '1.1.0'
         });
 

src/components/Main/components/Cdzy/CdzyFilter/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';
@@ -88,5 +88,25 @@ export default function CdzyFilter(props) {
                 </Form.Item>
             </Col>
         </Row>
+        <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/index.js

@@ -18,6 +18,9 @@ export default function Main(props) {
     const rootRef = useRef();
     const size = useSize(rootRef)
 
+    const [layerKey, setLayerKey] = useState();
+    const [filterStr, setFilterStr] = useState();
+
     useEffect(() => {
         // let screenSize = defaultSize;
         // if (!screenSize) {
@@ -53,7 +56,7 @@ export default function Main(props) {
     }, [size]);
 
     return <div className='main relative' ref={rootRef}>
-        <Map />
+        <Map layerKey={layerKey} filterStr={filterStr} />
         {style && <div className='layout-v' style={style}>
             <div className='header layout-h' style={{
                 pointerEvents: "auto"
@@ -61,7 +64,11 @@ export default function Main(props) {
                 <Header rootRef={rootRef} />
             </div>
             <div className='fill h0'>
-                <Content />
+                <Content onLayerChange={key => {
+                    setLayerKey(key)
+                }} onFilterChange={str=>{
+                    setFilterStr(str)
+                }}/>
             </div>
         </div>}
     </div>;

src/components/common/ZoneSelector/index.js

@@ -6,9 +6,9 @@ export default function ZoneSelector(props) {
     const { value, onChange } = props;
 
     const [firstDatas, setFirstDatas] = useState([]);
-    const [firstValue, setFirstValue] = useState(null);
+    const [firstValue, setFirstValue] = useState("-1");
     const [secDatas, setSecDatas] = useState([]);
-    const [secValue, setSecValue] = useState(null);
+    const [secValue, setSecValue] = useState("-1");
 
     useEffect(() => {
         CommonApi.area().then(resp => {
@@ -29,13 +29,13 @@ export default function ZoneSelector(props) {
     return <Space>
         <Select value={firstValue} onChange={value => {
             setFirstValue(value);
-            setSecValue(null);
+            setSecValue("-1");
             onChange?.(value);
         }} style={{
             width: 150
         }} options={[{
             label: '全部',
-            value: null
+            value: "-1"
         }, ..._.uniqBy(firstDatas, 'shortCode')?.map(item => {
             return {
                 key: item.shortCode,
@@ -43,7 +43,7 @@ export default function ZoneSelector(props) {
                 value: item.shortCode
             }
         })]}></Select>
-        {firstValue !== null && <Select value={secValue} onChange={value => {
+        {firstValue !== "-1" && <Select value={secValue} onChange={value => {
             setSecValue(value);
             if (value) {
                 onChange?.(value);

src/setupProxy.js

@@ -21,4 +21,10 @@ module.exports = function (app) {
             pathRewrite: { '^/geoserver2': '/geoserver' }
         })
     )
+    app.use(
+        proxy('/geoserver', {
+            "target": "http://47.109.60.82:8080",
+            changeOrigin: true
+        })
+    )
 }