hy-dispatch-ui-v3 0.2.53 → 0.2.55

package/es/utils/map/hook/gaode.mjs

@@ -0,0 +1,683 @@
+import { EventEmitter } from 'events';
+import { createMapProxy, createWrappedHandlerStore } from '../js/mapProxy.mjs';
+
+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 createClickHandler = (fn, context, target) => {
+  return (e) => {
+    const newEvent = { ...e };
+    newEvent.latlng = newEvent.lnglat;
+    delete newEvent.lnglat;
+    fn.call(context || target, newEvent);
+  };
+};
+const wrapBounds = (target, withTarget = false) => {
+  const bounds = target.getBounds();
+  bounds._southWest = bounds.southwest;
+  bounds._northEast = bounds.northeast;
+  if (withTarget) {
+    bounds.getSouthWest = () => bounds.southwest;
+    bounds.getNorthEast = () => bounds.northeast;
+    bounds.target = target;
+  }
+  delete bounds.southwest;
+  delete bounds.northeast;
+  return bounds;
+};
+const toStrokeStyle = (option = {}) => {
+  return {
+    ...option,
+    strokeColor: option.color,
+    strokeOpacity: option.opacity,
+    strokeWeight: option.weight
+  };
+};
+class Google extends EventEmitter {
+  constructor(request) {
+    super();
+    /* 绘画多边形覆盖物 */
+    __publicField(this, "Polygon", (pathList = [], option) => {
+      option = {
+        ...option,
+        strokeColor: option.color,
+        strokeOpacity: option.opacity,
+        strokeWeight: option.weight,
+        fillColor: option.fillColor,
+        fillOpacity: option.fillOpacity
+      };
+      const lngLatList = [];
+      pathList.forEach((val) => {
+        lngLatList.push([val.lng, val.lat]);
+      });
+      const polygon = new window.AMap.Polygon({
+        path: lngLatList,
+        ...option
+      });
+      const wrappedHandlers = createWrappedHandlerStore();
+      const handlers = {
+        setStyle: function(target, setStyleOption) {
+          target.setOptions({
+            ...toStrokeStyle(setStyleOption),
+            fillColor: setStyleOption.fillColor,
+            fillOpacity: setStyleOption.fillOpacity
+          });
+        },
+        addTo: function(target, map) {
+          target.map = map;
+          map.add(target);
+        },
+        // 删除图形
+        remove: function(target) {
+          target.map.remove(target);
+        },
+        // 四个角
+        getBounds: function(target) {
+          return wrapBounds(target, true);
+        },
+        getLatLngs: function(target) {
+          return [target.getPath()];
+        },
+        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 createMapProxy(polygon, handlers);
+    });
+    this.initParams = request;
+  }
+  InitMap(domId, option) {
+    const { center } = option;
+    const newMap = new window.AMap.Map(domId, {
+      defaultMapStyle: this.initParams.defaultMapStyle,
+      mapStyle: option.mapStyle,
+      zooms: [option.minZoom, option.maxZoom],
+      // 设置缩放级别范围 3-20 级
+      center: [center.lng, center.lat],
+      zoom: option.zoom,
+      // 其他配置项
+      layers: [],
+      pitch: 0,
+      resizeEnable: true
+    });
+    newMap.on("complete", (e) => {
+      if (option.completeCallbacks) {
+        option.completeCallbacks(e);
+      }
+    });
+    newMap.plugin(
+      [
+        "AMap.MarkerClusterer",
+        "AMap.Scale",
+        "AMap.LayerGroup",
+        "AMap.Circle",
+        "AMap.TileLayer",
+        "AMap.GeometryUtil",
+        "AMap.MouseTool"
+      ],
+      () => {
+      }
+    );
+    const wrappedHandlers = createWrappedHandlerStore();
+    const handlers = {
+      // return 单位：m
+      distance: function(target, latAndlng1, latAndlng2) {
+        return AMap.GeometryUtil.distance(
+          [latAndlng1.lng, latAndlng1.lat],
+          [latAndlng2.lng, latAndlng2.lat]
+        );
+      },
+      // 删除地图
+      removeMap: function(target) {
+        target.clearMap();
+        target.destroy();
+      },
+      panTo: function(target, latAndLng) {
+        target.panTo([latAndLng.lng, latAndLng.lat]);
+      },
+      // 移动至目标位置并缩放图层
+      setView: function(target, latAndLng, zoom) {
+        target.setZoom(zoom);
+        target.panTo([latAndLng.lng, latAndLng.lat]);
+      },
+      // 自定义地图
+      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);
+      },
+      // // 获取中心点
+      getCenter: function(target) {
+        return target.getCenter();
+      },
+      fitBounds: function(target, params) {
+        if (!Array.isArray(params)) {
+          params = [params];
+        }
+        target.setFitView(params.map((item) => item.target));
+      },
+      // // 四个角
+      getBounds: function(target) {
+        return wrapBounds(target);
+      }
+    };
+    return createMapProxy(newMap, handlers);
+  }
+  // 地图图层
+  layerGroup(map, markers = []) {
+    const layerGroup = new window.AMap.LayerGroup(markers);
+    layerGroup.setMap(map);
+    return layerGroup;
+  }
+  // 自定义图标
+  DivIcon(option) {
+    return { option, _initHooksCalled: true };
+  }
+  Marker(markerOptions) {
+    const { position = {} } = markerOptions;
+    let offset = null;
+    const { html, iconSize, iconAnchor } = markerOptions.icon.option;
+    if (markerOptions.offset) {
+      offset = new window.AMap.Pixel(
+        markerOptions.offset[0],
+        markerOptions.offset[1]
+      );
+    } else {
+      const offsetX = iconAnchor[0] - iconSize[0] / 2;
+      const offsetY = -iconAnchor[1];
+      offset = new window.AMap.Pixel(offsetX, offsetY);
+    }
+    markerOptions = {
+      visible: true,
+      anchor: "top-center",
+      ...markerOptions,
+      position: [position.lng, position.lat],
+      content: html,
+      zIndex: markerOptions.zIndexOffset,
+      extData: markerOptions.extData || null,
+      offset
+    };
+    const marker = new window.AMap.Marker(markerOptions);
+    const handlers = {
+      addTo: function(target, map) {
+        target.map = map;
+        target.setMap(map);
+      },
+      remove: function(target) {
+        target.map.remove(target);
+      },
+      // 更改标记位置。
+      setLatLng: function(target, lngAndLat) {
+        target.setPosition([lngAndLat.lng, lngAndLat.lat]);
+      },
+      // 更改标记图标。
+      setIcon: function(target, iconParams) {
+        const { html: html2, iconSize: iconSize2, iconAnchor: iconAnchor2 } = iconParams.divIcon.option;
+        target.setContent(html2);
+        let setOffset = null;
+        if (iconParams.offset) {
+          setOffset = new window.AMap.Pixel(
+            iconParams.offset[0],
+            iconParams.offset[1]
+          );
+        } else {
+          const offsetX = iconAnchor2[0] - iconSize2[0] / 2;
+          const offsetY = -iconAnchor2[1];
+          setOffset = new window.AMap.Pixel(offsetX, offsetY);
+        }
+        target.setOffset(setOffset);
+      }
+    };
+    return createMapProxy(marker, handlers);
+  }
+  MarkerClusterGroup(map, markerList, option) {
+    const iconCreateFunction = (cluster) => {
+      cluster.getChildCount = () => {
+        return cluster.count;
+      };
+      const divIcon = option.iconCreateFunction(cluster);
+      const { html, iconSize, iconAnchor } = divIcon.option;
+      const offsetX = iconAnchor[0] - iconSize[0] / 2;
+      const offsetY = -iconAnchor[1];
+      cluster.marker.setContent(html);
+      cluster.marker.setOffset(new window.AMap.Pixel(offsetX, offsetY));
+    };
+    option = {
+      minClusterSize: 2,
+      // 聚合的最小数量
+      averageCenter: true,
+      ...option,
+      renderClusterMarker: iconCreateFunction,
+      maxZoom: option.disableClusteringAtZoom,
+      // 聚合的最大层级
+      gridSize: option.maxClusterRadius
+      // 聚合计算时网格的像素大小，默认60
+    };
+    const displayCluster = new window.AMap.MarkerClusterer(
+      map,
+      markerList,
+      option
+    );
+    const handlers = {
+      // 清除聚合点
+      remove: function(target) {
+        target.clearMarkers();
+      },
+      // 删除单个 marker
+      removeLayer: function(target, marker) {
+        target.removeMarkers([marker]);
+      },
+      // 删除多个个 【marker】
+      removeLayers: function(target, markerArray = []) {
+        target.removeMarkers(markerArray);
+      },
+      // 添加单个 marker
+      addLayer: function(target, marker) {
+        target.addMarkers([marker]);
+      },
+      // 添加多个个 【marker】
+      addLayers: function(target, markerArray = []) {
+        target.addMarkers(markerArray);
+      }
+    };
+    return createMapProxy(displayCluster, handlers);
+  }
+  /* 绘画圆 */
+  Circle(latLngList = {}, option = {}) {
+    option = {
+      ...option,
+      center: new window.AMap.LngLat(latLngList.lng, latLngList.lat),
+      // 圆心位置
+      radius: option.radius,
+      strokeColor: option.color,
+      strokeOpacity: option.opacity,
+      strokeWeight: option.weight,
+      fillColor: option.fillColor,
+      fillOpacity: option.fillOpacity
+    };
+    const circle = new window.AMap.Circle(option);
+    const handlers = {
+      addTo: function(target, map) {
+        target.map = map;
+        target.setMap(map);
+      },
+      // 删除图形
+      remove: function(target) {
+        target.map.remove(target);
+      },
+      // 四个角
+      getBounds: function(target) {
+        return wrapBounds(target, true);
+      },
+      // 获取位置
+      getLatLngs: function(target) {
+        return [target.getPath()];
+      }
+    };
+    return createMapProxy(circle, handlers);
+  }
+  // 自定义 popup
+  Popup(option) {
+    option = {
+      anchor: "bottom-center",
+      closeWhenClickMap: option.closeOnClick,
+      ...option
+    };
+    const popup = new window.AMap.InfoWindow(option);
+    const handlers = {
+      remove: function(target) {
+        target.close();
+      },
+      setLatLng: function(target, latLng) {
+        target.lat = latLng.lat;
+        target.lng = latLng.lng;
+      },
+      openOn: function(target, map) {
+        console.log(map, [target.lng, target.lat]);
+        target.open(map, [target.lng, target.lat]);
+      },
+      // 四个角
+      getBounds: function(target) {
+        return wrapBounds(target, true);
+      },
+      // 获取位置
+      getLatLngs: function(target) {
+        return [target.getPath()];
+      }
+    };
+    return createMapProxy(popup, handlers);
+  }
+  // 自定义 线条
+  Polyline(pathList = [], option = {}) {
+    if (option.dashArray) {
+      const dashArrayList = option.dashArray.split(",");
+      option.strokeStyle = "dashed";
+      option.strokeDasharray = [dashArrayList[0], dashArrayList[1]];
+    }
+    option = {
+      lineJoin: "round",
+      // 线段连接处为圆角
+      lineCap: "round",
+      // 线段端点为圆形
+      showDir: false,
+      ...option,
+      strokeColor: option.color,
+      strokeOpacity: option.opacity,
+      strokeWeight: option.weight
+    };
+    const lngLatList = [];
+    pathList.forEach((val) => {
+      lngLatList.push([val.lng, val.lat]);
+    });
+    const polyline = new AMap.Polyline({
+      path: lngLatList,
+      ...option
+    });
+    const wrappedHandlers = createWrappedHandlerStore();
+    const handlers = {
+      setStyle: function(target, setStyleOption) {
+        target.setOptions(toStrokeStyle(setStyleOption));
+      },
+      addTo: function(target, map) {
+        target.map = map;
+        map.add(target);
+      },
+      remove: function(target) {
+        target.map.remove(target);
+      },
+      // 四个角
+      getBounds: function(target) {
+        return wrapBounds(target, true);
+      },
+      getLatLngs: function(target) {
+        return [target.getPath()];
+      },
+      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 createMapProxy(polyline, handlers);
+  }
+  // 轨迹回放
+  TrackPlayer(latLngList = [], option = {}, map = null) {
+    let monitorTrack = null;
+    let speed = option.speed;
+    let marker = this.Marker({
+      zIndex: 1,
+      position: latLngList[0],
+      icon: {
+        option: {
+          iconSize: option.iconSize,
+          iconAnchor: option.iconAnchor,
+          html: option.svgContent
+        }
+      }
+    });
+    marker.addTo(map);
+    let polyline = this.Polyline(latLngList, {
+      showDir: true,
+      opacity: 1,
+      weight: 4,
+      // 线宽
+      color: option.notPassedLineColor || "#FF1875"
+      // 线颜色
+    });
+    polyline.addTo(map);
+    let passedPolyline = this.Polyline([], {
+      color: option.passedLineColor || "#2EE19E",
+      // 线颜色
+      opacity: 1,
+      weight: 4
+      // 线宽
+    });
+    passedPolyline.addTo(map);
+    marker.on("moving", (e) => {
+      if (monitorTrack) {
+        clearTimeout(monitorTrack);
+      }
+      const passedPath = e.passedPath || [];
+      monitorTrack = setTimeout(() => {
+        if (option.onEnd) option.onEnd();
+      }, 500);
+      if (passedPolyline) {
+        passedPolyline.setPath(passedPath);
+      }
+    });
+    const moveAlong = () => {
+      if (!marker) return;
+      marker.moveAlong(
+        latLngList.map((v) => [v.lng, v.lat]),
+        speed - 0
+      );
+    };
+    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 createMapProxy(marker, handlers);
+  }
+  // rectangle 正方形 circle 圆形 polygon 多边形
+  CreatePm(pmType = "rectangle", options = {}, map) {
+    let mouseToolObj = new AMap.MouseTool(map);
+    const drawStyle = {
+      fillColor: options.fillColor || "#00b0ff",
+      strokeColor: options.color || "#80d8ff"
+    };
+    mouseToolObj.on("draw", ({ obj }) => {
+      map.setFitView();
+      if (options.onChange) {
+        options.onChange(obj.getPath());
+      }
+    });
+    mouseToolObj[`${pmType}`](drawStyle);
+    const handlers = {
+      remove: function(target) {
+        target.close(true);
+        mouseToolObj = null;
+      },
+      close: function(target) {
+        target.close(true);
+      },
+      setMouseTool: function(target, toolType) {
+        target[`${toolType}`](drawStyle);
+      }
+    };
+    return createMapProxy(mouseToolObj, handlers);
+  }
+  // 电子围栏
+  CreateFence(pmType = "rectangle", options = {}, map) {
+    let polygon = null;
+    const _this = this;
+    const onChange = (pointList) => {
+      setPolygon(pointList);
+    };
+    const pm = this.CreatePm(
+      pmType,
+      {
+        ...options,
+        onChange
+      },
+      map
+    );
+    pm.close();
+    const setPolygon = (pointList) => {
+      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());
+      const polyEditor = new AMap.PolyEditor(
+        map,
+        map.getAllOverlays("polygon")[map.getAllOverlays("polygon").length - 1]
+      );
+      polyEditor.open();
+      pm.close();
+    };
+    const handlers = {
+      getPath: function(target) {
+        return polygon ? polygon.getPath() : [];
+      },
+      setFixedPoint: function(target, { lnglat, radius }) {
+        map.clearMap();
+        polygon = null;
+        let circle = _this.Circle(lnglat, {
+          radius: radius / 2,
+          // 半径
+          strokeColor: "#FF33FF",
+          // 线颜色
+          strokeOpacity: 0.7,
+          // 线透明度
+          strokeWeight: 3,
+          // 线宽
+          fillColor: "#1791fc",
+          // 填充色
+          fillOpacity: 0.5
+          // 填充透明度
+        });
+        circle.addTo(map);
+        const path = circle.getLatLngs();
+        circle.remove();
+        circle = null;
+        setPolygon(path[0]);
+      },
+      setPolygon: function(target, pointList) {
+        map.clearMap();
+        polygon = null;
+        setPolygon(pointList);
+      },
+      startDraw: function(target, toolType = "rectangle") {
+        map.clearMap();
+        polygon = null;
+        target[`${toolType}`]({
+          fillColor: options.fillColor || "#00b0ff",
+          strokeColor: options.color || "#80d8ff"
+        });
+      },
+      clearDraw: function(target) {
+        map.clearMap();
+        polygon = null;
+      },
+      remove: function(target) {
+        map.clearMap();
+        target.close(true);
+        target.remove();
+        polygon = null;
+      },
+      close: function(target) {
+        target.close(true);
+      },
+      setMouseTool: function(target, toolType) {
+        target[`${toolType}`]({
+          fillColor: "#00b0ff",
+          strokeColor: "#80d8ff"
+        });
+      }
+    };
+    return createMapProxy(pm, handlers);
+  }
+  // 测距工具 labelColor labelFillColor lineColor
+  RangingTool(options = {}, map) {
+    let rangingTool = new AMap.RangingTool(map, {
+      startMarkerOptions: {
+        content: `<div style="width: 32px; height: 32px; border-radius: 50%; background: ${options.labelColor || "#2df2ff88"}; display: flex; justify-content: center; align-items: center;">
+                    <div style="width: 12px; height: 12px; border-radius: 50%; background: ${options.labelFillColor || "#fff"}; border: 1px solid ${options.lineColor || "#2df2ff"};"></div>
+                  </div>`,
+        offset: new AMap.Pixel(-16, -16)
+      },
+      midMarkerOptions: {
+        content: `<div style="width: 12px; height: 12px; border-radius: 50%; background: ${options.labelFillColor || "#fff"}; border: 1px solid ${options.lineColor || "#2df2ff"};"></div>`,
+        offset: new AMap.Pixel(-6, -6)
+      },
+      endMarkerOptions: {
+        content: `<div style="width: 12px; height: 12px; border-radius: 50%; background: ${options.labelFillColor || "#fff"}; border: 1px solid ${options.lineColor || "#2df2ff"};"></div>`,
+        offset: new AMap.Pixel(-6, -6)
+      },
+      lineOptions: {
+        strokeColor: options.lineColor || "#2df2ff"
+      },
+      tmpLineOptions: {
+        strokeColor: options.lineColor || "#2df2ff"
+      }
+    });
+    const handlers = {
+      turnOn: function(target) {
+        target.turnOn();
+      },
+      turnOff: function(target) {
+        target.turnOff(true);
+      },
+      remove: function() {
+        rangingTool = null;
+      }
+    };
+    return createMapProxy(rangingTool, handlers);
+  }
+}
+
+export { Google as default };