fix: 去除web4相关依赖

packages/map/src/core/utils.js

@@ -77,6 +77,170 @@ const mapUtils = {
     }
     return { scale: nearestScale, zoom };
   },
+  getCurrentMapWkid(view, baseMapId) {
+    let id = baseMapId ? baseMapId : view.map.basemap.id;
+    let inSR = 102113;
+    if (id.indexOf('天地图') != -1) inSR = 1021130;
+    return inSR;
+  },
+  getAreaLevel(areaName) {
+    switch (areaName.charAt(areaName.length - 1)) {
+      case '省':
+        return 'province';
+      case '市':
+        return 'city';
+      case '区':
+      case '县':
+      case '旗':
+      case '盟':
+        return 'district';
+      default:
+        return 'country';
+    }
+  },
+  gcj2wgs(point) {
+    var ee = 0.00669342162296594323,
+      a = 6378245.0,
+      dLat = this.transformLat(point.Y - 105.0, point.X - 35.0),
+      dLon = this.transformLon(point.Y - 105.0, point.X - 35.0),
+      radLat = (point.X / 180.0) * Math.PI,
+      magic = Math.sin(radLat),
+      magic = 1 - ee * magic * magic;
+    var sqrtMagic = Math.sqrt(magic);
+    dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * Math.PI);
+    dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * Math.PI);
+    var mgLat = point.X - dLat;
+    var mgLon = point.Y - dLon;
+    var loc = {
+      X: mgLat,
+      Y: mgLon,
+    };
+    return loc;
+  },
+  transformLat(lat, lon) {
+    var ret =
+      -100.0 +
+      2.0 * lat +
+      3.0 * lon +
+      0.2 * lon * lon +
+      0.1 * lat * lon +
+      0.2 * Math.sqrt(Math.abs(lat));
+    ret +=
+      ((20.0 * Math.sin(6.0 * lat * Math.PI) + 20.0 * Math.sin(2.0 * lat * Math.PI)) * 2.0) / 3.0;
+    ret += ((20.0 * Math.sin(lon * Math.PI) + 40.0 * Math.sin((lon / 3.0) * Math.PI)) * 2.0) / 3.0;
+    ret +=
+      ((160.0 * Math.sin((lon / 12.0) * Math.PI) + 320 * Math.sin((lon * Math.PI) / 30.0)) * 2.0) /
+      3.0;
+    return ret;
+  },
+  transformLon(lat, lon) {
+    var ret =
+      300.0 + lat + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 * Math.sqrt(Math.abs(lat));
+    ret +=
+      ((20.0 * Math.sin(6.0 * lat * Math.PI) + 20.0 * Math.sin(2.0 * lat * Math.PI)) * 2.0) / 3.0;
+    ret += ((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) * 2.0) / 3.0;
+    ret +=
+      ((150.0 * Math.sin((lat / 12.0) * Math.PI) + 300.0 * Math.sin((lat / 30.0) * Math.PI)) *
+        2.0) /
+      3.0;
+    return ret;
+  },
+  lonLat2WebMercator(point) {
+    var mercator = {},
+      x = (point.lng * 20037508.34) / 180,
+      y = Math.log(Math.tan(((90 + point.lat) * Math.PI) / 360)) / (Math.PI / 180);
+    y = (y * 20037508.34) / 180;
+    mercator.x = x;
+    mercator.y = y;
+    return mercator;
+  },
+  webMercator2lonLat(point) {
+    var lonLat = {},
+      x = (point.X / 20037508.34) * 180;
+    y = (point.Y / 20037508.34) * 180;
+    y = (180 / Math.PI) * (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2);
+    lonLat.X = x;
+    lonLat.Y = y;
+    return lonLat;
+  },
+  getProcessPoints(points, tolerance) {
+    if (!points.length) {
+      //当points不是数组或没有值时，直接返回一个空数组
+      return [];
+    }
+    if (points.length < 3) return points; //小于3个点时不抽稀，因为1个或2个点无法进行抽稀
+    var firstPoint = 0,
+      lastPoint = points.length - 1; //取开始点与结束点的下标
+    var pointIndexsToKeep = []; //保存需要点下标的数组
+    pointIndexsToKeep.push(firstPoint);
+    pointIndexsToKeep.push(lastPoint); //开始与结束不进行处理，直接保留
+    while (
+      points[firstPoint][0] == points[lastPoint][0] &&
+      points[firstPoint][1] == points[lastPoint][1]
+    ) {
+      //处理闭合情况，闭合时，强制断开
+      lastPoint--;
+    }
+    this.reduce(points, firstPoint, lastPoint, tolerance, pointIndexsToKeep); //抽稀
+    var resultPoints = []; //返回的点数组
+    pointIndexsToKeep.sort(function (a, b) {
+      //排序，这个可排可不排
+      return a - b;
+    });
+    for (var i = 0; i < pointIndexsToKeep.length; i++) {
+      resultPoints.push(points[pointIndexsToKeep[i]]);
+    }
+    return resultPoints;
+  },
+  reduce(points, firstPoint, lastPoint, tolerance, pointIndexsToKeep) {
+    var maxDis = 0,
+      idxFarthest = 0; //定义最大长度及最远点的下标
+    for (var i = firstPoint, dis; i < lastPoint; i++) {
+      dis = this.perpendicularDistance(points[firstPoint], points[lastPoint], points[i]); //获取当前点到起点与
+      if (dis > maxDis) {
+        //保存最远距离
+        maxDis = dis;
+        idxFarthest = i;
+      }
+    }
+    if (maxDis > tolerance && idxFarthest != 0) {
+      //如果最远距离大于临界值
+      pointIndexsToKeep.push(idxFarthest);
+      this.reduce(points, firstPoint, idxFarthest, tolerance, pointIndexsToKeep);
+      this.reduce(points, idxFarthest, lastPoint, tolerance, pointIndexsToKeep);
+    }
+  },
+  perpendicularDistance(beginPoint, endPoint, comparePoint) {
+    var area = Math.abs(
+      0.5 *
+        (beginPoint[0] * endPoint[1] +
+          endPoint[0] * comparePoint[1] +
+          comparePoint[0] * beginPoint[1] -
+          endPoint[0] * beginPoint[1] -
+          comparePoint[0] * endPoint[1] -
+          beginPoint[0] * comparePoint[1]),
+    );
+    var bottom = Math.sqrt(
+      Math.pow(beginPoint[0] - endPoint[0], 2) + Math.pow(beginPoint[1] - endPoint[1], 2),
+    );
+    var height = (area / bottom) * 2;
+    return height;
+  },
+  getBounds(mapType) {
+    let bounds;
+    switch (mapType) {
+      default:
+        bounds = [
+          [-4710.6852773055, -43700.69435362797],
+          [-4710.6852773055, 10065103.18739793],
+          [20070490.956488788, 10065103.18739793],
+          [20070490.956488788, -43700.69435362797],
+          [-4710.6852773055, -43700.69435362797],
+        ];
+        break;
+    }
+    return bounds;
+  },
 };
 
 export { layerOperation, urlUtils, loadUtilMapModules, geomUtils, mapUtils };

packages/map/src/demos/createMap.jsx

@@ -5,12 +5,12 @@ export default class CreateMap extends React.Component {
   constructor(props) {
     super(props);
     this.mapManganerRef = React.createRef();
-    if (!window._config) {
-      window._config = {
-        site: '',
-        useCoverMap: true,
-      };
-    }
+    // if (!window._config) {
+    //   window._config = {
+    //     site: '',
+    //     useCoverMap: true,
+    //   };
+    // }
   }
 
   state = {
@@ -24,6 +24,7 @@ export default class CreateMap extends React.Component {
       .then((data) => data.json())
       .then((response) => {
         let data = response[0]['mapsettings'];
+        this.handleData(data);
         this.setState({
           mapsettings: data,
           loaded: true,
@@ -34,6 +35,24 @@ export default class CreateMap extends React.Component {
       });
   }
 
+  handleData = (data) => {
+    let areasettings = data.areasettings;
+    let layer = data.layers && data.layers[0];
+    if (layer) {
+      areasettings.areaName = layer.areaName ? layer.areaName : areasettings.areaName;
+      areasettings.backgroundColor = layer.backgroundColor
+        ? layer.backgroundColor
+        : areasettings.backgroundColor;
+      areasettings.backgroundOpacity = layer.backgroundOpacity
+        ? layer.backgroundOpacity
+        : areasettings.backgroundOpacity;
+      areasettings.boundColor = layer.boundColor ? layer.boundColor : areasettings.boundColor;
+      areasettings.boundWidth = layer.boundWidth ? layer.boundWidth : areasettings.boundWidth;
+      areasettings.extent = layer.extent ? layer.extent : areasettings.extent;
+      data.basemaps = layer.basemaps ? layer.basemaps : data.basemaps;
+    }
+  };
+
   render() {
     const { loaded, mapsettings } = this.state;
     return (

packages/map/src/index.js

 import React from 'react';
 import amapConfig from './config/amap';
-import { layerOperation, loadUtilMapModules, geomUtils, mapUtils } from './core/utils';
 import { Spin } from 'antd';
+import { layerOperation, loadUtilMapModules, geomUtils, mapUtils } from './core/utils';
 import {
   loadMapLayerModules,
   AMapTileLayer,
@@ -47,6 +47,7 @@ const modules = {
   SimpleLineSymbol: 'gis/symbols/SimpleLineSymbol',
   TextSymbol: 'gis/symbols/TextSymbol',
   Point: 'gis/geometry/Point',
+  request: 'gis/request',
 };
 
 @withModule(modules)
@@ -444,16 +445,296 @@ export default class Map extends React.Component {
         })
         .catch(() => new Error('加载高德地图资源失败'));
     } else {
+      let pipenetLayer = this.getPipenetLayer();
+      let url = pipenetLayer ? pipenetLayer.url : '';
+      const { request } = this.props.modules;
+      if (url && areasettings.areaName) {
+        request(url + '/GetMapArea', {
+          query: {
+            areaName: area[0],
+            outSR: mapUtils.getCurrentMapWkid(this.view),
+          },
+        })
+          .then(
+            function (r) {
+              if (r.data && r.data.length > 0) {
+                (this.polygon = []), (this.edge = []), (this.area = []), (this.bound = null);
+                r.data.forEach(
+                  function (point) {
+                    this.polygon.push([point.x, point.y]);
+                  }.bind(this),
+                );
+                this.edge.push(this.polygon);
+                this.mapsettings.useCoverMap && this.area.push(this.polygon);
+                this._setAreaLayer();
+              } else {
+                new Error('未查询到行政区数据');
+              }
+            }.bind(this),
+          )
+          .otherwise(
+            function (error) {
+              return new Error('未查询到行政区数据');
+            }.bind(this),
+          );
+      }
+    }
+  };
+
+  getAreaLayer = () => {
+    let areaName = this.mapsettings.areasettings.areaName;
+    if (!areaName) return new Error('未设置行政区域名称');
+    let districtSearch = new AMap.DistrictSearch({
+      // 关键字对应的行政区级别，country表示国家
+      level: mapUtils.getAreaLevel(areaName),
+      //  显示下级行政区级数，1表示返回下一级行政区
+      subdistrict: 0,
+      extensions: 'all',
+    });
+    let area = areaName.split(',');
+    (this.edge = []), (this.area = []);
+    districtSearch.search(
+      area[0],
+      function (status, result) {
+        // 查询成功时，result即为对应的行政区信息
+        this.extent.xmin = this.extent.ymin = this.extent.xmax = this.extent.ymax = 0;
+        if (result.districtList && result.districtList.length > 0) {
+          result.districtList.forEach(
+            function (place) {
+              if (place.boundaries.length > 0 && place.name.indexOf(area[0]) == 0) {
+                place.boundaries.forEach(
+                  function (data) {
+                    this.polygon = [];
+                    data.forEach(
+                      function (point) {
+                        let clonePoint = point;
+                        // 若当前坐标wkid 为1021130 则需要转换为wgs84
+                        if (mapUtils.getCurrentMapWkid(this.view) == '1021130') {
+                          let transPoint = mapUtils.gcj2wgs({
+                            Y: point.lng,
+                            X: point.lat,
+                          });
+                          clonePoint = {
+                            lng: transPoint.Y,
+                            lat: transPoint.X,
+                          };
+                        }
+                        var points = mapUtils.lonLat2WebMercator(clonePoint);
+                        this.extent.xmin = this.extent.xmin == 0 ? points.x : this.extent.xmin;
+                        this.extent.xmin =
+                          points.x < this.extent.xmin ? points.x : this.extent.xmin;
+                        this.extent.ymin = this.extent.ymin == 0 ? points.y : this.extent.ymin;
+                        this.extent.ymin =
+                          points.y < this.extent.ymin ? points.y : this.extent.ymin;
+                        this.extent.xmax = this.extent.xmax == 0 ? points.x : this.extent.xmax;
+                        this.extent.xmax =
+                          points.x > this.extent.xmax ? points.x : this.extent.xmax;
+                        this.extent.ymax = this.extent.ymax == 0 ? points.y : this.extent.ymax;
+                        this.extent.ymax =
+                          points.y > this.extent.ymax ? points.y : this.extent.ymax;
+                        this.polygon.push([points.x, points.y]);
+                      }.bind(this),
+                    );
+                    this.polygon = mapUtils.getProcessPoints(this.polygon, 100);
+                    this.edge.push(this.polygon);
+                    this.mapsettings.useCoverMap && this.area.push(this.polygon);
+                  }.bind(this),
+                );
+              }
+            }.bind(this),
+          );
+          if (this.edge.length > 0 && !this.coreArea) {
+            this.bound = null;
+            this._setAreaLayer();
+          }
+        } else {
+          if (this.mapsettings.areasettings.extent) this.setExtent();
+        }
+      }.bind(this),
+    );
+  };
+
+  _setAreaLayer = () => {
+    const {
+      GraphicsLayer,
+      Graphic,
+      SimpleFillSymbol,
+      SimpleLineSymbol,
+      Color,
+    } = this.props.modules;
+    let scale = 1,
+      useCoverMap = this.mapsettings,
+      areasettings = this.mapsettings.areasettings;
+    let basemapId = this.view.map.basemap && this.view.map.basemap.id;
+    this.AreaLayerSum = [];
+    this.clearAreaLayer();
+    if (basemapId && typeof this.mapsettings.areasettings.areaName !== '') {
+      if (!this.areaLayer) {
+        this.boundLayer = new GraphicsLayer({
+          order: 'boundLayer',
+          visible: false,
+        });
+        this.AreaLayerSum.push(this.boundLayer);
+        this.view.map.add(this.boundLayer); //行政分区图层
+        this.areaLayer = new GraphicsLayer({
+          order: 'areaLayer',
+          visible: false,
+        });
+        useCoverMap && this.AreaLayerSum.push(this.areaLayer);
+        useCoverMap && this.view.map.add(this.areaLayer); //行政分区图层
+      }
+      if (!this.graphics) {
+        this.graphics = [];
+        var cover = new Graphic();
+        var geometry = {
+          hasM: 'false',
+          hasZ: 'false',
+          rings: this.area,
+          spatialReference: {
+            wkid: 4526,
+          },
+        };
+        if (!this.bound) {
+          this.bound = mapUtils.getBounds(basemapId);
+          geometry.rings.push(this.bound);
+        }
+        cover.geometry = geomUtils.toGeometry(geometry, this.view);
+        let color = Color.fromHex(
+          areasettings && areasettings.backgroundColor != ''
+            ? areasettings.backgroundColor
+            : '#000',
+        );
+        cover.symbol = new SimpleFillSymbol({
+          color: color,
+          style: 'solid',
+          join: 'round',
+          outline: {
+            width: 0,
+            cap: 'round',
+            join: 'round',
+          },
+        });
+        let edge = new Graphic();
+        edge.geometry = geomUtils.toGeometry(
+          {
+            hasM: 'false',
+            hasZ: 'false',
+            rings: this.edge,
+            spatialReference: {
+              wkid: 4526,
+            },
+          },
+          this.view,
+        );
+        edge.symbol = new SimpleLineSymbol({
+          color:
+            areasettings && areasettings.boundColor != '' ? areasettings.boundColor : '#87fff4',
+          width: areasettings && areasettings.boundWidth ? areasettings.boundWidth : 15 * scale,
+          style: 'solid',
+          join: 'round',
+          outline: {
+            width: 0,
+            cap: 'round',
+            join: 'round',
+          },
+        });
+        this.graphics.push(cover);
+        this.areaLayer.addMany(this.graphics);
+        this.boundLayer.addMany([edge]);
+        let opacity =
+          areasettings && areasettings.backgroundOpacity !== ''
+            ? areasettings.backgroundOpacity
+            : 0.5;
+        this.changeBackgroundOpacity(opacity);
+        if (
+          this.map.basemap &&
+          this.map.basemap.baseLayers &&
+          this.map.basemap.baseLayers.items &&
+          this.map.basemap.baseLayers.items[0]
+        ) {
+          this.showCover();
+          this.setExtent();
+        } else {
+          this.showPipeNetLayer();
+        }
+      }
+    } else {
+      new Error('底图未能正确加载，请检查运维配置');
+    }
+  };
+
+  setExtent = () => {
+    let geom = null,
+      areasettings = this.mapsettings.areasettings;
+    let extent = areasettings.extent;
+    let targetGeometry = this.mapsettings.viewpoint.targetGeometry;
+    if (extent) {
+      [this.extent.min, this.extent.ymin, this.extent.xmax, this.extent.ymax] = _.split(
+        extent,
+        ',',
+      );
+      geom = this.initialViewpoint.targetGeometry = geomUtils.toGeometry(this.extent, this.view);
+    } else {
+      if (
+        targetGeometry.xmin == targetGeometry.ymin &&
+        targetGeometry.xmax == targetGeometry.ymax &&
+        targetGeometry.ymin == targetGeometry.xmax
+      ) {
+        geom = this.initialViewpoint.targetGeometry = geomUtils.toGeometry(this.extent, this.view);
+      }
+    }
+    if (geom) {
+      if (geom && !(geom.xmin == 0 && geom.ymin == 0 && geom.xmax == 0 && geom.ymax == 0)) {
+        if (geom.type == 'extent') {
+          var scale = mapUtils.getNearestScale(geom.clone(), this.view);
+          if (scale != -1) {
+            this.initialViewpoint.scale = scale;
+          }
+        }
+      } else {
+        this.initialViewpoint.scale = this.view.scale;
+      }
+      if (
+        !this.areaLayerInit &&
+        areasettings &&
+        areasettings.areaName.toLowerCase().indexOf('offlinearea') > -1
+      ) {
+        this.view.extent = this.initialViewpoint.targetGeometry.extent;
+        this.view.scale = this.initialViewpoint.scale;
+      }
+      this.view.goTo(this.initialViewpoint);
+      this.showPipeNetLayer();
     }
+    this.showPipeNetLayer();
+  };
+
+  clearAreaLayer = () => {
+    this.graphics = this.poi = null;
+    this.areaLayer && this.areaLayer.removeAll() && this.view.map.remove(this.areaLayer); //行政区图层
+    this.boundLayer && this.boundLayer.removeAll() && this.view.map.remove(this.boundLayer);
+    this.areaLayer = null; //行政区图层
+    this.boundLayer = null;
   };
 
-  getAreaLayer = () => {};
+  changeBackgroundOpacity = (opacity) => {
+    if (this.areaLayer) this.areaLayer.opacity = parseFloat(opacity);
+  };
+
+  showCover = () => {
+    this.AreaLayerSum &&
+      this.AreaLayerSum.forEach(
+        function (layer) {
+          layer.visible = true;
+        }.bind(this),
+      );
+  };
 
   createLayer = (config, collection, returnLayer, mapType) => {
     let layer,
       layers = [];
     let proxyUrl, configString, configv, configva, configi, configia;
     let layerType = config.layerType.toLowerCase();
+    let _config = window._config || {};
     const {
       TileLayer,
       MapImageLayer,
@@ -484,6 +765,7 @@ export default class Map extends React.Component {
                 layer.title,
                 layer.url,
                 config.visible,
+                _config,
               );
             }
           }.bind(this),
@@ -676,12 +958,10 @@ export default class Map extends React.Component {
 
   getLayerUrl = (url) => {
     if (!url) return '';
-    let protocol = location.protocol;
-    let host = location.host;
-    return `${protocol}${host}/${url}`;
+    return `${origin}/${url}`;
   };
 
-  addAnnotationLayer = (title, url, visible) => {
+  addAnnotationLayer = (title, url, visible, _config) => {
     let query = url.split('?')[1];
     const { MapImageLayer } = this.props.modules;
     url += query ? '&annotation=true' : 'annotation=true';