地图配置新曾边界颜色修改

.env

 # PUBLIC_PATH = reactOMS, 默认转发 /cityinterface
-PROXY=/PandaGIS:http://192.168.12.140:8081;/Cityinterface:http://192.168.12.140:8081;/PandaOMS:http://192.168.12.140:8081;/Publish:http://192.168.12.140:8081;/Web4:http://192.168.12.140:8081;/CityTemp:http://192.168.12.140:8081
+PROXY=/PandaGIS:http://192.168.12.78:8018;/Cityinterface:http://192.168.12.78:8018;/PandaOMS:http://192.168.12.78:8018;/Publish:http://192.168.12.78:8018;/Web4:http://192.168.12.78:8018;/CityTemp:http://192.168.12.78:8018
 #  PROXY=/Cityinterface:http://192.168.12.121:8082;/PandaOMS:http://192.168.12.121:8082;/Web4:http://192.168.12.121:8082;/CityTemp:http://192.168.12.121:8082
 # 可设置第二个代理，test为转发前缀，后面为代理转发的地址
 # PROXY2 = test : http://localhost:8006/
 
 # 本地应用启动的host域名
-HOST = 127.0.0.1
+HOST = 192.168.12.78
 
 # 本地应用启动的端口
- PORT = 3002
+ PORT = 3001

package.json

@@ -92,7 +92,7 @@
         "@esri/calcite-colors": "6.0.3",
         "@wisdom-cesium/cesium": "^1.0.78",
         "@wisdom-map/amap": "1.1.0-beta.38",
-        "@wisdom-map/arcgismap": "1.4.0-44",
+        "@wisdom-map/arcgismap": "1.4.0-46",
         "@wisdom-map/basemap": "1.1.0-10",
         "ace-builds": "^1.4.12",
         "antd-img-crop": "^3.13.2",

server/index.js

@@ -7,10 +7,10 @@ const argv = require('./argv');
 const port = require('./port');
 const setup = require('./middlewares/frontendMiddleware');
 const isDev = process.env.NODE_ENV !== 'production';
-const ngrok =
-  (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel
-    ? require('ngrok')
-    : false;
+// const ngrok =
+//   (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel
+//     ? require('ngrok')
+//     : false;
 const { resolve } = require('path');
 const app = express();
 
@@ -42,15 +42,16 @@ app.listen(port, host, async err => {
   }
 
   // Connect to ngrok in dev mode
-  if (ngrok) {
-    let url;
-    try {
-      url = await ngrok.connect(port);
-    } catch (e) {
-      return logger.error(e);
-    }
-    logger.appStarted(port, prettyHost, url);
-  } else {
-    logger.appStarted(port, prettyHost);
-  }
+  // if (ngrok) {
+  //   let url;
+  //   try {
+  //     url = await ngrok.connect(port);
+  //   } catch (e) {
+  //     return logger.error(e);
+  //   }
+  //   logger.appStarted(port, prettyHost, url);
+  // } else {
+  //   logger.appStarted(port, prettyHost);
+  // }
+  logger.appStarted(port, prettyHost);
 });

src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx

@@ -2,6 +2,7 @@
 /* eslint-disable import/no-duplicates */
 /* eslint-disable no-new */
 import React, { useEffect, useState, useRef } from 'react';
+import { SketchPicker } from 'react-color';
 import {
   ArcGISMap,
   ArcGISSceneMap,
@@ -151,6 +152,7 @@ const Map = props => {
   const [keepSave, setKeepSave] = useState('');
   const [map, setMap] = useState(null);
   const [color, setColor] = useState('');
+  const [colorList, setColorList] = useState('');
 
   useEffect(() => {
     // GetSpriteSheet().then(res => {
@@ -165,23 +167,24 @@ const Map = props => {
       setSchemeList(res.data);
       setMapsettings(res.data);
       setSetttingsSave(res.data);
-
       res.data.forEach(item => {
         if (item.layerType === 'PipenetLayer') {
           setttings = item;
         }
       });
+      console.log(setttings);
       setTimeout(() => {
         form.setFieldsValue({
           areaName: [setttings.areaName],
           backgroundColor: setttings.backgroundColor,
           backgroundOpacity: setttings.backgroundOpacity * 100,
-          boundColor: setttings.boundColor,
+          boundColor: setttings.boundColor || '#86C8F8',
           boundWidth: parseInt(setttings.boundWidth),
           extent: setttings.extent,
           schemename: setttings.schemename,
           exportScheme: setttings.exportScheme || 'pandagis',
         });
+        setColorList(setttings.boundColor || '#86C8F8');
         setColor(setttings.backgroundColor);
         setRadio(setttings.exportScheme || 'pandagis');
         if (setttings.id) {
@@ -212,35 +215,69 @@ const Map = props => {
       });
     });
   }, []);
+
   // 获取地图实例
   const getMapInfo = viewObject => {
     setMap(viewObject);
     const { layer } = getPipenetLayer(viewObject?.map);
     if (layer) {
+      console.log(232324234);
       layer.visible = false;
     }
     watchUtils.watch(viewObject, ['zoom'], newzoom => {
       // 鼠标滚动隐藏前端绘制的管网图
       viewObject.map.layers.find(layer => {
         if (layer.layerType == 'PipenetLayer') {
+          console.log(11111111);
           layer.visible = false;
         }
       });
     });
-    if (radio == 'pandagis') {
-      // 用户自定义创建的管网图
-      viewObject.map.add(pandagis);
-    }
+    console.log(88888);
     mapInfo.current = viewObject;
+
+    // if (radio == 'pandagis') {
+    //   console.log(999999);
+    //   // 用户自定义创建的管网图
+    //   viewObject.map.add(pandagis);
+    // }
+
+    // gate();
+  };
+
+  const gate = () => {
+    console.log(form.getFieldsValue().schemename);
+    console.log(setttingsSave);
+    let aa = form.getFieldsValue().schemename;
+    setttingsSave.forEach(item => {
+      if (item.schemename === aa) {
+        if (!item.areaName) {
+          console.log(123);
+          mapRef.current.changeAreaName('上海市');
+        }
+        // if (!item.backgroundColor) {
+        //   mapRef.current.updateAreaColor('#000000');
+        // }
+        if (!item.backgroundOpacity) {
+          mapRef.current.changeBackgroundOpacity('0.6');
+        }
+        // if (!item.boundWidth) {
+        //   mapRef.current.changeBoundWidthValue('10');
+        // }
+      }
+    });
   };
+
   // 选择颜色
   const checkColor = color => {
     form.setFieldsValue({ backgroundColor: color });
     setColor(color);
     mapRef.current.updateAreaColor(color);
   };
+
   // 表单修改后对地图进行配置
   const changeValue = changedFields => {
+    console.log(changedFields);
     if (changedFields.length === 0) {
       return;
     }
@@ -255,6 +292,10 @@ const Map = props => {
         obj[index].boundWidth = changedFields[0].value;
         mapRef.current.changeBoundWidthValue(obj[index].boundWidth);
         break;
+      case 'boundColor':
+        obj[index].boundColor = changedFields[0].value.hex;
+        mapRef.current.changeBoundColor(obj[index].boundColor);
+        break;
       case 'areaName':
         Drawtool.deactivate(false);
         obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
@@ -284,24 +325,27 @@ const Map = props => {
           }
         });
         form.setFieldsValue({
-          areaName: setttings.areaName,
+          areaName: [setttings.areaName],
           backgroundColor: setttings.backgroundColor,
           backgroundOpacity: setttings.backgroundOpacity * 100,
-          boundColor: setttings.boundColor,
+          boundColor: setttings.boundColor || '#86C8F8',
           boundWidth: parseInt(setttings.boundWidth),
           extent: setttings.extent,
           exportScheme: setttings.exportScheme || 'pandagis',
         });
+        setColorList(setttings.boundColor || '#86C8F8');
         setColor(setttings.backgroundColor);
         setRadio(setttings.exportScheme || 'pandagis');
         mapRef.current.mapchange(obj);
         // 清除原有接口返回后端绘制的管网图
         const { layer } = getPipenetLayer(mapRef.current?.map);
         if (layer) {
+          console.log(6666666);
           layer.visible = false;
         }
-        // 若方案是后端绘制每次切换首先创建用户自定义的后端绘制管网
-        if (setttings.exportScheme != 'arcgis') {
+        // 若方案有管网且是后端绘制每次切换首先创建用户自定义的后端绘制管网
+        if (setttings.exportScheme == 'pandagis') {
+          console.log(222222);
           const pandagisaa = new MapImageLayer({
             id: setttings.id,
             url: `/PandaGIS/MapServer/${setttings.id}`,
@@ -361,10 +405,17 @@ const Map = props => {
     } else {
       aa = obj.areaName;
     }
+    let list;
+    if (obj.boundColor.hex) {
+      list = obj.boundColor.hex;
+    } else {
+      list = obj.boundColor;
+    }
+    console.log(obj);
     const jsConfig = {
       extent: form.getFieldValue('extent'),
       areaName: aa,
-      boundColor: '#86c8f8',
+      boundColor: list,
       boundWidth: `${obj.boundWidth}px`,
       backgroundColor: obj.backgroundColor,
       backgroundOpacity: obj.backgroundOpacity / 100,
@@ -423,6 +474,7 @@ const Map = props => {
       // 选择前端绘制时,如果界面有自定义的管网图就隐藏
       mapInfo.current.map.layers.forEach(item => {
         if (item.layerType && item.layerType == 'PipenetLayertest') {
+          console.log(444444444);
           mapInfo.current.map.remove(item);
         }
       });
@@ -437,6 +489,12 @@ const Map = props => {
     setKeepSave(e);
   };
 
+  // 颜色选择
+  const colorChange = value => {
+    console.log(value);
+    setColorList(value.hex);
+  };
+
   return (
     <div>
       <div className={styles.mapContent}>
@@ -448,7 +506,7 @@ const Map = props => {
             onFieldsChange={changeValue}
             onFinish={onFinish}
           >
-            <Form.Item label="切换方案" name="schemename">
+            <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}>
               <Select placeholder="请选择方案">
                 {schemeList.map((item, index) => (
                   <Option value={item.schemename} key={index}>
@@ -457,7 +515,7 @@ const Map = props => {
                 ))}
               </Select>
             </Form.Item>
-            <Form.Item label="地区选择" name="areaName">
+            <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
               <Cascader
                 fieldNames={{
                   label: 'name',
@@ -472,7 +530,7 @@ const Map = props => {
               />
             </Form.Item>
 
-            <Form.Item label="遮罩颜色" name="backgroundColor">
+            <Form.Item label="遮罩颜色" name="backgroundColor" style={{ marginBottom: '19px' }}>
               <div className={styles.colorContent}>
                 {colorArr.map(item => (
                   <div
@@ -486,14 +544,17 @@ const Map = props => {
                 ))}
               </div>
             </Form.Item>
-            <Form.Item label="透明度(%)" name="backgroundOpacity">
+            <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}>
               <Slider min={0} max={100} />
             </Form.Item>
-            <Form.Item label="边界宽度" name="boundWidth">
+            <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
+              <SketchPicker width="217px" color={colorList} onChange={e => colorChange(e)} />
+            </Form.Item>
+            <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
               <InputNumber min={1} max={10} />
             </Form.Item>
             {name ? (
-              <Form.Item label="管网方案" name="exportScheme">
+              <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
                 <Radio.Group onChange={onChange} value={radio}>
                   <Radio value="pandagis">后端绘制</Radio>
                   <Radio value="arcgis">前端绘制</Radio>
@@ -503,7 +564,7 @@ const Map = props => {
               <></>
             )}
 
-            <Form.Item label="复位范围">
+            <Form.Item label="复位范围" style={{ marginBottom: '19px' }}>
               <div style={{ display: 'flex' }}>
                 <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}>
                   <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled />

src/pages/platformCenter/gis/schemeConfig/TileConfig/AddModal.jsx

@@ -53,6 +53,7 @@ const AddModal = props => {
   const [current, setCurrent] = useState(false);
   const [type1, setType] = useState(0);
   const [form] = Form.useForm();
+  const [radio1, setRadio1] = useState();
   const arr = [
     'assets/images/thumbnail/thumbnail_1.jpg',
     'assets/images/thumbnail/thumbnail_2.jpg',
@@ -122,6 +123,7 @@ const AddModal = props => {
                 taggingUrl: obj.taggingUrl,
                 icon: obj.icon,
                 type: obj.type,
+                isTainDiTu: obj.isTainDiTu,
               }),
             };
           }
@@ -167,6 +169,7 @@ const AddModal = props => {
     console.log(baseMap);
     switch (type) {
       case 'add':
+        setRadio1(0);
         setRadio('');
         form.resetFields();
         form.setFieldsValue({
@@ -179,12 +182,14 @@ const AddModal = props => {
           Port: '8080',
           User: 'admin',
           Pwd: 'geoserver',
+          isTainDiTu: 0,
           levelEndEnlarge: false,
         });
 
         break;
       case 'edit':
         console.log(formObj);
+        setRadio1(formObj.isTainDiTu || 0);
         form.setFieldsValue({ ...formObj });
         let index = formObj.icon.lastIndexOf('/');
         let str = formObj.icon.substring(index + 1, formObj.icon.length);
@@ -517,6 +522,10 @@ const AddModal = props => {
     0: '0%',
     100: '100%',
   };
+
+  const onChange1 = e => {
+    setRadio1(e.target.value);
+  };
   return (
     <Modal
       title="添加基础底图"
@@ -627,6 +636,12 @@ const AddModal = props => {
               <Item label="注记URL" name="taggingUrl">
                 <Input placeholder="请输入url" allowClear />
               </Item>
+              <Item label="天地图坐标系" name="isTainDiTu">
+                <Radio.Group onChange={onChange1} value={radio1}>
+                  <Radio value={0}>否</Radio>
+                  <Radio value={1}>是</Radio>
+                </Radio.Group>
+              </Item>
             </>
           )}
           {/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>

src/pages/platformCenter/gis/schemeConfig/TileConfig/NewEditModal.jsx

@@ -51,6 +51,7 @@ const NewEditModal = props => {
   const [current, setCurrent] = useState(false);
   const [type1, setType] = useState(0);
   const [form] = Form.useForm();
+  const [radio1, setRadio1] = useState();
   const arr = [
     'assets/images/thumbnail/thumbnail_1.jpg',
     'assets/images/thumbnail/thumbnail_2.jpg',
@@ -118,6 +119,7 @@ const NewEditModal = props => {
               taggingUrl: obj.taggingUrl,
               icon: obj.icon,
               type: obj.type,
+              isTainDiTu: obj.isTainDiTu,
               extent: null,
               baseLayer: null,
               proxyUrl: null,
@@ -197,12 +199,15 @@ const NewEditModal = props => {
       setAdvanced(0);
       setCurrent(false);
     }
-
+    console.log(formObj.isTainDiTu);
+    setRadio1(formObj.isTainDiTu);
     switch (type) {
       case 'edit':
         console.log(formObj);
+
         form.setFieldsValue({
           ...formObj,
+          isTainDiTu: formObj.isTainDiTu,
           IP: formObj.m_Ip,
           gis: formObj.gsAppName,
           layer: formObj.baseLayer,
@@ -480,6 +485,11 @@ const NewEditModal = props => {
     0: '0%',
     100: '100%',
   };
+
+  const onChange1 = e => {
+    setRadio1(e.target.value);
+  };
+
   return (
     <Modal
       title="编辑基础底图"
@@ -582,6 +592,12 @@ const NewEditModal = props => {
               <Item label="注记URL" name="taggingUrl">
                 <Input placeholder="请输入url" allowClear />
               </Item>
+              <Item label="天地图坐标系" name="isTainDiTu">
+                <Radio.Group onChange={onChange1} value={radio1}>
+                  <Radio value={0}>否</Radio>
+                  <Radio value={1}>是</Radio>
+                </Radio.Group>
+              </Item>
             </>
           )}
           {/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>