feat: 完成运维配置

package.json

@@ -87,7 +87,7 @@
     "@babel/polyfill": "7.4.3",
     "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "^7.10.5",
-    "@wisdom-cesium/cesium": "^1.0.27",
+    "@wisdom-cesium/cesium": "^1.0.29",
     "ace-builds": "^1.4.12",
     "antd-img-crop": "^3.13.2",
     "bizcharts": "^4.0.15",

src/components/ThreeMapScope/index.jsx

@@ -2,34 +2,53 @@ import React, { useEffect, useState, useRef } from 'react'
 import { Input, Button, Modal, message } from 'antd'
 import { gcj_decrypt, exetent2AmapPoint, lngLat2WebMercator } from '@/utils/transformUtil'
 import { GetAllConfig, GetMetaData } from '@/services/platform/gis'
-
-const pdCesium = require('@wisdom-cesium/cesium')
-const Cesium = require('cesium/Cesium')
+import {
+    PdRender,
+    Cesium,
+} from '@wisdom-cesium/cesium'
 const { Search } = Input;
 let pdViewer, viewer, extent, orientation, position;
 const MapScope = props => {
-    const { visible, confirmModal,item } = props;
+    const { visible, confirmModal,item , baseMapData, baseMap, handleType} = props;
     const [options, setOptions] = useState([])
     let el = useRef(null);
     const [loading, setLoading] = useState(false);
     let buttonEl = useRef(null);
 
+    const getBaseMap = () => {
+        if(handleType == 'update') {
+            return item.baseMap.map(item => ({
+                type : item.baseMap.type,
+                status : item.status
+            }))
+        } else if(handleType == 'add') {
+            if(!baseMapData) return []
+            let data = baseMapData.map(item => {
+                let map = baseMap.find(({type}) => type === item.type)
+                return {
+                    type : map.type,
+                    status : item.status || 'notActive'
+                }
+            })
+            return data
+        }
+    }
+    const getCamera = () => {
+        if (handleType == 'update') {
+            let {mapSettings} = item
+            return mapSettings.camera || {}
+        } else if (handleType == 'add') {
+            return {}
+        }
+    }
     useEffect(() => {
         if (visible) {
-            let lon = 114.31,lat=30.52
-            pdViewer = new pdCesium.PdRender({
+            pdViewer = new PdRender({
                 el: el.current,
+                baseMaps : getBaseMap() || [] ,
+                cameraSetting : getCamera () || {}
             });
-            if(item){
-                lon =item.mapSettings.camera.position.lon
-                lat =item.mapSettings.camera.position.lat
-            }
             viewer = pdViewer.viewer;
-            pdViewer.viewer.camera.flyTo({
-                destination: Cesium.Cartesian3.fromDegrees(lon, lat, 15000.0), //武汉
-            });
-            var cesiumBottom = document.getElementsByClassName('cesium-viewer-bottom')[0]
-            cesiumBottom.style.display = 'none'
         }
 
     }, [visible]);
@@ -136,19 +155,31 @@ const MapScope = props => {
         return [extent.xmin, extent.ymin, extent.xmax, extent.ymax];
     }
     const onSubmit = () => {
-        let propertyData = document.getElementsByClassName("cesium-geocoder-input cesium-geocoder-input-wide")[0]
-        if (propertyData && propertyData.value) {
-            position = getCenterPosition();
-            extent = getCurrentExtent();
-            orientation = getOrientation();
-            var areaName = propertyData.value;
+        let propertyData = viewer.container.getElementsByClassName("cesium-geocoder-input cesium-geocoder-input-wide")[0]
+        extent = getCurrentExtent();
+        orientation = getOrientation();
+        position = getCenterPosition();
+        if (handleType == 'add') {
+            if (propertyData && propertyData.value) {
+                var areaName = propertyData.value;
+                let mapSettings = { camera: { mode: '3d', position, orientation }, areaName, extent }
+                confirmModal && confirmModal(mapSettings)
+            }
+            else {
+                message.info("未选择视角,请先选择区域")
+            }
+        } else if (handleType == 'update') {
+            let areaName
+            if (propertyData && propertyData.value) {
+                areaName = propertyData.value
+            } else  if(item.mapSettings && item.mapSettings.areaName) {
+                areaName = item.mapSettings.areaName
+            } else {
+                return message.info("未选择视角,请先选择区域")
+            }
             let mapSettings = { camera: { mode: '3d', position, orientation }, areaName, extent }
             confirmModal && confirmModal(mapSettings)
-        }
-        else {
-            message.info("未选择视角,请先选择区域")
-        }
-
+        } 
     }
     const filter = (inputValue, path) => {
         return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)

src/pages/platformCenter/dimensionsConfig/TileConfig/AddModal.jsx

@@ -158,9 +158,13 @@ const AddModal = props => {
       case "天地图影像":
         return 'tianditu-i';
       case "百度街道":
-        return 'bmap-v';
+        return 'baiduMapStreet';
       case "百度影像":
-        return 'bmap-i';
+        return 'baiduMapImage';
+      case "mapBox地图" :
+        return 'mapBoxImage';
+      case "arcgis地图" :
+        return "arcgisImage"
       default:
         return 'amap-v';
     }

src/pages/platformCenter/dimensionsConfig/TileConfig/TileConfig.jsx

@@ -143,7 +143,7 @@ const TileData = props => {
     // 获取瓦片数据配置数据
     const renderTile = () => {
         setTreeLoading(true);
-        const baseMapData = ['高德街道', '高德影像', '天地图街道', '天地图影像','百度街道','百度影像']
+        const baseMapData = ['高德街道', '高德影像', '天地图街道', '天地图影像','百度街道','百度影像', 'mapBox地图', 'arcgis地图']
         GetBaseMapList().then(
             res => {
                 if (res.msg === "Ok") {

src/pages/platformCenter/dimensionsConfig/projectMessage/AddModal.jsx

@@ -25,8 +25,10 @@ const AddModal = props => {
     'amap-i': "高德影像",
     'tianditu-v': "天地图街道",
     'tianditu-i': "天地图影像",
-    'bmap-v': "百度街道",
-    'bmap-i': "百度影像"
+    'baiduMapStreet': "百度街道",
+    'baiduMapImage': "百度影像",
+    "mapBoxImage" : "mapBox地图",
+    "arcgisImage" : "arcgis地图"
   }
   const onSubmit = () => {
     form.validateFields().then(validate => {
@@ -240,6 +242,9 @@ const AddModal = props => {
       <MapScope
         visible={mapScopeVisible}
         onCancel={() => setMapScopeVisible(false)}
+        baseMapData = {baseMapData}
+        baseMap = {baseMap}
+        handleType = 'add'
         confirmModal={submitExtent} /></>
   );
 };

src/pages/platformCenter/dimensionsConfig/projectMessage/components/card.jsx

@@ -218,6 +218,7 @@ const CardData = props => {
                 onCancel={() => setMapScopeVisible(false)}
                 confirmModal={submitExtent}
                 item={props.item}
+                handleType = 'update'
             />
         </>
     )