@antv/l7-component 2.9.32-alpha.2 → 2.9.32-alpha.4

package/lib/marker-layer.js

@@ -0,0 +1,263 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/marker-layer.ts
+var marker_layer_exports = {};
+__export(marker_layer_exports, {
+  default: () => MarkerLayer
+});
+module.exports = __toCommonJS(marker_layer_exports);
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_eventemitter3 = require("eventemitter3");
+var import_lodash = require("lodash");
+var import_supercluster = __toESM(require("supercluster/dist/supercluster"));
+var import_marker = __toESM(require("./marker"));
+var MarkerLayer = class extends import_eventemitter3.EventEmitter {
+  constructor(option) {
+    var _a;
+    super();
+    this.markers = [];
+    this.points = [];
+    this.clusterMarkers = [];
+    this.markerLayerOption = (0, import_lodash.merge)(this.getDefault(), option);
+    (0, import_l7_utils.bindAll)(["update"], this);
+    this.zoom = ((_a = this.markerLayerOption.clusterOption) == null ? void 0 : _a.zoom) || -99;
+  }
+  getDefault() {
+    return {
+      cluster: false,
+      clusterOption: {
+        radius: 80,
+        maxZoom: 20,
+        minZoom: 0,
+        zoom: -99,
+        style: {},
+        className: ""
+      }
+    };
+  }
+  addTo(scene) {
+    this.scene = scene;
+    this.mapsService = scene.get(import_l7_core.TYPES.IMapService);
+    if (this.markerLayerOption.cluster) {
+      this.initCluster();
+      this.update();
+      this.mapsService.on("camerachange", this.update);
+      this.mapsService.on("viewchange", this.update);
+    }
+    this.mapsService.on("camerachange", this.setContainerSize.bind(this));
+    this.mapsService.on("viewchange", this.setContainerSize.bind(this));
+    this.addMarkers();
+    return this;
+  }
+  setContainerSize() {
+    if (!this.mapsService)
+      return;
+    const container = this.mapsService.getContainer();
+    this.containerSize = {
+      containerWidth: (container == null ? void 0 : container.scrollWidth) || 0,
+      containerHeight: (container == null ? void 0 : container.scrollHeight) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
+  getContainerSize() {
+    return this.containerSize;
+  }
+  addMarker(marker) {
+    const cluster = this.markerLayerOption.cluster;
+    marker.getMarkerLayerContainerSize = this.getContainerSize.bind(this);
+    if (cluster) {
+      this.addPoint(marker, this.markers.length);
+      if (this.mapsService) {
+        const zoom = this.mapsService.getZoom();
+        const bbox = this.mapsService.getBounds();
+        this.bbox = (0, import_l7_utils.padBounds)(bbox, 0.5);
+        this.zoom = Math.floor(zoom);
+        this.getClusterMarker(this.bbox, this.zoom);
+      }
+    }
+    this.markers.push(marker);
+  }
+  removeMarker(marker) {
+    this.markers.indexOf(marker);
+    const markerIndex = this.markers.indexOf(marker);
+    if (markerIndex > -1) {
+      this.markers.splice(markerIndex, 1);
+    }
+  }
+  hide() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = "0";
+    });
+    this.clusterMarkers.map((m) => {
+      m.getElement().style.opacity = "0";
+    });
+  }
+  show() {
+    this.markers.map((m) => {
+      m.getElement().style.opacity = "1";
+    });
+    this.clusterMarkers.map((m) => {
+      m.getElement().style.opacity = "1";
+    });
+  }
+  getMarkers() {
+    const cluster = this.markerLayerOption.cluster;
+    return cluster ? this.clusterMarkers : this.markers;
+  }
+  addMarkers() {
+    this.getMarkers().forEach((marker) => {
+      marker.addTo(this.scene);
+    });
+  }
+  clear() {
+    this.markers.forEach((marker) => {
+      marker.remove();
+    });
+    this.clusterMarkers.forEach((clusterMarker) => {
+      clusterMarker.remove();
+    });
+    this.markers = [];
+    this.points = [];
+    this.clusterMarkers = [];
+  }
+  destroy() {
+    this.clear();
+    this.removeAllListeners();
+    this.mapsService.off("camerachange", this.update);
+    this.mapsService.off("viewchange", this.update);
+    this.mapsService.off("camerachange", this.setContainerSize.bind(this));
+    this.mapsService.off("viewchange", this.setContainerSize.bind(this));
+  }
+  addPoint(marker, id) {
+    const { lng, lat } = marker.getLnglat();
+    const feature = {
+      geometry: {
+        type: "Point",
+        coordinates: [lng, lat]
+      },
+      properties: {
+        ...marker.getExtData(),
+        marker_id: id
+      }
+    };
+    this.points.push(feature);
+    if (this.clusterIndex) {
+      this.clusterIndex.load(this.points);
+    }
+  }
+  initCluster() {
+    if (!this.markerLayerOption.cluster) {
+      return;
+    }
+    const {
+      radius,
+      minZoom = 0,
+      maxZoom
+    } = this.markerLayerOption.clusterOption;
+    this.clusterIndex = new import_supercluster.default({
+      radius,
+      minZoom,
+      maxZoom
+    });
+    this.clusterIndex.load(this.points);
+  }
+  getClusterMarker(viewBounds, zoom) {
+    const viewBBox = viewBounds[0].concat(viewBounds[1]);
+    const clusterPoint = this.clusterIndex.getClusters(viewBBox, zoom);
+    this.clusterMarkers.forEach((marker) => {
+      marker.remove();
+    });
+    this.clusterMarkers = [];
+    clusterPoint.forEach((feature) => {
+      var _a, _b;
+      const { field, method } = this.markerLayerOption.clusterOption;
+      if ((_a = feature.properties) == null ? void 0 : _a.cluster_id) {
+        const clusterData = this.getLeaves((_b = feature.properties) == null ? void 0 : _b.cluster_id);
+        feature.properties.clusterData = clusterData;
+        if (field && method) {
+          const columnData = clusterData == null ? void 0 : clusterData.map((item) => {
+            const data = {
+              [field]: item.properties[field]
+            };
+            return data;
+          });
+          const column = import_l7_utils.Satistics.getColumn(columnData, field);
+          const stat = import_l7_utils.Satistics.getSatByColumn(method, column);
+          const fieldName = "point_" + method;
+          feature.properties[fieldName] = stat.toFixed(2);
+        }
+      }
+      const marker = this.clusterMarker(feature);
+      this.clusterMarkers.push(marker);
+      marker.addTo(this.scene);
+    });
+  }
+  getLeaves(clusterId, limit = Infinity, offset = 0) {
+    if (!clusterId) {
+      return null;
+    }
+    return this.clusterIndex.getLeaves(clusterId, limit, offset);
+  }
+  clusterMarker(feature) {
+    const clusterOption = this.markerLayerOption.clusterOption;
+    const {
+      element = this.generateElement.bind(this)
+    } = clusterOption;
+    const marker = new import_marker.default({
+      element: element(feature)
+    }).setLnglat({
+      lng: feature.geometry.coordinates[0],
+      lat: feature.geometry.coordinates[1]
+    });
+    return marker;
+  }
+  normalMarker(feature) {
+    const marker_id = feature.properties.marker_id;
+    return this.markers[marker_id];
+  }
+  update() {
+    if (!this.mapsService)
+      return;
+    if (this.markers.length === 0)
+      return;
+    const zoom = this.mapsService.getZoom();
+    const bbox = this.mapsService.getBounds();
+    if (!this.bbox || Math.abs(zoom - this.zoom) >= 1 || !(0, import_l7_utils.boundsContains)(this.bbox, bbox)) {
+      this.bbox = (0, import_l7_utils.padBounds)(bbox, 0.5);
+      this.zoom = Math.floor(zoom);
+      this.getClusterMarker(this.bbox, this.zoom);
+    }
+  }
+  generateElement(feature) {
+    const el = import_l7_utils.DOM.create("div", "l7-marker-cluster");
+    const label = import_l7_utils.DOM.create("div", "", el);
+    const span = import_l7_utils.DOM.create("span", "", label);
+    const { field, method } = this.markerLayerOption.clusterOption;
+    feature.properties.point_count = feature.properties.point_count || 1;
+    const text = field && method ? feature.properties["point_" + method] || feature.properties[field] : feature.properties.point_count;
+    span.textContent = text;
+    return el;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/marker.js

@@ -0,0 +1,307 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/marker.ts
+var marker_exports = {};
+__export(marker_exports, {
+  default: () => Marker
+});
+module.exports = __toCommonJS(marker_exports);
+var import_l7_core = require("@antv/l7-core");
+var import_l7_utils = require("@antv/l7-utils");
+var import_eventemitter3 = require("eventemitter3");
+var Marker = class extends import_eventemitter3.EventEmitter {
+  constructor(option) {
+    super();
+    this.added = false;
+    this.eventHandle = (e) => {
+      this.emit(e.type, {
+        target: e,
+        data: this.markerOption.extData,
+        lngLat: this.lngLat
+      });
+    };
+    this.markerOption = {
+      ...this.getDefault(),
+      ...option
+    };
+    (0, import_l7_utils.bindAll)(["update", "onMove", "onUp", "addDragHandler", "onMapClick"], this);
+    this.init();
+  }
+  getMarkerLayerContainerSize() {
+  }
+  getDefault() {
+    return {
+      element: void 0,
+      anchor: import_l7_utils.anchorType.BOTTOM,
+      offsets: [0, 0],
+      color: "#5B8FF9",
+      draggable: false
+    };
+  }
+  addTo(scene) {
+    this.scene = scene;
+    this.mapsService = scene.get(import_l7_core.TYPES.IMapService);
+    this.sceneSerive = scene.get(import_l7_core.TYPES.ISceneService);
+    const { element } = this.markerOption;
+    this.mapsService.getMarkerContainer().appendChild(element);
+    this.registerMarkerEvent(element);
+    this.mapsService.on("camerachange", this.update);
+    this.mapsService.on("viewchange", this.update);
+    this.update();
+    this.added = true;
+    this.emit("added");
+    return this;
+  }
+  remove() {
+    if (this.mapsService) {
+      this.mapsService.off("click", this.onMapClick);
+      this.mapsService.off("move", this.update);
+      this.mapsService.off("moveend", this.update);
+      this.mapsService.off("mousedown", this.addDragHandler);
+      this.mapsService.off("touchstart", this.addDragHandler);
+      this.mapsService.off("mouseup", this.onUp);
+      this.mapsService.off("touchend", this.onUp);
+    }
+    this.unRegisterMarkerEvent();
+    this.removeAllListeners();
+    const { element } = this.markerOption;
+    if (element) {
+      import_l7_utils.DOM.remove(element);
+    }
+    if (this.popup) {
+      this.popup.remove();
+    }
+    return this;
+  }
+  setLnglat(lngLat) {
+    this.lngLat = lngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1]
+      };
+    }
+    if (this.popup) {
+      this.popup.setLnglat(this.lngLat);
+    }
+    this.update();
+    return this;
+  }
+  getLnglat() {
+    return this.lngLat;
+  }
+  getElement() {
+    return this.markerOption.element;
+  }
+  setElement(el) {
+    if (!this.added) {
+      this.once("added", () => {
+        this.setElement(el);
+      });
+      return this;
+    }
+    const { element } = this.markerOption;
+    if (element) {
+      import_l7_utils.DOM.remove(element);
+    }
+    this.markerOption.element = el;
+    this.init();
+    this.mapsService.getMarkerContainer().appendChild(el);
+    this.registerMarkerEvent(el);
+    this.update();
+    return this;
+  }
+  openPopup() {
+    if (!this.added) {
+      this.once("added", () => {
+        this.openPopup();
+      });
+      return this;
+    }
+    const popup = this.popup;
+    if (!popup) {
+      return this;
+    }
+    if (!popup.isOpen()) {
+      popup.addTo(this.scene);
+    }
+    return this;
+  }
+  closePopup() {
+    if (!this.added) {
+      this.once("added", () => {
+        this.closePopup();
+      });
+    }
+    const popup = this.popup;
+    if (popup) {
+      popup.remove();
+    }
+    return this;
+  }
+  setPopup(popup) {
+    this.popup = popup;
+    if (this.lngLat) {
+      this.popup.setLnglat(this.lngLat);
+    }
+    return this;
+  }
+  togglePopup() {
+    const popup = this.popup;
+    if (!popup) {
+      return this;
+    } else if (popup.isOpen()) {
+      popup.remove();
+    } else {
+      popup.addTo(this.scene);
+    }
+    return this;
+  }
+  getPopup() {
+    return this.popup;
+  }
+  getOffset() {
+    return this.markerOption.offsets;
+  }
+  setDraggable(draggable) {
+    throw new Error("Method not implemented.");
+  }
+  isDraggable() {
+    return this.markerOption.draggable;
+  }
+  getExtData() {
+    return this.markerOption.extData;
+  }
+  setExtData(data) {
+    this.markerOption.extData = data;
+  }
+  update() {
+    if (!this.mapsService) {
+      return;
+    }
+    const { element, anchor } = this.markerOption;
+    this.updatePosition();
+    import_l7_utils.DOM.setTransform(element, `${import_l7_utils.anchorTranslate[anchor]}`);
+  }
+  onMapClick(e) {
+    const { element } = this.markerOption;
+    if (this.popup && element) {
+      this.togglePopup();
+    }
+  }
+  getCurrentContainerSize() {
+    const container = this.mapsService.getContainer();
+    return {
+      containerHeight: (container == null ? void 0 : container.scrollHeight) || 0,
+      containerWidth: (container == null ? void 0 : container.scrollWidth) || 0,
+      bounds: this.mapsService.getBounds()
+    };
+  }
+  updatePosition() {
+    if (!this.mapsService) {
+      return;
+    }
+    const { element, offsets } = this.markerOption;
+    const { lng, lat } = this.lngLat;
+    const pos = this.mapsService.lngLatToContainer([lng, lat]);
+    if (element) {
+      element.style.display = "block";
+      element.style.whiteSpace = "nowrap";
+      const { containerHeight, containerWidth, bounds } = this.getMarkerLayerContainerSize() || this.getCurrentContainerSize();
+      if (!bounds)
+        return;
+      if (Math.abs(bounds[0][0]) > 180 || Math.abs(bounds[1][0]) > 180) {
+        if (pos.x > containerWidth) {
+          const newPos = this.mapsService.lngLatToContainer([lng - 360, lat]);
+          pos.x = newPos.x;
+        }
+        if (pos.x < 0) {
+          const newPos = this.mapsService.lngLatToContainer([lng + 360, lat]);
+          pos.x = newPos.x;
+        }
+      }
+      if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
+        element.style.display = "none";
+      }
+      element.style.left = pos.x + offsets[0] + "px";
+      element.style.top = pos.y - offsets[1] + "px";
+    }
+  }
+  init() {
+    let { element } = this.markerOption;
+    const { color, anchor } = this.markerOption;
+    if (!element) {
+      this.defaultMarker = true;
+      element = import_l7_utils.DOM.create("div");
+      this.markerOption.element = element;
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttributeNS(null, "display", "block");
+      svg.setAttributeNS(null, "height", "48px");
+      svg.setAttributeNS(null, "width", "48px");
+      svg.setAttributeNS(null, "viewBox", "0 0 1024 1024");
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttributeNS(null, "d", "M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z");
+      path.setAttributeNS(null, "fill", color);
+      svg.appendChild(path);
+      element.appendChild(svg);
+    }
+    import_l7_utils.DOM.addClass(element, "l7-marker");
+    Object.keys(this.markerOption.style || {}).forEach((key) => {
+      var _a, _b;
+      const value = ((_a = this.markerOption) == null ? void 0 : _a.style) && ((_b = this.markerOption) == null ? void 0 : _b.style[key]);
+      if (element) {
+        element.style[key] = value;
+      }
+    });
+    element.addEventListener("click", (e) => {
+      this.onMapClick(e);
+    });
+    element.addEventListener("click", this.eventHandle);
+    (0, import_l7_utils.applyAnchorClass)(element, anchor, "marker");
+  }
+  registerMarkerEvent(element) {
+    element.addEventListener("mousemove", this.eventHandle);
+    element.addEventListener("click", this.eventHandle);
+    element.addEventListener("mousedown", this.eventHandle);
+    element.addEventListener("mouseup", this.eventHandle);
+    element.addEventListener("dblclick", this.eventHandle);
+    element.addEventListener("contextmenu", this.eventHandle);
+    element.addEventListener("mouseover", this.eventHandle);
+    element.addEventListener("mouseout", this.eventHandle);
+  }
+  unRegisterMarkerEvent() {
+    const element = this.getElement();
+    element.removeEventListener("mousemove", this.eventHandle);
+    element.removeEventListener("click", this.eventHandle);
+    element.removeEventListener("mousedown", this.eventHandle);
+    element.removeEventListener("mouseup", this.eventHandle);
+    element.removeEventListener("dblclick", this.eventHandle);
+    element.removeEventListener("contextmenu", this.eventHandle);
+    element.removeEventListener("mouseover", this.eventHandle);
+    element.removeEventListener("mouseout", this.eventHandle);
+  }
+  addDragHandler(e) {
+    throw new Error("Method not implemented.");
+  }
+  onUp(e) {
+    throw new Error("Method not implemented.");
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});