hy-dispatch-ui-v3 0.2.53 → 0.2.54

package/lib/utils/map/hook/bigMap.js

@@ -0,0 +1,1140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var L = require('leaflet');
+var events = require('events');
+var webgis = require('../js/webgis.js');
+var mapProxy = require('../js/mapProxy.js');
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const CIRCLE_SEGMENTS = 36;
+function remToPx(rem) {
+  const rootFontSize = parseFloat(
+    getComputedStyle(document.documentElement).fontSize
+  );
+  return rem * rootFontSize;
+}
+function rangingStartIconOption(options, dicId) {
+  return {
+    html: `<div style="width:32px;height:32px;border-radius:9999px;background-color:${options.labelColor || "#2df2ff3f"};display:flex;justify-content:center;align-items:center;position:relative;">
+              <div style="width:12px;height:12px;border-radius:9999px;background-color:${options.labelFillColor || "#fff"};border:1px solid ${options.lineColor || "#2df2ff"};"></div>
+              <div style="position:absolute;left:0;top:32px;padding-left:4px;padding-right:4px;font-size:12px;line-height:16px;background-color:#fff;border:1px solid #000;color:#000;white-space:nowrap;">\u8D77\u70B9
+              <i data-id="${dicId}" class="el-icon-close"></i></div>
+            </div>`,
+    className: "my-div-icon",
+    iconSize: [remToPx(2), remToPx(2)],
+    iconAnchor: [remToPx(1), remToPx(1)]
+  };
+}
+function rangingPointIconOption(options, distance, dicId, showDeleteAll = false) {
+  return {
+    html: `<div style="width:12px;height:12px;border-radius:9999px;background-color:${options.labelFillColor || "#fff"};border:1px solid ${options.lineColor || "#2df2ff"};position:relative;">
+              <div style="position:absolute;left:0;top:12px;padding-left:4px;padding-right:4px;font-size:12px;line-height:16px;background-color:#fff;border:1px solid #000;color:#000;white-space:nowrap;">${distance}km
+                <i data-id="${dicId}" class="el-icon-close"></i>
+                ${showDeleteAll ? '<i data-id="delete-all" class="el-icon-delete"></i>' : ""}
+              </div>
+            </div>`,
+    className: "my-div-icon",
+    iconSize: [remToPx(0.75), remToPx(0.75)],
+    iconAnchor: [remToPx(0.375), remToPx(0.375)]
+  };
+}
+function circleToPolygonPoints(center, radius, asObject = false) {
+  const points = [];
+  const angleStep = Math.PI * 2 / CIRCLE_SEGMENTS;
+  for (let i = 0; i < CIRCLE_SEGMENTS; i++) {
+    const angle = angleStep * i;
+    const lat = center.lat + radius * Math.cos(angle) / 111.32;
+    const lng = center.lng + radius * Math.sin(angle) / (111.32 * Math.cos(center.lat * Math.PI / 180));
+    points.push(asObject ? { lat, lng } : [lat, lng]);
+  }
+  return points;
+}
+const generalMapMethods = {
+  // 导入到地图里面
+  getBounds: function(target) {
+    const bounds = target.getBounds();
+    let southWest = bounds.getSouthWest();
+    let northEast = bounds.getNorthEast();
+    let center = bounds.getCenter();
+    bounds.getSouthWest = function() {
+      const { lat, lng } = latAndLngCheck(southWest);
+      return { lat, lng };
+    };
+    bounds.getNorthEast = function() {
+      const { lat, lng } = latAndLngCheck(northEast);
+      return { lat, lng };
+    };
+    bounds.getCenter = function() {
+      const { lat, lng } = latAndLngCheck(center);
+      return { lat, lng };
+    };
+    return bounds;
+  },
+  getMap: function(map) {
+    return mapProxy.createMapProxy(map, {
+      getCenter: function(target) {
+        const center = target.getCenter();
+        const { lng, lat } = latAndLngCheck(center);
+        return { lat, lng };
+      }
+    });
+  },
+  // 导出到外面
+  getBoundsExport: function(target) {
+    const bounds = target.getBounds();
+    let southWest = bounds.getSouthWest();
+    let northEast = bounds.getNorthEast();
+    let center = bounds.getCenter();
+    bounds.getSouthWest = function() {
+      const { lat, lng } = latAndLngCheckExport(southWest);
+      return { lat, lng };
+    };
+    bounds.getNorthEast = function() {
+      const { lat, lng } = latAndLngCheckExport(northEast);
+      return { lat, lng };
+    };
+    bounds.getCenter = function() {
+      const { lat, lng } = latAndLngCheckExport(center);
+      return { lat, lng };
+    };
+    return bounds;
+  }
+};
+function latAndLngCheck(item) {
+  const type = Array.isArray(item);
+  if (type) {
+    return webgis.importCoordinate({
+      lat: item[0],
+      lng: item[1]
+    });
+  } else {
+    return webgis.importCoordinate({
+      lat: item.lat,
+      lng: item.lng
+    });
+  }
+}
+function latAndLngCheckExport(item) {
+  const type = Array.isArray(item);
+  if (type) {
+    return webgis.exportCoordinate({
+      lat: item[0],
+      lng: item[1]
+    });
+  } else {
+    return webgis.exportCoordinate({
+      lat: item.lat,
+      lng: item.lng
+    });
+  }
+}
+function latLngListCheck(dataList = []) {
+  const newDataList = [];
+  for (let i = 0; i < dataList.length; i++) {
+    const item = dataList[i];
+    const type = Array.isArray(item);
+    let { lat, lng } = latAndLngCheck(item);
+    if (type) {
+      newDataList.push([lat, lng]);
+    } else {
+      newDataList.push({
+        ...item,
+        lat,
+        lng
+      });
+    }
+  }
+  return newDataList;
+}
+function latLngListCheckExport(dataList = []) {
+  const newDataList = [];
+  for (let i = 0; i < dataList.length; i++) {
+    const item = dataList[i];
+    const type = Array.isArray(item);
+    let { lat, lng } = latAndLngCheckExport(item);
+    if (type) {
+      newDataList.push([lat, lng]);
+    } else {
+      newDataList.push({
+        ...item,
+        lat,
+        lng
+      });
+    }
+  }
+  return newDataList;
+}
+class bigMap extends events.EventEmitter {
+  constructor(request) {
+    super();
+    // 绘画多边形覆盖物
+    __publicField(this, "Polygon", (pathList = [], option) => {
+      if (pathList && pathList.length !== 0) {
+        pathList = latLngListCheck(pathList);
+      }
+      const polygon = new this.BM.Polygon([pathList], option);
+      const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+      const handlers = {
+        addTo: function(target, map) {
+          return target.addTo(generalMapMethods.getMap(map));
+        },
+        // 修改位置
+        getBounds: function(target) {
+          return generalMapMethods.getBoundsExport(target);
+        },
+        getLatLngs: function(target) {
+          const latLngList = target.getLatLngs();
+          const item = JSON.parse(JSON.stringify(latLngList[0]));
+          return [latLngListCheckExport([...item])];
+        },
+        on: function(target, types, fn, context) {
+          if (types === "click") {
+            const customClickHandler = (e) => {
+              const newEvent = { ...e };
+              const { lat, lng } = latAndLngCheckExport(newEvent.latlng);
+              newEvent.latlng = L.latLng(lat, lng);
+              fn.call(context || target, newEvent);
+            };
+            wrappedHandlers.remember(types, fn, customClickHandler);
+            return target.on(types, customClickHandler, context);
+          }
+          return target.on(types, fn, context);
+        },
+        off: function(target, types, fn, context) {
+          const wrappedFn = wrappedHandlers.take(types, fn);
+          return target.off(types, wrappedFn || fn, context);
+        }
+      };
+      return mapProxy.createMapProxy(polygon, handlers);
+    });
+    this.initParams = request;
+  }
+  // 初始化地图
+  InitMap(domId, option) {
+    this.BM = this.initParams.BM;
+    this.BM.Config.HTTP_URL = this.initParams.bmHttpsUrl;
+    this.BM.Config.HTTPS_URL = this.initParams.bmHttpsUrl;
+    const { center } = option;
+    const { lat, lng } = latAndLngCheck([center.lat, center.lng]);
+    const crsJons = {};
+    if (this.initParams.crs) {
+      crsJons.crs = this.BM.CRS[`${this.initParams.crs}`];
+    }
+    const load = () => {
+      if (option.completeCallbacks) {
+        option.completeCallbacks();
+      }
+    };
+    const newMap = this.BM.map(domId, this.initParams.bmUiName, {
+      ...crsJons,
+      center: [lat, lng],
+      minZoom: option.minZoom,
+      maxZoom: option.maxZoom,
+      zoom: option.zoom,
+      zoomControl: false,
+      attributionControl: false,
+      load: load()
+    });
+    const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+    const handlers = {
+      // 获取原始地图实例（不经过代理）
+      getRawMap: function(target) {
+        return target;
+      },
+      // 删除地图
+      removeMap: function(target, params) {
+        if (!params) {
+          target.remove();
+          target.off();
+        }
+      },
+      fitBounds: function(target, params) {
+        if (!Array.isArray(params)) {
+          params = [params];
+        }
+        const fitBoundsList = params.map(
+          (item) => mapProxy.createMapProxy(item, {
+            getBounds: (boundsTarget) => generalMapMethods.getBounds(boundsTarget)
+          })
+        );
+        return target.fitBounds(fitBoundsList);
+      },
+      // 获取中心点
+      getCenter: function(target) {
+        const center2 = target.getCenter();
+        return latAndLngCheckExport(center2);
+      },
+      // 四个角
+      getBounds: function(target) {
+        const bounds = target.getBounds();
+        let southWest = bounds.getSouthWest();
+        let northEast = bounds.getNorthEast();
+        bounds.getSouthWest = function() {
+          return latAndLngCheckExport(southWest);
+        };
+        bounds.getNorthEast = function() {
+          return latAndLngCheckExport(northEast);
+        };
+        return bounds;
+      },
+      // 移动至目标位置
+      panTo: function(target, center2, options) {
+        const { lat: lat2, lng: lng2 } = latAndLngCheck(center2);
+        return target.panTo({ lat: lat2, lng: lng2 }, options);
+      },
+      // 移动至目标位置并缩放图层
+      setView: function(target, center2, zoom, options) {
+        const { lat: lat2, lng: lng2 } = latAndLngCheck(center2);
+        return target.setView({ lat: lat2, lng: lng2 }, zoom, options);
+      },
+      // 自定义地图
+      on: function(target, types, fn, context) {
+        if (types === "click") {
+          const customClickHandler = (e) => {
+            const newEvent = { ...e };
+            newEvent.latlng = latAndLngCheckExport(newEvent.latlng);
+            fn.call(context || target, newEvent);
+          };
+          wrappedHandlers.remember(types, fn, customClickHandler);
+          return target.on(types, customClickHandler, context);
+        } else if (types === "pm:create") {
+          const customClickHandler = (e) => {
+            const newEvent = { ...e };
+            const bounds = newEvent.layer.getBounds();
+            if (!newEvent.layer.getLatLngs) {
+              newEvent.layer.getLatLngs = () => {
+                const circle = newEvent.layer;
+                const points = circleToPolygonPoints(
+                  circle.getLatLng(),
+                  circle.getRadius() / 1e3,
+                  true
+                );
+                return [latLngListCheckExport(points)];
+              };
+            } else {
+              const latLngList = newEvent.layer.getLatLngs();
+              newEvent.layer.getLatLngs = () => {
+                const item = JSON.parse(JSON.stringify(latLngList[0]));
+                return [latLngListCheckExport([...item])];
+              };
+            }
+            newEvent.layer.getBounds = () => {
+              let southWest = bounds.getSouthWest();
+              let northEast = bounds.getNorthEast();
+              bounds.getSouthWest = function() {
+                return latAndLngCheckExport(southWest);
+              };
+              bounds.getNorthEast = function() {
+                return latAndLngCheckExport(northEast);
+              };
+              return bounds;
+            };
+            fn.call(context || target, newEvent);
+          };
+          wrappedHandlers.remember(types, fn, customClickHandler);
+          return target.on(types, customClickHandler, context);
+        }
+        return target.on(types, fn, context);
+      },
+      off: function(target, types, fn, context) {
+        const wrappedFn = wrappedHandlers.take(types, fn);
+        return target.off(types, wrappedFn || fn, context);
+      }
+    };
+    return mapProxy.createMapProxy(newMap, handlers);
+  }
+  // 地图图层
+  layerGroup(map, markers = []) {
+    const layerGroup = this.BM.layerGroup(markers);
+    layerGroup.addTo(map);
+    return layerGroup;
+  }
+  // 自定义图标
+  DivIcon(option) {
+    option = {
+      ...option,
+      html: option.html,
+      className: option.className,
+      iconSize: option.iconSize,
+      iconAnchor: option.iconAnchor
+    };
+    return this.BM.divIcon(option);
+  }
+  // 生成 marker
+  Marker(markerOptions) {
+    const { position = {} } = markerOptions;
+    markerOptions = {
+      ...markerOptions,
+      position: [position.lat, position.lng],
+      icon: markerOptions.icon,
+      pane: markerOptions.pane || "markerPane"
+    };
+    if (markerOptions.position && markerOptions.position.length !== 0) {
+      const { lat, lng } = latAndLngCheck(markerOptions.position);
+      markerOptions.position = [lat, lng];
+    }
+    const marker = new this.BM.marker(markerOptions.position, markerOptions);
+    marker.getInitMarker = () => {
+      return marker;
+    };
+    marker.extData = markerOptions.extData || null;
+    const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+    const handlers = {
+      getLatLng: function(target) {
+        const latlng = target.getLatLng();
+        const { lat, lng } = latAndLngCheckExport(latlng);
+        return { lat, lng };
+      },
+      // 更改标记位置。
+      setLatLng: function(target, lngAndLat) {
+        const { lat, lng } = latAndLngCheck(lngAndLat);
+        target.setLatLng([lat, lng]);
+      },
+      // 更改标记图标。
+      setIcon: function(target, iconParams) {
+        target.setIcon(iconParams.divIcon);
+      },
+      on: function(target, types, fn, context) {
+        if (types === "click") {
+          const customClickHandler = (e) => {
+            const newEvent = { ...e, originEvent: e.originalEvent };
+            const { lat, lng } = latAndLngCheckExport(newEvent.latlng);
+            newEvent.latlng = { lat, lng };
+            fn.call(context || target, newEvent);
+          };
+          wrappedHandlers.remember(types, fn, customClickHandler);
+          return target.on(types, customClickHandler, context);
+        }
+        return target.on(types, fn, context);
+      },
+      off: function(target, types, fn, context) {
+        const wrappedFn = wrappedHandlers.take(types, fn);
+        return target.off(types, wrappedFn || fn, context);
+      }
+    };
+    return mapProxy.createMapProxy(marker, handlers);
+  }
+  // 生成 聚合点
+  MarkerClusterGroup(map, markerList, option) {
+    option = {
+      showCoverageOnHover: false,
+      zoomToBoundsOnClick: true,
+      removeOutsideVisibleBounds: true,
+      spiderfyDistanceMultiplier: 1,
+      spiderLegPolylineOptions: { weight: 1, color: "#5E9DB4", opacity: 1 },
+      ...option,
+      iconCreateFunction: option.iconCreateFunction,
+      disableClusteringAtZoom: option.disableClusteringAtZoom,
+      maxClusterRadius: option.maxClusterRadius
+    };
+    const displayCluster = new this.BM.MarkerClusterGroup(option);
+    map.addLayer(displayCluster);
+    const toNativeMarkers = (list = []) => {
+      const markers = Array.isArray(list) ? list : [list];
+      return markers.map(
+        (marker) => marker?.getInitMarker ? marker.getInitMarker() : marker
+      ).filter(Boolean);
+    };
+    const handlers = {
+      remove: function(target) {
+        target.remove();
+      },
+      removeLayers: function(target, markerList2 = []) {
+        target.removeLayers(toNativeMarkers(markerList2));
+      },
+      addLayers: function(target, markerList2 = []) {
+        target.addLayers(toNativeMarkers(markerList2));
+      }
+    };
+    const newDisplayCluster = mapProxy.createMapProxy(displayCluster, handlers);
+    newDisplayCluster.addLayers(markerList);
+    return newDisplayCluster;
+  }
+  // 绘画圆
+  Circle(latLngList = {}, option = {}) {
+    option = {
+      ...option,
+      radius: option.radius,
+      color: option.color,
+      opacity: option.opacity,
+      weight: option.weight,
+      fillColor: option.fillColor,
+      fillOpacity: option.fillOpacity
+    };
+    const { lat, lng } = latAndLngCheck(latLngList);
+    latLngList = [lat, lng];
+    const circle = new this.BM.Circle(latLngList, option);
+    const handlers = {
+      // 添加到地图
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      },
+      // 修改位置
+      getBounds: function(target) {
+        return generalMapMethods.getBoundsExport(target);
+      },
+      // 圆形转多边形坐标
+      getLatLngs: function(target) {
+        const points = circleToPolygonPoints(
+          target.getLatLng(),
+          target.getRadius() / 1e3
+        );
+        return [latLngListCheckExport(points)];
+      }
+    };
+    return mapProxy.createMapProxy(circle, handlers);
+  }
+  // 自定义 popup
+  Popup(option) {
+    option = {
+      closeButton: false,
+      ...option
+    };
+    const popup = new this.BM.Popup(option);
+    const handlers = {
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      },
+      // 修改位置
+      getBounds: function(target) {
+        return generalMapMethods.getBoundsExport(target);
+      },
+      // 修改位置
+      setLatLng: function(target, latLngList) {
+        if (latLngList && latLngList.length !== 0) {
+          latLngList = latAndLngCheck(latLngList);
+        }
+        return target.setLatLng(latLngList);
+      }
+    };
+    return mapProxy.createMapProxy(popup, handlers);
+  }
+  // 自定义 线条
+  Polyline(latLngList = [], option = {}) {
+    if (latLngList && latLngList.length !== 0) {
+      latLngList = latLngListCheck(latLngList);
+    }
+    const polyline = this.BM.polyline(latLngList, option);
+    const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+    const handlers = {
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      },
+      // 修改位置
+      getBounds: function(target) {
+        return generalMapMethods.getBoundsExport(target);
+      },
+      on: function(target, types, fn, context) {
+        if (types === "click") {
+          const customClickHandler = (e) => {
+            const newEvent = { ...e };
+            const { lat, lng } = latAndLngCheckExport(newEvent.latlng);
+            newEvent.latlng = { lat, lng };
+            fn.call(context || target, newEvent);
+          };
+          wrappedHandlers.remember(types, fn, customClickHandler);
+          return target.on(types, customClickHandler, context);
+        }
+        return target.on(types, fn, context);
+      },
+      off: function(target, types, fn, context) {
+        const wrappedFn = wrappedHandlers.take(types, fn);
+        return target.off(types, wrappedFn || fn, context);
+      }
+    };
+    return mapProxy.createMapProxy(polyline, handlers);
+  }
+  // 轨迹回放
+  TrackPlayer(latLngList = [], option = {}, map = null) {
+    let monitorTrack = null;
+    let speed = option.speed;
+    let polyline = this.Polyline(latLngList, {
+      color: option.notPassedLineColor || "#FF1875",
+      // 线颜色
+      weight: 4
+    }).addTo(map);
+    let passedPolyline = this.Polyline([], {
+      color: option.passedLineColor || "#2EE19E",
+      // 线颜色
+      weight: 4
+    }).addTo(map);
+    let marker = this.Marker({
+      position: latLngList[0],
+      icon: this.DivIcon({
+        html: option.svgContent,
+        className: "my-div-icon",
+        iconSize: option.iconSize || 0,
+        iconAnchor: option.iconAnchor || 0
+      })
+    }).addTo(map);
+    marker.on("update_position", (e) => {
+      passedPolyline.setLatLngs(e.path);
+      if (monitorTrack) {
+        clearTimeout(monitorTrack);
+      }
+      monitorTrack = setTimeout(() => {
+        if (option.onEnd) option.onEnd();
+      }, 500);
+    });
+    map.setView(latLngList[0], 18);
+    const moveAlong = () => {
+      if (!marker) return;
+      marker.moveAlong(latLngList, speed / 3.6, {
+        replay: false
+      });
+    };
+    const handlers = {
+      // 开始
+      startAnimation: function() {
+        moveAlong();
+      },
+      // 暂停
+      pauseAnimation: function() {
+        if (marker) {
+          marker.pauseMove();
+          if (monitorTrack) {
+            clearTimeout(monitorTrack);
+          }
+        }
+      },
+      // 恢复
+      resumeAnimation: function() {
+        if (marker) {
+          marker.resumeMove();
+        }
+      },
+      // 修改速度
+      motionSpeed: function(target, changeSpeed) {
+        speed = changeSpeed;
+        moveAlong();
+      },
+      // 移除轨迹回放
+      removeTrackPlayer: function() {
+        marker.remove();
+        polyline.remove();
+        passedPolyline.remove();
+        marker = null;
+        polyline = null;
+        passedPolyline = null;
+        if (monitorTrack) {
+          clearTimeout(monitorTrack);
+          monitorTrack = null;
+        }
+      }
+    };
+    return mapProxy.createMapProxy(marker, handlers);
+  }
+  /**
+   *
+   * @param {*} pmType 创建绘画工具 rectangle 正方形 circle 圆形 polygon 多边形
+   * @param {*} options circleClick 解决直接点击时圆形绘制无效问题，绘制电子围栏时为false防止与定点绘制冲突
+   * @param {*} map 地图实例
+   * @returns
+   */
+  CreatePm(pmType = "rectangle", options = { circleClick: true }, map) {
+    const rawMap = map.getRawMap ? map.getRawMap() : map;
+    const Draw = {};
+    Draw.draw = {
+      rectangle: new this.BM.Draw.Rectangle(rawMap),
+      circle: new this.BM.Draw.Circle(rawMap),
+      polygon: new this.BM.Draw.Polygon(rawMap)
+    };
+    let mouseToolName = pmType;
+    Draw.draw[`${pmType}`].enable();
+    Draw.current = pmType;
+    let layer = null;
+    let isEnd = false;
+    rawMap.on(this.BM.Draw.Event.CREATED, (e) => {
+      isEnd = true;
+      layer = e.layer;
+      if (!layer._latlngs) {
+        const center = latAndLngCheckExport(layer.getLatLng());
+        layer._latlngs = [
+          circleToPolygonPoints(center, layer.getRadius() / 1e3, true)
+        ];
+      } else {
+        layer._latlngs[0] = latLngListCheckExport(layer._latlngs[0]);
+      }
+      layer.addTo(rawMap);
+      if (options.onChange) {
+        options.onChange(layer._latlngs[0]);
+      }
+    });
+    const mapClick = () => {
+      if (mouseToolName === "circle" && !isEnd) {
+        Draw.draw[`${mouseToolName}`].disable();
+        setTimeout(() => {
+          Draw.draw[`${mouseToolName}`].enable();
+          Draw.current = mouseToolName;
+        });
+      }
+      isEnd = false;
+    };
+    if (options.circleClick) {
+      map.on("click", mapClick);
+    }
+    const handlers = {
+      remove: function(target) {
+        Draw.draw.rectangle.disable();
+        Draw.draw.circle.disable();
+        Draw.draw.polygon.disable();
+        rawMap.off(BM.Draw.Event.CREATED);
+        Draw.draw = null;
+        mouseToolName = null;
+        layer?.remove();
+        layer = null;
+        map.off("click", mapClick);
+      },
+      close: function(target) {
+        layer?.remove();
+        if (mouseToolName) {
+          Draw.draw[`${mouseToolName}`].disable();
+        }
+      },
+      setMouseTool: function(target, toolType) {
+        if (mouseToolName) {
+          Draw.draw[`${mouseToolName}`].disable();
+        }
+        setTimeout(() => {
+          mouseToolName = toolType;
+          Draw.draw[`${mouseToolName}`].enable();
+          Draw.current = mouseToolName;
+          isEnd = false;
+        });
+      }
+    };
+    return mapProxy.createMapProxy({}, handlers);
+  }
+  // 电子围栏
+  CreateFence(pmType = "rectangle", options = {}, map) {
+    let polygon = null;
+    const clearPolygon = () => {
+      if (polygon) {
+        polygon.remove();
+        polygon = null;
+      }
+    };
+    const setPolygon = (pointList) => {
+      clearPolygon();
+      polygon = this.Polygon(pointList, {
+        ...options,
+        fillColor: options.fillColor || "#00b0ff",
+        fillOpacity: options.fillOpacity || 0.5,
+        color: options.color || "#80d8ff",
+        weight: options.weight || 4,
+        opacity: options.opacity || 1,
+        zIndex: options.zIndex || 1e6
+      });
+      polygon.addTo(map);
+      map.fitBounds(polygon.getBounds());
+      polygon.editing.enable();
+      pm.close();
+    };
+    const onChange = (pointList) => {
+      setPolygon(latLngListCheck(pointList));
+    };
+    const pm = this.CreatePm(
+      pmType,
+      {
+        ...options,
+        onChange,
+        circleClick: false
+      },
+      map
+    );
+    pm.close();
+    const handlers = {
+      getPath: function() {
+        return polygon ? polygon.getLatLngs()[0] : [];
+      },
+      // 定点绘制（radius 为直径，故取半）
+      setFixedPoint: function(target, { lnglat, radius }) {
+        setPolygon(circleToPolygonPoints(lnglat, radius / 2e3));
+      },
+      setPolygon: function(target, pointList) {
+        setPolygon(latLngListCheck(pointList));
+      },
+      startDraw: function(target, toolType = "rectangle") {
+        clearPolygon();
+        target.setMouseTool(toolType);
+      },
+      clearDraw: function() {
+        clearPolygon();
+      },
+      remove: function(target) {
+        clearPolygon();
+        target.close(true);
+        target.remove();
+      },
+      close: function(target) {
+        target.close(true);
+      },
+      setMouseTool: function(target, toolType) {
+        target.setMouseTool(toolType);
+      }
+    };
+    return mapProxy.createMapProxy(pm, handlers);
+  }
+  // 测距工具 labelColor labelFillColor lineColor
+  RangingTool(options = {}, map) {
+    let rangingMarker = [];
+    let rangingPolylines = [];
+    let rangingPointsIng = [];
+    let rangingPointsEnd = [];
+    let rangingTrun = false;
+    const _this = this;
+    function rangingClick(res) {
+      setRangingTrun(res.latlng);
+    }
+    function calcTotalDistance(index, preIndex) {
+      const current = rangingMarker[index].options.extData.latlng;
+      const previous = rangingMarker[preIndex].options.extData.latlng;
+      const distance = parseFloat(
+        (map.distance(current, previous) / 1e3).toFixed(2)
+      );
+      const total = parseFloat(
+        rangingMarker[preIndex].options.extData.distance || 0
+      );
+      return (distance + total).toFixed(2);
+    }
+    function removeLineBetween(groupIndex, aIndex, bIndex) {
+      const latlngOne = rangingMarker[aIndex]?.options?.extData?.latlng;
+      const latlngTwo = rangingMarker[bIndex]?.options?.extData?.latlng;
+      const polygonIndex = rangingPolylines.findIndex((v) => {
+        const extData = v.options.extData;
+        return groupIndex === extData.index && extData.latlngs === "" + latlngOne.lat + latlngOne.lng + latlngTwo.lat + latlngTwo.lng;
+      });
+      rangingPolylines[polygonIndex] && rangingPolylines[polygonIndex].remove();
+      rangingPolylines.splice(polygonIndex, 1);
+    }
+    function setStartIcon(index) {
+      const markerItem = rangingMarker[index];
+      markerItem.setIcon({
+        divIcon: _this.DivIcon(
+          rangingStartIconOption(options, markerItem.options.extData.dicId)
+        )
+      });
+      markerItem.options.extData.distance = 0;
+    }
+    function setPointIcon(index, distance, showDeleteAll) {
+      const markerItem = rangingMarker[index];
+      const isLast = !rangingMarker[index + 1]?.options?.extData?.distance;
+      markerItem.setIcon({
+        divIcon: _this.DivIcon(
+          rangingPointIconOption(
+            options,
+            distance,
+            markerItem.options.extData.dicId,
+            isLast
+          )
+        )
+      });
+      markerItem.options.extData.distance = distance;
+    }
+    function setRangingTrun({ lat, lng }) {
+      const dicId = `${rangingPointsEnd.length}-${lat}-${lng}`;
+      if (!rangingPointsIng.length) {
+        const customIcon = _this.DivIcon(rangingStartIconOption(options, dicId));
+        const markerItem = _this.Marker({
+          position: { lat, lng },
+          icon: customIcon,
+          extData: {
+            latlng: { lat, lng },
+            index: rangingPointsEnd.length,
+            distance: 0,
+            dicId
+          }
+        });
+        markerItem.on("click", (res) => {
+          if (res.originalEvent.target.dataset?.id) {
+            clickItem();
+          }
+        });
+        markerItem.addTo(map);
+        rangingMarker.push(markerItem);
+        rangingPointsIng.push({ lat, lng });
+      } else {
+        const latlngs = [
+          [
+            rangingPointsIng[rangingPointsIng.length - 1].lat,
+            rangingPointsIng[rangingPointsIng.length - 1].lng
+          ],
+          [lat, lng]
+        ];
+        const polyline = _this.Polyline(latlngs, {
+          color: "#2df2ff",
+          weight: 2,
+          extData: {
+            latlngs: "" + latlngs[0][0] + latlngs[0][1] + latlngs[1][0] + latlngs[1][1],
+            index: rangingPointsEnd.length
+          }
+        });
+        polyline.addTo(map);
+        rangingPolylines.push(polyline);
+        let distance = map.distance(
+          { lat: latlngs[0][0], lng: latlngs[0][1] },
+          { lat: latlngs[1][0], lng: latlngs[1][1] }
+        );
+        distance = parseFloat((distance / 1e3).toFixed(2));
+        const total = parseFloat(
+          rangingMarker[rangingMarker.length - 1].options.extData.distance || 0
+        );
+        distance = (distance + total).toFixed(2);
+        const customIcon = _this.DivIcon(
+          rangingPointIconOption(options, distance, dicId)
+        );
+        const markerItem = _this.Marker({
+          position: { lat, lng },
+          icon: customIcon,
+          extData: {
+            latlng: { lat, lng },
+            index: rangingPointsEnd.length,
+            distance,
+            dicId
+          }
+        });
+        markerItem.on("click", (res) => {
+          if (res.originalEvent.target.dataset?.id === "delete-all") {
+            deleteAll();
+          } else if (res.originalEvent.target.dataset?.id) {
+            clickItem();
+          }
+        });
+        markerItem.addTo(map);
+        rangingMarker.push(markerItem);
+        rangingPointsIng.push({ lat, lng });
+      }
+      const rangEndIndex = rangingPointsEnd.length;
+      function clickItem() {
+        if (rangEndIndex === rangingPointsEnd.length) {
+          if (options.message) {
+            options.message({
+              type: "warning",
+              message: "\u8BF7\u5148\u5B8C\u6210\u672C\u6B21\u6D4B\u8DDD\uFF0C\u518D\u5220\u9664\u6D4B\u8DDD\u70B9"
+            });
+          }
+          return;
+        }
+        const index = rangingMarker.findIndex((v) => {
+          const extData = v?.options?.extData;
+          return extData?.index === rangEndIndex && extData?.latlng?.lat === lat && extData?.latlng?.lng === lng;
+        });
+        const distance = rangingMarker[index].options.extData.distance;
+        if (distance === 0) {
+          const nextMarker = rangingMarker[index + 1]?.options?.extData?.distance;
+          const nextTwo = rangingMarker[index + 2]?.options?.extData?.distance;
+          if (!(nextMarker && nextMarker !== 0 && nextTwo && nextTwo !== 0)) {
+            if (nextMarker) {
+              removeLineBetween(rangEndIndex, index, index + 1);
+              setTimeout(() => {
+                rangingMarker[index + 1].remove();
+                rangingMarker[index].remove();
+                rangingMarker.splice(index, 1);
+                setTimeout(() => {
+                  rangingMarker.splice(index, 1);
+                });
+              });
+            } else {
+              setTimeout(() => {
+                rangingMarker[index].remove();
+                rangingMarker.splice(index, 1);
+              });
+            }
+            return;
+          } else {
+            removeLineBetween(rangEndIndex, index, index + 1);
+            let changeIndex = index + 1;
+            while (rangingMarker[changeIndex]?.options?.extData?.distance) {
+              if (changeIndex - 1 === index) {
+                setStartIcon(changeIndex);
+              } else {
+                setPointIcon(
+                  changeIndex,
+                  calcTotalDistance(changeIndex, changeIndex - 1)
+                );
+              }
+              changeIndex++;
+            }
+            setTimeout(() => {
+              rangingMarker[index].remove();
+              rangingMarker.splice(index, 1);
+            });
+          }
+        } else {
+          const nextDistance = rangingMarker[index + 1]?.options?.extData?.distance;
+          if (nextDistance) {
+            const latlngOne = rangingMarker[index - 1]?.options?.extData?.latlng;
+            const latlngTree = rangingMarker[index + 1]?.options?.extData?.latlng;
+            removeLineBetween(rangEndIndex, index - 1, index);
+            removeLineBetween(rangEndIndex, index, index + 1);
+            const latlngs = [
+              [latlngOne.lat, latlngOne.lng],
+              [latlngTree.lat, latlngTree.lng]
+            ];
+            const polyline = _this.Polyline(latlngs, {
+              color: "#2df2ff",
+              weight: 2,
+              extData: {
+                latlngs: "" + latlngs[0][0] + latlngs[0][1] + latlngs[1][0] + latlngs[1][1],
+                index: rangEndIndex
+              }
+            });
+            polyline.addTo(map);
+            rangingPolylines.push(polyline);
+            let changeIndex = index + 1;
+            while (rangingMarker[changeIndex]?.options?.extData?.distance) {
+              const disIndex = changeIndex - 1 === index ? changeIndex - 2 : changeIndex - 1;
+              setPointIcon(
+                changeIndex,
+                calcTotalDistance(changeIndex, disIndex)
+              );
+              changeIndex++;
+            }
+            setTimeout(() => {
+              rangingMarker[index].remove();
+              rangingMarker.splice(index, 1);
+            });
+          } else {
+            const beforeDistance = rangingMarker[index - 1]?.options?.extData?.distance;
+            if (beforeDistance) {
+              const latlngOne = rangingMarker[index - 1]?.options?.extData?.latlng;
+              const latlngTwo = rangingMarker[index]?.options?.extData?.latlng;
+              const polygonIndex = rangingPolylines.findIndex((v) => {
+                const extData = v.options.extData;
+                return rangEndIndex === extData.index && extData.latlngs === "" + latlngOne.lat + latlngOne.lng + latlngTwo.lat + latlngTwo.lng;
+              });
+              rangingPolylines[polygonIndex] && rangingPolylines[polygonIndex].remove();
+              rangingPolylines.splice(polygonIndex, 1);
+              const lastMarker = rangingMarker[index - 1];
+              const customIcon = _this.DivIcon({
+                html: `<div style="width:12px;height:12px;border-radius:9999px;background-color:${options.labelFillColor || "#fff"};border:1px solid ${options.lineColor || "#2df2ff"};position:relative;">
+                          <div style="position:absolute;left:0;top:12px;padding-left:4px;padding-right:4px;font-size:12px;line-height:16px;background-color:#fff;border:1px solid #000;color:#000;white-space:nowrap;">${lastMarker.options.extData.distance}km
+                            <i data-id="${lastMarker.options.extData.dicId}" class="el-icon-close"></i>
+                            <i data-id="delete-all" class="el-icon-delete"></i>
+                          </div>
+                        </div>`,
+                className: "my-div-icon",
+                iconSize: [remToPx(0.75), remToPx(0.75)],
+                iconAnchor: [remToPx(0.375), remToPx(0.375)]
+              });
+              lastMarker.setIcon({ divIcon: customIcon });
+              setTimeout(() => {
+                rangingMarker[index].remove();
+                rangingMarker.splice(index, 1);
+              });
+            } else {
+              const latlngOne = rangingMarker[index - 1]?.options?.extData?.latlng;
+              const latlngTwo = rangingMarker[index]?.options?.extData?.latlng;
+              const polygonIndex = rangingPolylines.findIndex((v) => {
+                const extData = v.options.extData;
+                return rangEndIndex === extData.index && extData.latlngs === "" + latlngOne.lat + latlngOne.lng + latlngTwo.lat + latlngTwo.lng;
+              });
+              rangingPolylines[polygonIndex] && rangingPolylines[polygonIndex].remove();
+              rangingPolylines.splice(polygonIndex, 1);
+              setTimeout(() => {
+                rangingMarker[index - 1].remove();
+                rangingMarker[index].remove();
+                rangingMarker.splice(index, 1);
+                rangingMarker.splice(index - 1, 1);
+              });
+            }
+          }
+        }
+      }
+      function deleteAll() {
+        for (let i = 0; i < rangingPolylines.length; i++) {
+          const polygon = rangingPolylines[i];
+          if (polygon?.options?.extData?.index === rangEndIndex) {
+            polygon.remove();
+            rangingPolylines.splice(i, 1);
+            i--;
+          }
+        }
+        setTimeout(() => {
+          let index = rangingMarker.findIndex((v) => {
+            const extData = v?.options?.extData;
+            return extData?.index === rangEndIndex && extData?.latlng?.lat === lat && extData?.latlng?.lng === lng;
+          });
+          while (rangingMarker[index]?.options?.extData?.distance) {
+            rangingMarker[index].remove();
+            rangingMarker.splice(index, 1);
+            index--;
+          }
+          rangingMarker[index].remove();
+          rangingMarker.splice(index, 1);
+        });
+      }
+    }
+    function setRangingTrunEnd() {
+      const marker = rangingMarker[rangingMarker.length - 1];
+      if (marker) {
+        if (marker.options.extData.distance) {
+          const customIcon = _this.DivIcon({
+            html: `<div style="width:12px;height:12px;border-radius:9999px;background-color:${options.labelFillColor || "#fff"};border:1px solid ${options.lineColor || "#2df2ff"};position:relative;">
+                          <div style="position:absolute;left:0;top:12px;padding-left:4px;padding-right:4px;font-size:12px;line-height:16px;background-color:#fff;border:1px solid #000;color:#000;white-space:nowrap;">${marker.options.extData.distance}km
+                            <i data-id="${marker.options.extData.dicId}" class="el-icon-close"></i>
+                            <i data-id="delete-all" class="el-icon-delete"></i>
+                          </div>
+                        </div>`,
+            className: "my-div-icon",
+            iconSize: [remToPx(0.75), remToPx(0.75)],
+            iconAnchor: [remToPx(0.375), remToPx(0.375)]
+          });
+          marker.setIcon({ divIcon: customIcon });
+        } else {
+          marker.remove();
+          rangingMarker.splice(rangingMarker.length - 1, 1);
+        }
+      }
+      rangingPointsEnd.push(rangingPointsIng);
+      rangingPointsIng = [];
+    }
+    const handlers = {
+      turnOn: function(target) {
+        if (rangingTrun) return;
+        map.on("click", rangingClick);
+        map.on("contextmenu", setRangingTrunEnd);
+        rangingTrun = true;
+      },
+      turnOff: function(target) {
+        if (!rangingTrun) return;
+        rangingMarker.forEach((marker) => {
+          marker && marker?.remove();
+        });
+        rangingPolylines.forEach((polygon) => {
+          polygon && polygon?.remove();
+        });
+        map.off("click", rangingClick);
+        map.off("contextmenu", setRangingTrunEnd);
+        rangingMarker = [];
+        rangingPolylines = [];
+        rangingPointsIng = [];
+        rangingPointsEnd = [];
+        rangingTrun = false;
+      },
+      remove: function(target) {
+        if (!rangingTrun) return;
+        rangingMarker.forEach((marker) => {
+          marker && marker?.remove();
+        });
+        rangingPolylines.forEach((polygon) => {
+          polygon && polygon?.remove();
+        });
+        map.off("click", rangingClick);
+        map.off("contextmenu", setRangingTrunEnd);
+        rangingTrun = false;
+        rangingMarker = null;
+        rangingPolylines = null;
+        rangingPointsIng = null;
+        rangingPointsEnd = null;
+      }
+    };
+    return mapProxy.createMapProxy({}, handlers);
+  }
+}
+
+exports.default = bigMap;