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,6 +310,33 @@ const Map = props => {
         }
       });
     // 获取城市选择器列表
+    // 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);
+    //   });
+    // });
+    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表示国家
@@ -323,8 +352,10 @@ const Map = props => {
             result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' });
             setOptions(result.districtList[0].districtList);
           });
-    });
-  }, []);
+        })
+      }
+    })
+  }
 
   const getData = () => {
     GetWebSiteConfig({ client: 'sandbox' })
@@ -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,8 +749,7 @@ 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);
@@ -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)
+    }
+  })
+}