hy-dispatch-ui-v3 0.2.53 → 0.2.55

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

@@ -0,0 +1,1360 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var events = require('events');
+var L = require('leaflet');
+var webgis = require('../js/webgis.js');
+var mapProxy = require('../js/mapProxy.js');
+var esriNS = require('esri-leaflet');
+var cluster = require('esri-leaflet-cluster');
+var related = require('esri-leaflet-related/dist/esri-leaflet-related');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var esriNS__namespace = /*#__PURE__*/_interopNamespaceDefault(esriNS);
+var cluster__namespace = /*#__PURE__*/_interopNamespaceDefault(cluster);
+
+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);
+import "leaflet/dist/leaflet.css";
+
+import "leaflet.pm/dist/leaflet.pm.css";
+
+import "leaflet.markercluster/dist/MarkerCluster.Default.css";
+
+const esri = { ...esriNS__namespace };
+L.esri = esri;
+L.esri.Cluster = cluster__namespace;
+L.esri.Related = related;
+const DEFAULT_CRS = L.CRS.EPSG3857;
+const CIRCLE_SEGMENTS = 36;
+const DEFAULT_TILE_FILTER = "grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)";
+const PM_TYPES = {
+  rectangle: "Rectangle",
+  circle: "Circle",
+  polygon: "Polygon"
+};
+const DEFAULT_MAP_OPTIONS = {
+  zoomControl: false,
+  // 禁用 + - 按钮
+  doubleClickZoom: true,
+  // 禁用双击放大
+  attributionControl: false,
+  // 移除右下角leaflet标识
+  dragging: true,
+  // 禁止鼠标拖动滚动
+  boxZoom: true,
+  // 决定地图是否可被缩放到鼠标拖拽出的矩形的视图，鼠标拖拽时需要同时按住shift键.
+  scrollWheelZoom: true
+  // 禁止鼠标滚动缩放
+};
+const remToPx = (rem) => {
+  const rootFontSize = parseFloat(
+    getComputedStyle(document.documentElement).fontSize
+  );
+  return rem * rootFontSize;
+};
+const createUniqueId = () => {
+  const random = Number(Math.random().toString().substr(2)).toString(36);
+  return `${Date.now().toString(36)}${random}`;
+};
+const generalMapMethods = {
+  /**
+   * 包装Bounds（导入转换）
+   * @param {L.Layer} target - 图层实例
+   * @returns {L.LatLngBounds} 包装后的Bounds
+   */
+  getBounds(target) {
+    const bounds = target.getBounds();
+    const southWest = bounds.getSouthWest();
+    const northEast = bounds.getNorthEast();
+    const center = bounds.getCenter();
+    bounds.getSouthWest = () => {
+      const { lat, lng } = latAndLngCheck(southWest);
+      return L.latLng(lat, lng);
+    };
+    bounds.getNorthEast = () => {
+      const { lat, lng } = latAndLngCheck(northEast);
+      return L.latLng(lat, lng);
+    };
+    bounds.getCenter = () => {
+      const { lat, lng } = latAndLngCheck(center);
+      return L.latLng(lat, lng);
+    };
+    return bounds;
+  },
+  /**
+   * 包装Map实例
+   * @param {L.Map} map - 地图实例
+   * @returns {Proxy} 包装后的Map
+   */
+  getMap(map) {
+    return mapProxy.createMapProxy(getInitMap(map), {
+      getCenter(target) {
+        const center = target.getCenter();
+        const { lng, lat } = latAndLngCheck(center);
+        return L.latLng(lat, lng);
+      }
+    });
+  },
+  /**
+   * 包装Bounds（导出转换）
+   * @param {L.Layer} target - 图层实例
+   * @returns {L.LatLngBounds} 包装后的Bounds
+   */
+  getBoundsExport(target) {
+    const bounds = target.getBounds();
+    const southWest = bounds.getSouthWest();
+    const northEast = bounds.getNorthEast();
+    const center = bounds.getCenter();
+    bounds.getSouthWest = () => {
+      const { lat, lng } = latAndLngCheckExport(southWest);
+      return L.latLng(lat, lng);
+    };
+    bounds.getNorthEast = () => {
+      const { lat, lng } = latAndLngCheckExport(northEast);
+      return L.latLng(lat, lng);
+    };
+    bounds.getCenter = () => {
+      const { lat, lng } = latAndLngCheckExport(center);
+      return L.latLng(lat, lng);
+    };
+    return bounds;
+  }
+};
+function latAndLngCheck(item) {
+  const isArray = Array.isArray(item);
+  return webgis.importCoordinate({
+    lat: isArray ? item[0] : item.lat,
+    lng: isArray ? item[1] : item.lng
+  });
+}
+function latAndLngCheckExport(item) {
+  const isArray = Array.isArray(item);
+  return webgis.exportCoordinate({
+    lat: isArray ? item[0] : item.lat,
+    lng: isArray ? item[1] : item.lng
+  });
+}
+function latLngListCheck(dataList = []) {
+  return dataList.map((item) => {
+    const isArray = Array.isArray(item);
+    const { lat, lng } = latAndLngCheck(item);
+    return isArray ? [lat, lng] : { ...item, lat, lng };
+  });
+}
+function latLngListCheckExport(dataList = []) {
+  return dataList.map((item) => {
+    const isArray = Array.isArray(item);
+    const { lat, lng } = latAndLngCheckExport(item);
+    return isArray ? [lat, lng] : { ...item, lat, lng };
+  });
+}
+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;
+}
+function wrapDrawLayer(layer) {
+  const bounds = layer.getBounds();
+  if (!layer.getLatLngs) {
+    layer.getLatLngs = () => {
+      const points = circleToPolygonPoints(
+        layer.getLatLng(),
+        layer.getRadius() / 1e3,
+        true
+      );
+      return [latLngListCheckExport(points)];
+    };
+  } else {
+    const latLngList = layer.getLatLngs();
+    layer.getLatLngs = () => {
+      const item = JSON.parse(JSON.stringify(latLngList[0]));
+      return [latLngListCheckExport([...item])];
+    };
+  }
+  layer.getBounds = () => {
+    const southWest = bounds.getSouthWest();
+    const northEast = bounds.getNorthEast();
+    bounds.getSouthWest = () => {
+      const { lat, lng } = latAndLngCheckExport(southWest);
+      return L.latLng(lat, lng);
+    };
+    bounds.getNorthEast = () => {
+      const { lat, lng } = latAndLngCheckExport(northEast);
+      return L.latLng(lat, lng);
+    };
+    return bounds;
+  };
+}
+function createClickHandler(fn, context, target, withOriginEvent = false) {
+  return (e) => {
+    const newEvent = withOriginEvent ? { ...e, originEvent: e.originalEvent } : { ...e };
+    const { lat, lng } = latAndLngCheckExport(newEvent.latlng);
+    newEvent.latlng = L.latLng(lat, lng);
+    fn.call(context || target, newEvent);
+  };
+}
+function getCrs(crs) {
+  if (crs === "CRS4490" && !L.CRS.CRS4490) {
+    const matrixIds = Array.from({ length: 24 }, (_, i) => i);
+    const resolutions = [
+      29582935545456606e-8,
+      14791467772728303e-8,
+      7395733886364101e-8,
+      36978669431821e-6,
+      1848933471591e-5,
+      9244667357955e-6,
+      4622333678977999e-9,
+      2.3111668394889995e6,
+      1.1555834197439998e6,
+      577791.7098719999,
+      288895.85493599996,
+      144447.92746799998,
+      72223.96373399999,
+      36111.981866999995,
+      18055.990934000005,
+      9027.995467000002,
+      4513.997732999999,
+      2256.9988670000002,
+      1128.499433,
+      564.2497170000001,
+      282.124858,
+      141.062429,
+      70.53121499999999,
+      35.26560700000001
+    ].map((item) => 0.0254 * item / (96 * (Math.PI * 2 * 6378137 / 360)));
+    L.CRS.CRS4490 = new L.Proj.CRS(
+      "EPSG:4490",
+      "+proj=longlat +ellps=GRS80 +no_defs +type=crs",
+      { matrixIds, resolutions, origin: [-180, 90] }
+    );
+  }
+  return crs ? L.CRS[`${crs}`] : DEFAULT_CRS;
+}
+function getInitMap(map) {
+  return map?.getInitMap ? map.getInitMap() : map;
+}
+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>`,
+    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>`,
+    iconSize: [remToPx(0.75), remToPx(0.75)],
+    iconAnchor: [remToPx(0.375), remToPx(0.375)]
+  };
+}
+class Leafletjs extends events.EventEmitter {
+  constructor(request) {
+    super();
+    // 绘画多边形覆盖物
+    __publicField(this, "Polygon", (pathList = [], option) => {
+      if (pathList && pathList.length !== 0) {
+        pathList = latLngListCheck(pathList);
+      }
+      const polygon = L.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])];
+        },
+        // 修改位置
+        setLatLngs: function(target, lngLatList = []) {
+          return target.setLatLngs(latLngListCheck(lngLatList));
+        },
+        on: function(target, types, fn, context) {
+          if (types === "click") {
+            const customClickHandler = createClickHandler(fn, context, target);
+            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) {
+    option = {
+      // 其他配置项
+      ...DEFAULT_MAP_OPTIONS,
+      ...option,
+      minZoom: option.minZoom,
+      maxZoom: option.maxZoom,
+      zoom: option.zoom,
+      center: option.center,
+      crs: getCrs(this.initParams.crs)
+    };
+    const center = option.center;
+    const { lat, lng } = latAndLngCheck([center.lat, center.lng]);
+    option.center = [lat, lng];
+    const newMap = L.map(domId, option);
+    newMap.getInitMap = () => newMap;
+    const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+    const handlers = {
+      // 删除地图
+      removeMap: function(target, params) {
+        if (!params) {
+          target.remove();
+          target.off();
+          wrappedHandlers.clear();
+        }
+      },
+      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();
+        const { lng: lng2, lat: lat2 } = latAndLngCheckExport(center2);
+        return L.latLng(lat2, lng2);
+      },
+      // 四个角
+      getBounds: function(target) {
+        const bounds = target.getBounds();
+        const southWest = bounds.getSouthWest();
+        const northEast = bounds.getNorthEast();
+        bounds.getSouthWest = () => {
+          const { lat: lat2, lng: lng2 } = latAndLngCheckExport(southWest);
+          return L.latLng(lat2, lng2);
+        };
+        bounds.getNorthEast = () => {
+          const { lat: lat2, lng: lng2 } = latAndLngCheckExport(northEast);
+          return L.latLng(lat2, lng2);
+        };
+        return bounds;
+      },
+      // 移动至目标位置
+      panTo: function(target, center2, options) {
+        const { lat: lat2, lng: lng2 } = latAndLngCheck(center2);
+        return target.panTo(L.latLng(lat2, lng2), options);
+      },
+      // 移动至目标位置并缩放图层
+      setView: function(target, center2, zoom, options) {
+        const { lat: lat2, lng: lng2 } = latAndLngCheck(center2);
+        return target.setView(L.latLng(lat2, lng2), zoom, options);
+      },
+      // 自定义地图
+      on: function(target, types, fn, context) {
+        if (types === "click") {
+          const customClickHandler = createClickHandler(fn, context, target);
+          wrappedHandlers.remember(types, fn, customClickHandler);
+          return target.on(types, customClickHandler, context);
+        } else if (types === "pm:create") {
+          const customClickHandler = (e) => {
+            const newEvent = { ...e };
+            wrapDrawLayer(newEvent.layer);
+            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);
+      }
+    };
+    const map = mapProxy.createMapProxy(newMap, handlers);
+    map.id = createUniqueId();
+    map.whenReady(() => {
+      if (option.completeCallbacks) {
+        option.completeCallbacks();
+      }
+    });
+    this.setLayersUrl(map);
+    return map;
+  }
+  // 设置地图瓦片地址
+  setLayersUrl(map) {
+    const layersUrlList = this.initParams.layersUrlList || [];
+    const layersIndex = this.initParams.layersIndex || 0;
+    const layersOption = layersUrlList[layersIndex];
+    if (!layersOption) {
+      return;
+    }
+    const { mapServerType } = this.initParams;
+    if (mapServerType === "WMTS" || mapServerType === "Dynamic") {
+      return this.createLayers(map, layersOption);
+    }
+    const { layersUrls = "", filter, key } = layersOption;
+    layersUrls.split(",").forEach((layersUrl) => {
+      if (layersUrl.indexOf("{mapKey}") !== -1) {
+        layersUrl = layersUrl.replace("{mapKey}", key);
+      }
+      if (filter) {
+        this.createCustomLayers(map, layersUrl, { filter });
+      } else {
+        this.createLayers(map, layersUrl);
+      }
+    });
+  }
+  // 超图 WMTS 图层（不适用所有的WMTS图层，目前仅支持超图WMTS，因不同的WMTS服务规范不一样，主要体现在路由访问参数）
+  createWMTSLayer(map, option = {}) {
+    const {
+      url,
+      layer,
+      tilematrixSet,
+      format = "image/png"
+    } = typeof option === "string" ? { url: option } : option;
+    const crs = getCrs(this.initParams.crs);
+    if (!L.WMTSLayer) {
+      L.WMTSLayer = L.TileLayer.extend({
+        options: {
+          version: "1.0.0",
+          style: "default",
+          tilematrixSet: "",
+          format: "image/png",
+          tileSize: 256,
+          matrixIds: null,
+          layer: "",
+          zoomOffset: null,
+          requestEncoding: "KVP",
+          noWrap: true,
+          crs
+        },
+        initialize(layerUrl, options) {
+          this._url = layerUrl;
+          L.setOptions(this, options);
+        },
+        getTileUrl(coords) {
+          const zoom = this._getZoomForUrl();
+          const ident = this.options.matrixIds?.[zoom]?.identifier || zoom;
+          const params = {
+            service: "WMTS",
+            request: "GetTile",
+            version: this.options.version,
+            layer: this.options.layer,
+            style: this.options.style,
+            tilematrixSet: this.options.tilematrixSet,
+            format: this.options.format,
+            zoomOffset: this.options.zoomOffset,
+            crs: this.options.crs,
+            tilematrix: ident,
+            tilerow: coords.y,
+            tilecol: coords.x
+          };
+          return this._url + L.Util.getParamString(params, this._url);
+        }
+      });
+      L.wmtsLayer = (layerUrl, options) => new L.WMTSLayer(layerUrl, options);
+    }
+    const matrixIds = Array.from({ length: 21 }, (_, i) => ({
+      identifier: `${i}`
+    }));
+    const wmtsLayer = L.wmtsLayer(url, {
+      layer,
+      style: "default",
+      tilematrixSet,
+      format,
+      matrixIds,
+      tileSize: 256,
+      version: "1.0.0",
+      noWrap: true,
+      zoomOffset: url.includes("chinaMap/wmts") ? 1 : 0
+    });
+    wmtsLayer.addTo(getInitMap(map));
+    return wmtsLayer;
+  }
+  // arcgis 动态图层
+  createDynamicLayer(map, url) {
+    const arcLayer = L.esri.dynamicMapLayer({
+      url,
+      f: "image",
+      format: "png24",
+      opacity: 1,
+      transparent: false
+    });
+    arcLayer.addTo(getInitMap(map));
+    return arcLayer;
+  }
+  // 切片图层
+  createLayers(map, url, option = {}) {
+    const { zoomOffset, mapServerType } = this.initParams;
+    if (mapServerType === "WMTS") return this.createWMTSLayer(map, url);
+    if (mapServerType === "Dynamic")
+      return this.createDynamicLayer(map, url.url || url);
+    const newLeayer = L.tileLayer(url, {
+      ...option,
+      zoomOffset: zoomOffset || 0
+    });
+    newLeayer.addTo(generalMapMethods.getMap(map));
+    return newLeayer;
+  }
+  // 切片图层（自定义滤镜）
+  createCustomLayers(map, url, option = {}) {
+    const { zoomOffset, mapServerType } = this.initParams;
+    if (mapServerType === "WMTS") return this.createWMTSLayer(map, url);
+    if (mapServerType === "Dynamic")
+      return this.createDynamicLayer(map, url.url || url);
+    const filter = option.filter || DEFAULT_TILE_FILTER;
+    const CustomTileLayer = L.TileLayer.extend({
+      options: {
+        ...option,
+        zoomOffset
+      },
+      createTile(coords, done) {
+        const tile = document.createElement("img");
+        tile.onload = () => done(null, tile);
+        tile.src = this.getTileUrl(coords);
+        tile.style.filter = filter;
+        return tile;
+      }
+    });
+    const newLeayer = new CustomTileLayer(url);
+    newLeayer.addTo(generalMapMethods.getMap(map));
+    return newLeayer;
+  }
+  // 地图图层
+  layerGroup(map, markers = []) {
+    return L.layerGroup(markers).addTo(getInitMap(map));
+  }
+  // 自定义图标
+  DivIcon(option) {
+    option = {
+      ...option,
+      html: option.html,
+      className: option.className,
+      iconSize: option.iconSize,
+      iconAnchor: option.iconAnchor
+    };
+    return L.divIcon(option);
+  }
+  // 生成 marker
+  Marker(markerOptions) {
+    const { position = {} } = markerOptions;
+    markerOptions = {
+      ...markerOptions,
+      icon: markerOptions.icon,
+      zIndexOffset: markerOptions.zIndexOffset,
+      position: [position.lat, position.lng],
+      extData: markerOptions.extData
+    };
+    if (markerOptions.position && markerOptions.position.length !== 0) {
+      const { lat, lng } = latAndLngCheck(markerOptions.position);
+      markerOptions.position = [lat, lng];
+    }
+    const marker = L.marker(markerOptions.position, markerOptions);
+    marker.getInitMarker = () => {
+      return marker;
+    };
+    const wrappedHandlers = mapProxy.createWrappedHandlerStore();
+    const handlers = {
+      addTo: function(target, map) {
+        return target.addTo(getInitMap(map));
+      },
+      removeFrom: function(target, map) {
+        return target.removeFrom(getInitMap(map));
+      },
+      // 移除（聚合点内的 marker 需要从聚合图层移除，否则残留）
+      remove: function(target) {
+        if (target._clusterRef?.removeLayer) {
+          target._clusterRef.removeLayer(target);
+        } else {
+          target.remove();
+        }
+        return target;
+      },
+      // 彻底销毁：解绑事件并释放引用，避免内存泄漏
+      destroy: function(target) {
+        handlers.remove(target);
+        target.off();
+        wrappedHandlers.clear();
+        target._clusterRef = null;
+        if (target.options) {
+          target.options.icon = null;
+        }
+        target._isDestroyed = true;
+      },
+      getLatLng: function(target) {
+        const latlng = target.getLatLng();
+        const { lat, lng } = latAndLngCheckExport(latlng);
+        return L.latLng(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 = createClickHandler(
+            fn,
+            context,
+            target,
+            true
+          );
+          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);
+      }
+    };
+    const markerProxy = mapProxy.createMapProxy(marker, handlers);
+    marker._proxy = markerProxy;
+    return markerProxy;
+  }
+  // 生成 聚合点
+  MarkerClusterGroup(map, markerList = [], option) {
+    option = {
+      spiderfyDistanceMultiplier: 1,
+      spiderLegPolylineOptions: { weight: 1, color: "#5E9DB4", opacity: 1 },
+      ...option,
+      iconCreateFunction: option.iconCreateFunction,
+      disableClusteringAtZoom: option.disableClusteringAtZoom,
+      maxClusterRadius: option.maxClusterRadius
+    };
+    const displayCluster = L.markerClusterGroup(option);
+    const nativeMap = getInitMap(map);
+    nativeMap.addLayer(displayCluster);
+    const toNativeMarkers = (list = [], clusterRef = null) => {
+      const markers = Array.isArray(list) ? list : [list];
+      return markers.map((marker) => {
+        const nativeMarker = marker?.getInitMarker ? marker.getInitMarker() : marker;
+        if (nativeMarker) nativeMarker._clusterRef = clusterRef;
+        return nativeMarker;
+      }).filter(Boolean);
+    };
+    const handlers = {
+      remove: function(target) {
+        nativeMap.removeLayer(target);
+      },
+      removeLayers: function(target, markerList2 = []) {
+        target.removeLayers(toNativeMarkers(markerList2, null));
+        target._unspiderfy?.();
+      },
+      addLayers: function(target, markerList2 = []) {
+        target.addLayers(toNativeMarkers(markerList2, target));
+      },
+      // 销毁聚合内所有 marker 并清空图层
+      destroyAll: function(target) {
+        target.getLayers().forEach((layer) => {
+          layer._clusterRef = null;
+          if (layer._proxy?.destroy) {
+            layer._proxy.destroy();
+          } else {
+            layer.off();
+          }
+        });
+        target.clearLayers();
+      }
+    };
+    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 = L.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 = L.popup(option);
+    const handlers = {
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      },
+      // 四个角
+      getBounds: function(target) {
+        return generalMapMethods.getBoundsExport(target);
+      },
+      /**
+       * 修改位置
+       * @param {Array|Object} latLngList - 坐标
+       * @param {boolean} translation - 是否做坐标转换（已转换过的坐标传 false）
+       */
+      setLatLng: function(target, latLngList, translation = true) {
+        if (latLngList && latLngList.length !== 0) {
+          const isArray = Array.isArray(latLngList);
+          const { lat, lng } = translation ? latAndLngCheck(latLngList) : {
+            lat: isArray ? latLngList[0] : latLngList.lat,
+            lng: isArray ? latLngList[1] : latLngList.lng
+          };
+          latLngList = L.latLng(lat, lng);
+        }
+        return target.setLatLng(latLngList);
+      }
+    };
+    return mapProxy.createMapProxy(popup, handlers);
+  }
+  // 自定义 线条
+  Polyline(latLngList = [], option = {}) {
+    if (latLngList && latLngList.length !== 0) {
+      latLngList = latLngListCheck(latLngList);
+    }
+    const polyline = L.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);
+      },
+      // 设置经纬度坐标
+      setLatLngs: function(target, lngLatList = []) {
+        return target.setLatLngs(latLngListCheck(lngLatList));
+      },
+      // 添加经纬度坐标
+      addLatLng: function(target, lngLat) {
+        return target.addLatLng(latAndLngCheck(lngLat));
+      },
+      on: function(target, types, fn, context) {
+        if (types === "click") {
+          const customClickHandler = createClickHandler(fn, context, target);
+          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);
+  }
+  MotionPolyline(latLngList = [], option = {}, motionOption = {}, markerOption = {}) {
+    if (latLngList && latLngList.length !== 0) {
+      latLngList = latLngListCheck(latLngList);
+    }
+    const polyline = L.motion.polyline(
+      latLngList,
+      option,
+      motionOption,
+      markerOption
+    );
+    return mapProxy.createMapProxy(polyline, {
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      }
+    });
+  }
+  motionSeq(motion, options) {
+    const seq = L.motion.seq(motion, options);
+    return mapProxy.createMapProxy(seq, {
+      addTo: function(target, map) {
+        return target.addTo(generalMapMethods.getMap(map));
+      }
+    });
+  }
+  // 自定义 轨迹回放
+  TrackPlayer(latLngList = [], option = {}, map = null) {
+    if (!(latLngList && latLngList.length !== 0)) {
+      return null;
+    }
+    let speed = option.speed;
+    const carIcon = this.DivIcon({
+      className: "custom-marker-icon",
+      html: option.svgContent,
+      iconSize: option.iconSize || 0,
+      iconAnchor: option.iconAnchor || 0
+    });
+    const trackRoute = latLngList;
+    let trackPolyline = this.MotionPolyline(
+      trackRoute,
+      {
+        color: option.passedLineColor || "#2EE19E",
+        // 线颜色
+        weight: 4
+      },
+      {
+        speed: option.speed
+      },
+      {
+        showMarker: true,
+        icon: carIcon
+      }
+    );
+    let marker = this.motionSeq([trackPolyline]);
+    marker.on(L.Motion.Event.Ended, () => {
+      if (option.onEnd) option.onEnd();
+    });
+    let polyline = this.Polyline(trackRoute, {
+      color: option.notPassedLineColor || "#FF1875",
+      // 线颜色
+      weight: 4
+    });
+    marker.addTo(map);
+    polyline.addTo(map);
+    map.panTo([trackRoute[0].lat, trackRoute[0].lng]);
+    const handlers = {
+      // 开始
+      startAnimation: function() {
+        if (marker && marker.motionStart) {
+          trackPolyline.motionSpeed(speed);
+          marker.motionStart();
+        }
+      },
+      // 暂停
+      pauseAnimation: function() {
+        if (marker && marker.motionPause) {
+          marker.motionPause();
+        }
+      },
+      // 恢复
+      resumeAnimation: function() {
+        if (marker) {
+          marker.motionResume();
+        }
+      },
+      // 修改速度
+      motionSpeed: function(target, changeSpeed) {
+        speed = changeSpeed;
+        trackPolyline.motionSpeed(speed);
+        if (marker && marker.motionStart) {
+          marker.motionStart();
+        }
+      },
+      // 移除轨迹回放
+      removeTrackPlayer: function() {
+        marker.remove();
+        polyline.remove();
+        marker = null;
+        polyline = null;
+        trackPolyline = null;
+      }
+    };
+    return mapProxy.createMapProxy(marker, handlers);
+  }
+  // 创建绘画工具 rectangle 正方形 circle 圆形 polygon 多边形
+  CreatePm(pmType = "rectangle", options = {}, map) {
+    map.off("pm:create");
+    const drawOptions = {
+      pathOptions: {
+        color: options.fillColor || "#00b0ff"
+      },
+      snappable: true,
+      // 设置是否对齐到其他图层
+      snapDistance: 20
+      // 对齐距离阈值
+    };
+    const enableDraw = (toolType) => map.pm.enableDraw(PM_TYPES[toolType], drawOptions);
+    let layer = null;
+    const clearLayer = () => {
+      if (layer) {
+        map.removeLayer(layer);
+        layer = null;
+      }
+    };
+    enableDraw(pmType);
+    map.on("pm:create", (e) => {
+      layer = e.layer;
+      if (options.onChange) {
+        const pointsList = latLngListCheckExport(layer.getLatLngs()[0]);
+        options.onChange(pointsList);
+      }
+    });
+    const handlers = {
+      remove: function() {
+        map.off("pm:create");
+        clearLayer();
+        map.pm.disableDraw();
+      },
+      close: function() {
+        clearLayer();
+        map.pm.disableDraw();
+      },
+      setMouseTool: function(target, toolType) {
+        enableDraw(toolType);
+      }
+    };
+    return mapProxy.createMapProxy({}, handlers);
+  }
+  // 电子围栏
+  CreateFence(pmType = "rectangle", options = {}, map) {
+    let polygon = null;
+    const clearPolygon = () => {
+      if (polygon) {
+        map.removeLayer(polygon);
+        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.pm.enable();
+      pm.close();
+    };
+    const onChange = (pointList) => {
+      setPolygon(latLngListCheck(pointList));
+    };
+    const pm = this.CreatePm(
+      pmType,
+      {
+        ...options,
+        onChange
+      },
+      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 setStartIcon(index) {
+      const markerItem = rangingMarker[index];
+      markerItem.setIcon({
+        divIcon: _this.DivIcon(
+          rangingStartIconOption(options, markerItem.options.extData.dicId)
+        )
+      });
+      markerItem.options.extData.distance = 0;
+    }
+    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 setPointIcon(index, distance, showDeleteAll) {
+      const markerItem = rangingMarker[index];
+      const isLast = showDeleteAll ?? !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({
+          icon: customIcon,
+          position: { lat, lng },
+          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: options.lineColor || "#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({
+          icon: customIcon,
+          position: { lat, lng },
+          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: options.lineColor || "#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) {
+              removeLineBetween(rangEndIndex, index - 1, index);
+              setPointIcon(
+                index - 1,
+                rangingMarker[index - 1].options.extData.distance,
+                true
+              );
+              setTimeout(() => {
+                rangingMarker[index].remove();
+                rangingMarker.splice(index, 1);
+              });
+            } else {
+              removeLineBetween(rangEndIndex, index - 1, index);
+              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 lastIndex = rangingMarker.length - 1;
+      const marker = rangingMarker[lastIndex];
+      if (marker) {
+        if (marker.options.extData.distance) {
+          setPointIcon(lastIndex, marker.options.extData.distance, true);
+        } else {
+          marker.remove();
+          rangingMarker.splice(lastIndex, 1);
+        }
+      }
+      rangingPointsEnd.push(rangingPointsIng);
+      rangingPointsIng = [];
+    }
+    const clearRanging = () => {
+      rangingMarker.forEach((marker) => {
+        if (marker?.destroy) {
+          marker.destroy();
+        } else {
+          marker?.remove();
+        }
+      });
+      rangingPolylines.forEach((polygon) => {
+        polygon?.remove();
+      });
+      map.off("click", rangingClick);
+      map.off("contextmenu", setRangingTrunEnd);
+      rangingTrun = false;
+    };
+    const handlers = {
+      turnOn: function() {
+        if (rangingTrun) return;
+        map.on("click", rangingClick);
+        map.on("contextmenu", setRangingTrunEnd);
+        rangingTrun = true;
+      },
+      turnOff: function() {
+        if (!rangingTrun) return;
+        clearRanging();
+        rangingMarker = [];
+        rangingPolylines = [];
+        rangingPointsIng = [];
+        rangingPointsEnd = [];
+      },
+      remove: function() {
+        if (!rangingTrun) return;
+        clearRanging();
+        rangingMarker = null;
+        rangingPolylines = null;
+        rangingPointsIng = null;
+        rangingPointsEnd = null;
+      }
+    };
+    return mapProxy.createMapProxy({}, handlers);
+  }
+}
+
+exports.default = Leafletjs;