feat: '运维地图配置范围内网数据获取逻辑优化'

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

@@ -19,7 +19,9 @@ import {
   Graphic,
   EditAndDrawPanel,
 } from '@wisdom-map/arcgismap';
+import { checkInternalNetwork } from '@/utils/utils';
 import { getPipenetLayer } from '@wisdom-map/basemap';
+import mapDataJson from './mapData.json';
 import {
   Form,
   Input,
@@ -308,24 +310,53 @@ const Map = props => {
         }
       });
     // 获取城市选择器列表
-    window.AMap.plugin('AMap.DistrictSearch', () => {
-      let districtSearch = new AMap.DistrictSearch({
-        // 关键字对应的行政区级别，country表示国家
-        level: 'country',
-        //  显示下级行政区级数，1表示返回下一级行政区
-        subdistrict: 3,
-      });
+    // window.AMap.plugin('AMap.DistrictSearch', () => {
+    //   let districtSearch = new AMap.DistrictSearch({
+    //     // 关键字对应的行政区级别，country表示国家
+    //     level: 'country',
+    //     //  显示下级行政区级数，1表示返回下一级行政区
+    //     subdistrict: 3,
+    //   });
 
-      // 搜索所有省/直辖市信息
-      districtSearch.search('中国', (status, result) => {
-        // 查询成功时，result即为对应的行政区信息
-        console.log(result, '行政区划信息');
-        result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
-        setOptions(result.districtList[0].districtList);
-      });
-    });
+    //   // 搜索所有省/直辖市信息
+    //   districtSearch.search('中国', (status, result) => {
+    //     // 查询成功时，result即为对应的行政区信息
+    //     console.log(result, '行政区划信息');
+    //     result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
+    //     setOptions(result.districtList[0].districtList);
+    //   });
+    // });
+    getAreaJsonData()
   }, []);
 
+   // 获取城市选择器列表
+   const getAreaJsonData = () => {
+    checkInternalNetwork().then(res => {
+      console.log(res, 'res');
+      if (!res) {
+        console.log(mapDataJson, 'mapDataJson本地数据');
+        setOptions(mapDataJson)
+      } else {
+        window.AMap.plugin('AMap.DistrictSearch', () => {
+          let districtSearch = new AMap.DistrictSearch({
+            // 关键字对应的行政区级别，country表示国家
+            level: 'country',
+            //  显示下级行政区级数，1表示返回下一级行政区
+            subdistrict: 3,
+          });
+
+          // 搜索所有省/直辖市信息
+          districtSearch.search('中国', (status, result) => {
+            // 查询成功时，result即为对应的行政区信息
+            console.log(result, '行政区划信息');
+            result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
+            setOptions(result.districtList[0].districtList);
+          });
+        })
+      }
+    })
+  }
+
   const getData = () => {
     GetWebSiteConfig({ client: 'sandbox' })
       .then(res => {
@@ -430,22 +461,23 @@ const Map = props => {
         }
       });
     // 获取城市选择器列表
-    window.AMap.plugin('AMap.DistrictSearch', () => {
-      let districtSearch = new AMap.DistrictSearch({
-        // 关键字对应的行政区级别，country表示国家
-        level: 'country',
-        //  显示下级行政区级数，1表示返回下一级行政区
-        subdistrict: 3,
-      });
+    // window.AMap.plugin('AMap.DistrictSearch', () => {
+    //   let districtSearch = new AMap.DistrictSearch({
+    //     // 关键字对应的行政区级别，country表示国家
+    //     level: 'country',
+    //     //  显示下级行政区级数，1表示返回下一级行政区
+    //     subdistrict: 3,
+    //   });
 
-      // 搜索所有省/直辖市信息
-      districtSearch.search('中国', (status, result) => {
-        // 查询成功时，result即为对应的行政区信息
-        console.log(result, '行政区划信息');
-        result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
-        setOptions(result.districtList[0].districtList);
-      });
-    });
+    //   // 搜索所有省/直辖市信息
+    //   districtSearch.search('中国', (status, result) => {
+    //     // 查询成功时，result即为对应的行政区信息
+    //     console.log(result, '行政区划信息');
+    //     result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
+    //     setOptions(result.districtList[0].districtList);
+    //   });
+    // });
+    getAreaJsonData()
   };
 
   // 获取地图实例
@@ -717,9 +749,8 @@ const Map = props => {
           ymax: data.rings[0][0][1],
         });
         form.setFieldsValue({
-          extent: `${data.rings[0][0][0]},${data.rings[0][1][1]},${data.rings[0][2][0]},${
-            data.rings[0][0][1]
-          }`,
+          extent: `${data.rings[0][0][0]},${data.rings[0][1][1]},${data.rings[0][2][0]},${data.rings[0][0][1]
+            }`,
         });
         mapRef.current.gotoGeometry(geom1);
       },
@@ -1038,30 +1069,30 @@ const Map = props => {
                 <Radio value={1}>手绘区域</Radio>
               </Radio.Group>
             </Form.Item>
-              {radio1 === 0 && (
+            {radio1 === 0 && (
               <>
                 <Form.Item label="手绘区域" name="customPointExtent">
-                      <Tag
-                        style={{
-                          width: '100px',
-                          height: '27px',
-                          paddingLeft: '25px',
-                          paddingTop: '0px',
-                          marginTop: '4px',
-                          display: 'flex',
-                          alignItems: 'center',
-                        }}
-                        color="processing"
-                        onClick={() => {
-                          form.setFieldsValue({ customFlag: 1 });
-                          setRadio1(1)
-                          setButState(true);
-                          setResultData(null);
-                        }}
-                      >
-                        开始绘制
-                      </Tag> 
-               </Form.Item>
+                  <Tag
+                    style={{
+                      width: '100px',
+                      height: '27px',
+                      paddingLeft: '25px',
+                      paddingTop: '0px',
+                      marginTop: '4px',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                    color="processing"
+                    onClick={() => {
+                      form.setFieldsValue({ customFlag: 1 });
+                      setRadio1(1)
+                      setButState(true);
+                      setResultData(null);
+                    }}
+                  >
+                    开始绘制
+                  </Tag>
+                </Form.Item>
               </>
             )}
             {radio1 === 1 && (
@@ -1326,7 +1357,7 @@ const Map = props => {
               view={mapInfo.current}
               editType={['POLYGON', 'EXTENT', 'CIRCLE']}
               defaultGraphic={resultData || 'edgelayer-arcgismap'}
-              areaName = {
+              areaName={
                 form.getFieldsValue().areaName &&
                 form.getFieldsValue().areaName[form.getFieldsValue().areaName.length - 1]
               }

src/utils/utils.js

+import { get } from '@/services/index';
 export function compress(
   base64, // 源图片
   rate, // 缩放比例
@@ -6,7 +7,7 @@ export function compress(
   //处理缩放，转格式
   var _img = new Image();
   _img.src = base64;
-  _img.onload = function() {
+  _img.onload = function () {
     var _canvas = document.createElement('canvas');
     var w = this.width / rate;
     var h = this.height / rate;
@@ -14,7 +15,7 @@ export function compress(
     _canvas.setAttribute('height', h);
     _canvas.getContext('2d').drawImage(this, 0, 0, w, h);
     var base64 = _canvas.toDataURL('image/jpeg');
-    _canvas.toBlob(function(blob) {
+    _canvas.toBlob(function (blob) {
       if (blob.size > 750 * 1334) {
         //如果还大，继续压缩
         compress(base64, rate, callback);
@@ -24,3 +25,24 @@ export function compress(
     }, 'image/jpeg');
   };
 }
+
+export function checkInternalNetwork() {
+  return new Promise((resolve, reject) => {
+    if (window.navigator.onLine) {
+      const image = new Image()
+      image.onload = () => {
+        console.log("请求图片成功,外网环境！")
+        resolve(true)
+      }
+      image.onerror = () => {
+        console.log("请求失败，内网环境！")
+        resolve(false)
+      }
+      image.src = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
+    } else {
+      console.log('离线状态，内网环境！');
+      
+      resolve(false)
+    }
+  })
+}