feat: 支持多区域绘制

package.json

 {
   "name": "panda-xform",
-  "version": "6.9.16",
-  "description": "6.9.16 关联表单小数点处理",
+  "version": "6.9.17",
+  "description": "6.9.17 支持多区域绘制",
   "keywords": [
     "panda-xform"
   ],

src/apis/process.js

@@ -669,6 +669,20 @@ export function GetAreaLayerTaskData(data) {
   })
 }
 
+//获取多图层区域数据
+export function GetManyLayerAreaData(data) {
+  return request({
+    headers: {
+      'Content-Type': 'application/json',
+      accept: 'text/plain',
+      'Server-Name': data?.mapServerName || localStorage.getItem('PipenetLayer') || '',
+    },
+    url: `PandaGIS/MapServer/GIS/Query/GetManyLayerAreaData`,
+    method: 'post',
+    data,
+  })
+}
+
 //
 export function GetCaseGISAreaData(data) {
   return request({

src/core/widgets/advanced/RelationForm/index.js

@@ -23,7 +23,6 @@ const getFormDataObj = (formData) => {
   return formDataObj
 }
 
-
 const RelationForm = (props) => {
 
   const userID = window?.globalConfig?.userInfo?.OID || 1

src/core/widgets/coord/AreaTask/index.js

@@ -18,6 +18,7 @@ import { isJson, isObject, getNanoid, mercatorToLngLat, getFieldInfo } from '../
 import {
   FetchAreaList,
   GetAreaLayerTaskData,
+  GetManyLayerAreaData,
   GetAccountConfigInfo,
   GetAccountPageList,
   GetCaseGISAreaData,
@@ -71,6 +72,7 @@ const AreaTask = (props) => {
   const [isGIS, setIsGIS] = useState(false)
   const [dataSource, setDataSource] = useState([])
   const [layerCount, setLayerCount] = useState([])
+  const [activeId, setActiveId] = useState('')
   const viewRef = useRef(null)
 
   const treeData = useMemo(() => {
@@ -176,14 +178,18 @@ const AreaTask = (props) => {
     return array
   }, [isGIS, fieldList, formJson, disabled, presetValue, dataSource])
 
-  const onSelect = (value, areaList) => {
+  const onCheck = (value, areaList) => {
     setSelectedKeys(value)
-    let areaPolygon = areaList.find(v => v.id === value?.[0])?.areaPolygon
-    if (areaPolygon) {
-      let geometry = geomUtils.toGeometry(JSON.parse(areaPolygon))
-      setRings({ rings: geometry.rings })
-      getGISDataCount({ rings: geometry.rings })
+    let areaPolygons = areaList.filter(v => value.includes(v.id))
+    let layers = []
+    let otherLayers = []
+    let rings = []
+    areaPolygons.forEach(v => {
+      if (v.areaPolygon) {
+        let geometry = geomUtils.toGeometry(JSON.parse(v.areaPolygon))
+        rings.push({ rings: geometry.rings })
         let layer = new Graphic({
+          id: v.id,
           geometry: geometry,
           symbol: new SimpleFillSymbol({
             color: [83, 164, 253, 0.5],
@@ -193,37 +199,26 @@ const AreaTask = (props) => {
             },
           }),
         })
-      viewRef.current.goTo({ target: geometry, zoom: viewRef.current.zoom > 20 ? 20 : viewRef.current.zoom > 15 ? viewRef.current.zoom : 15 }, { duration: 500 })
-      let graphicsLayer = viewRef.current.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
-      if (graphicsLayer) {
-        graphicsLayer.removeAll()
-      } else {
-        graphicsLayer = new GraphicsLayer({ id: 'newDrawLayer' })
-        viewRef.current.map.add(graphicsLayer)
+        layers.push(layer)
       }
-      graphicsLayer.add(layer)
-    }
-  }
-
-  const createPaths = (view) => {
-    setTimeout(() => {
-      if (isJson(value)) {
-        let layer = new Graphic({
-          geometry: geomUtils.toGeometry(JSON.parse(value)),
-          symbol: new SimpleFillSymbol({
-
-          }),
     })
     let graphicsLayer = viewRef.current.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
     if (graphicsLayer) {
+      otherLayers = graphicsLayer?.graphics.filter(v => isNaN(v.id))
       graphicsLayer.removeAll()
     } else {
       graphicsLayer = new GraphicsLayer({ id: 'newDrawLayer' })
-          view.map.add(graphicsLayer)
+      viewRef.current.map.add(graphicsLayer)
     }
-        graphicsLayer.add(layer)
+    let allLayers = [...layers, ...otherLayers]
+    graphicsLayer.addMany(allLayers)
+    let regionalScope = allLayers.map(v => {
+      return {
+        geometry: JSON.stringify({ rings: getRings(v.geometry.rings) }),
+        geometryType: 'civGeometryPolygon',
       }
-    }, 2000)
+    })
+    getGISDataCount(regionalScope)
   }
 
   const rowChange = (type, row) => {
@@ -257,16 +252,47 @@ const AreaTask = (props) => {
     setDataSource(array)
   }
 
-  const getView = (viewObject) => {
-    setRings(isJson(value) ? JSON.parse(value) : '')
-    viewRef.current = viewObject
-    createPaths(viewObject)
+  const removeCurrentLayerActive = (graphicsLayer) => {
+    let currentLayer = graphicsLayer.graphics.find(v => v.id === 'currentLayerActive')
+    graphicsLayer.remove(currentLayer)
+    setActiveId('')
   }
 
-  const getMapInfo = (viewObject) => {
+  const getView = (viewObject) => {
     setRings(isJson(value) ? JSON.parse(value) : '')
     viewRef.current = viewObject
-    createPaths(viewObject)
+    viewObject.on('click', e => {
+      viewObject.hitTest(e).then(res => {
+        let graphicsLayer = viewRef?.current?.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
+        if (graphicsLayer) {
+          removeCurrentLayerActive(graphicsLayer)
+        }
+        if (res.results.length) {
+          let ActiveId = res.results?.[0]?.graphic?.id
+          if (ActiveId === 'currentLayerActive') return
+          setActiveId(ActiveId)
+          if (graphicsLayer) {
+            let currentLayer = graphicsLayer.graphics.find(v => v.id === ActiveId)
+            if (currentLayer) {
+              let layer = new Graphic({
+                id: 'currentLayerActive',
+                geometry: currentLayer.geometry,
+                symbol: new SimpleFillSymbol({
+                  color: [204, 116, 117, 0.5],
+                  outline: {
+                    color: [204, 116, 117, 1],
+                    width: 2,
+                  },
+                }),
+              })
+              graphicsLayer.add(layer)
+            }
+          }
+        } else {
+          setActiveId('')
+        }
+      })
+    })
   }
 
   const getPoints = (view) => {
@@ -275,10 +301,11 @@ const AreaTask = (props) => {
         view,
         action: 'polygon',
         target: 'newDrawLayer',// 随便写
-        toolTip: '左键选择位置',
+        toolTip: '左键选择位置,双击结束,点击区域可进行删除',
         drawEnd: geometry => {
           setRings({ rings: geometry.rings })
           let layer = new Graphic({
+            id: `${getNanoid(10, '前端ID')}`,
             geometry: geometry,
             symbol: new SimpleFillSymbol({
               color: [83, 164, 253, 0.5],
@@ -290,17 +317,20 @@ const AreaTask = (props) => {
           })
           let graphicsLayer = view.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
           if (graphicsLayer) {
-            graphicsLayer.removeAll()
           } else {
             graphicsLayer = new GraphicsLayer({ id: 'newDrawLayer' })
             view.map.add(graphicsLayer)
           }
           graphicsLayer.add(layer)
           drawTool.deactivate()
-          getGISDataCount({ rings: getRings(geometry.rings) })
-          setSelectedKeys([])
+          let regionalScope = graphicsLayer?.graphics.map(v => {
+            return {
+              geometry: JSON.stringify({ rings: getRings(v.geometry.rings) }),
+              geometryType: 'civGeometryPolygon',
+            }
+          })
+          getGISDataCount(regionalScope)
         },
-        // rightClick: () => { getPoints(view, coordGetLayer) }
       })
     }
   }
@@ -309,18 +339,40 @@ const AreaTask = (props) => {
     getPoints(viewRef.current)
   }
 
+  const delLayer = () => {
+    let graphicsLayer = viewRef?.current?.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
+    if (graphicsLayer) {
+      let currentLayer = graphicsLayer.graphics.find(v => v.id === activeId)
+      if (currentLayer) {
+        graphicsLayer.remove(currentLayer)
+        let keys = selectedKeys.filter(v => v !== currentLayer.id)
+        setSelectedKeys(keys)
+      }
+      removeCurrentLayerActive(graphicsLayer)
+    }
+    let regionalScope = graphicsLayer?.graphics.map(v => {
+      return {
+        geometry: JSON.stringify({ rings: getRings(v.geometry.rings) }),
+        geometryType: 'civGeometryPolygon',
+      }
+    })
+    getGISDataCount(regionalScope)
+  }
+
   const showMap = () => {
     if (addons) {
-      getData(value)
       setVisible(true)
+      getData(value)
     }
   }
 
   const onCancel = () => {
     setVisible(false)
+    setActiveId('')
   }
 
-  const getGISDataCount = async (rings) => {
+  const getGISDataCount = async (regionalScope) => {
+    if (!regionalScope.length) return
     let layerWhere = []
     if (layerName?.length) {
       layerName.forEach(v => {
@@ -329,11 +381,10 @@ const AreaTask = (props) => {
     }
     let paramas = {
       mapServerName: service,
-      geometry: JSON.stringify(rings),
-      geometryType: 'civGeometryPolygon',
-      layerWhereList: layerWhere
+      regionalScope: regionalScope,
+      layerWhereList: layerWhere,
     }
-    const { code, data } = await GetAreaLayerTaskData(paramas)
+    const { code, data } = await GetManyLayerAreaData(paramas)
     if (code === 0) {
       let array = []
       if (layerName?.length) {
@@ -346,7 +397,9 @@ const AreaTask = (props) => {
     }
   }
 
-  const getGISData = async () => {
+  const getGISData = async (regionalScope) => {
+    if (!regionalScope.length) return
+    setLoading(true)
     window.relationForm = { configs: [], data: [] }
     let layerWhere = []
     if (layerName?.length) {
@@ -356,11 +409,10 @@ const AreaTask = (props) => {
     }
     let paramas = {
       mapServerName: service,
-      geometry: JSON.stringify(rings),
-      geometryType: 'civGeometryPolygon',
+      regionalScope: regionalScope,
       layerWhereList: layerWhere
     }
-    const { code, data, msg } = await GetAreaLayerTaskData(paramas)
+    const { code, data, msg } = await GetManyLayerAreaData(paramas)
     if (code === 0) {
       let items = []
       let array = []
@@ -395,32 +447,76 @@ const AreaTask = (props) => {
     } else {
       message.error(msg)
     }
+    setLoading(false)
   }
 
   const onOk = () => {
-    if (selectedKeys.length) {
-      onChange(`${selectedKeys[0]}`)
-    } else {
-      onChange(JSON.stringify(rings))
+    let valueStr = ''
+    let graphicsLayer = viewRef?.current?.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
+    if (graphicsLayer) {
+      let regionalScope = graphicsLayer?.graphics?.map(v => {
+        valueStr = valueStr + `${valueStr ? '|' : ''}${!isNaN(v.id) ? v.id : JSON.stringify({ rings: getRings(v.geometry.rings) })}`
+        return {
+          geometry: JSON.stringify({ rings: getRings(v.geometry.rings) }),
+          geometryType: 'civGeometryPolygon',
         }
-    getGISData()
+      })
+      getGISData(regionalScope)
+    }
+    onChange(valueStr || '')
     setVisible(false)
   }
 
+  const initLayer = (value, areaList) => {
+    let valueArray = value.split('|')
+    let layers = []
+    let keys = []
+    let areaPolygon = '{}'
+    valueArray.forEach(v => {
+      if (v) {
+        if (!isNaN(v)) {
+          keys.push(Number(v))
+          areaPolygon = areaList.find(s => Number(v) === s.id)?.areaPolygon
+        }
+        let geometry = geomUtils.toGeometry(JSON.parse(!isNaN(v) ? areaPolygon : v))
+        console.log('geometry', geometry)
+        let layer = new Graphic({
+          id: !isNaN(v) ? Number(v) : `${getNanoid(10, '前端ID')}`,
+          geometry: geometry,
+          symbol: new SimpleFillSymbol({
+            color: [83, 164, 253, 0.5],
+            outline: {
+              color: [83, 164, 253, 1],
+              width: 2,
+            },
+          }),
+        })
+        layers.push(layer)
+      }
+    })
+    setSelectedKeys(keys)
+    if (viewRef.current) {
+      let graphicsLayer = viewRef.current.map.layers.find((lyr) => lyr.id == 'newDrawLayer')
+      if (graphicsLayer) {
+        otherLayers = graphicsLayer?.graphics.filter(v => isNaN(v.id))
+        graphicsLayer.removeAll()
+      } else {
+        graphicsLayer = new GraphicsLayer({ id: 'newDrawLayer' })
+        viewRef.current.map.add(graphicsLayer)
+      }
+      graphicsLayer.addMany(layers)
+    }
+  }
+
   const getData = async (value) => {
     const { code, data } = await FetchAreaList({ userID: userID, sourceType: '管网巡检,DMA分区' })
     if (code === '0') {
       setAreaList(data)
       if (value) {
-        if (!isNaN(value)) {
         setTimeout(() => {
-            onSelect([Number(value)], data)
+          initLayer(value, data)
         }, 2000)
       }
-        if (isJson(value)) {
-          getGISDataCount({ rings: getRings(JSON.parse(value).rings) })
-        }
-      }
     }
   }
 
@@ -465,20 +561,12 @@ const AreaTask = (props) => {
     }
   }, [presetValue])
 
-  useEffect(() => {
-    if (disabled && screenShot) {
-      addons?.setSchemaByPath(addons.dataPath, { ...schema, width: '67%' })
-    }
-  }, [disabled, screenShot])
-
   return (
     <div className={styles.AreaTask}>
       <div className={styles.areaBox}>
         <div className={styles.areaHeader}> {titleShow} </div>
         <div className={styles.areaInput}>
-          <div style={{ width: '96px', textAlign: 'right' }}>
-            绘制选择：
-          </div>
+          <div style={{ width: '96px', textAlign: 'right' }}> 绘制选择：</div>
           {
             !disabled && !presetValue ? (
               <Input
@@ -505,6 +593,7 @@ const AreaTask = (props) => {
         </div>
         <div className={styles.areaTable}>
           <Table
+            loading={loading}
             size='small'
             rowKey={disabled ? 'gis-设备编号' : 'ID'}
             bordered
@@ -529,17 +618,13 @@ const AreaTask = (props) => {
           <Spin spinning={loading} tip="获取GIS数据中...">
             <div className={styles.content}>
               <div className={styles.left}>
-                {/* <div className={styles.tabs}>
-                  {
-                    ['一级', '二级', '三级'].map(v => <div className={styles.tab} active={`${v === tab}`} key={v} onClick={() => setTab(v)}>{v}</div>)
-                  }
-                </div> */}
                 <div className={styles.tabContent}>
                   <Tree
                     defaultExpandAll
                     blockNode
-                    selectedKeys={selectedKeys}
-                    onSelect={(value) => onSelect(value, areaList)}
+                    checkable
+                    checkedKeys={selectedKeys}
+                    onCheck={(value) => onCheck(value, areaList)}
                     treeData={treeData}
                   />
                 </div>
@@ -569,13 +654,10 @@ const AreaTask = (props) => {
                     })
                   }
                 </div>
-                <Button
-                  style={{ position: 'absolute', zIndex: '99', right: '10px', top: '10px' }}
-                  type='primary'
-                  onClick={start}
-                >
-                  开始绘制
-                </Button>
+                <div style={{ position: 'absolute', zIndex: '99', right: '10px', top: '10px' }}>
+                  <Button type='primary' onClick={start}>开始绘制</Button>
+                  <Button type='primary' disabled={!activeId} danger onClick={delLayer} style={{ marginLeft: 10 }}>删除</Button>
+                </div>
               </div>
             </div>
           </Spin>