mapboxgl-tools 1.7.6 → 1.7.7

package/dist/ui.es.js

@@ -22111,6 +22111,7 @@ const IMAGE_POSCONTROL_NOR = "IMAGE_POSCONTROL_NOR";
 const SOURCE_WBIOKR_POSCONTROL = "SOURCE_WBIOKR_POSCONTROL";
 const LAYER_WBIOKR_POSCONTROL = "LAYER_WBIOKR_POSCONTROL";
 const options$1 = {
+  type: "feature",
   title: "\u5B9A\u4F4D\u6492\u70B9",
   normalColor: "#000",
   layout: {
@@ -22147,6 +22148,7 @@ class PositionControl extends KeyboardControl {
     };
     this.value = "";
     this.index = -1;
+    this.markers = null;
   }
   get mainClass() {
     return `wbiokr-control-${this.name}`;
@@ -22173,33 +22175,52 @@ class PositionControl extends KeyboardControl {
     return this.index;
   }
   set current(val) {
-    this.index = val;
-    if (this._map.getSource(SOURCE_WBIOKR_POSCONTROL)) {
-      const newLocs = this._coords();
-      const features = newLocs.map((loc, INDEX) => {
-        return {
-          type: "Feature",
-          geometry: {
-            type: "Point",
-            coordinates: loc
-          },
-          properties: {
-            current: Number(val) === INDEX,
-            index: INDEX
-          }
-        };
-      });
-      this._map.getSource(SOURCE_WBIOKR_POSCONTROL).setData({
-        type: "FeatureCollection",
-        features
-      });
-      const currentLoc = newLocs[val];
-      if (currentLoc) {
-        this._map.flyTo({
-          center: currentLoc,
-          essential: false,
-          duration: 100
+    if (this.options.type === "feature") {
+      if (this._map.getSource(SOURCE_WBIOKR_POSCONTROL)) {
+        const newLocs = this._coords();
+        const features = newLocs.map((loc, INDEX) => {
+          return {
+            type: "Feature",
+            geometry: {
+              type: "Point",
+              coordinates: loc
+            },
+            properties: {
+              current: Number(val) === INDEX,
+              index: INDEX
+            }
+          };
         });
+        this._map.getSource(SOURCE_WBIOKR_POSCONTROL).setData({
+          type: "FeatureCollection",
+          features
+        });
+        const currentLoc = newLocs[val];
+        if (currentLoc) {
+          this._map.flyTo({
+            center: currentLoc,
+            essential: false,
+            duration: 100
+          });
+        }
+      }
+    } else if (this.options.type === "marker") {
+      if (!this.markers)
+        return;
+      const currentMarker = this.markers[val];
+      if (!currentMarker)
+        return;
+      const lngLat = currentMarker.getLngLat();
+      this._map.flyTo({
+        center: [lngLat.lng, lngLat.lat],
+        essential: false,
+        duration: 100
+      });
+      const ele = currentMarker.getElement();
+      ele.setAttribute("src", IconActive);
+      const prevMarker = this.markers[this.index];
+      if (prevMarker) {
+        prevMarker.getElement().setAttribute("src", IconNormal);
       }
     }
     const currentDom = this._container.querySelector(".wbokr-position-selected");
@@ -22210,6 +22231,7 @@ class PositionControl extends KeyboardControl {
     if (nextDom) {
       nextDom.className += " wbokr-position-selected";
     }
+    this.index = val;
   }
   onAdd(map) {
     this._map = map;
@@ -22244,19 +22266,22 @@ class PositionControl extends KeyboardControl {
     this._map.on("click", (mapEvent) => {
       if (!this.flag)
         return;
-      const feas = this._map.queryRenderedFeatures([mapEvent.point.x, mapEvent.point.y]);
-      const targetFea = feas.find((o) => o.source === SOURCE_WBIOKR_POSCONTROL && o.layer.id === LAYER_WBIOKR_POSCONTROL);
-      if (!targetFea)
-        return;
-      const newIndex = targetFea.properties.index;
-      this.current = newIndex;
+      if (this.options.type === "feature") {
+        const feas = this._map.queryRenderedFeatures([mapEvent.point.x, mapEvent.point.y]);
+        const targetFea = feas.find((o) => o.source === SOURCE_WBIOKR_POSCONTROL && o.layer.id === LAYER_WBIOKR_POSCONTROL);
+        if (!targetFea)
+          return;
+        const newIndex = targetFea.properties.index;
+        this.current = newIndex;
+      }
     });
   }
   _open() {
-    this._onOpen();
+    this._onOpen && this._onOpen();
   }
   _close() {
-    this._onClose();
+    this.markers = null;
+    this._onClose && this._onClose();
   }
   _resetData() {
     this.flagValue = false;
@@ -22264,45 +22289,58 @@ class PositionControl extends KeyboardControl {
   _navigate() {
     this.current = -1;
     const newLocs = this._coords();
-    const features = newLocs.map((loc, index2) => {
-      return {
-        type: "Feature",
-        geometry: {
-          type: "Point",
-          coordinates: loc
-        },
-        properties: {
-          current: false,
-          index: index2
-        }
-      };
-    });
-    if (!this._map.getSource(SOURCE_WBIOKR_POSCONTROL)) {
-      this._map.addSource(SOURCE_WBIOKR_POSCONTROL, {
-        type: "geojson",
-        data: {
+    if (this.options.type === "feature") {
+      const features = newLocs.map((loc, index2) => {
+        return {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: loc
+          },
+          properties: {
+            current: false,
+            index: index2
+          }
+        };
+      });
+      if (!this._map.getSource(SOURCE_WBIOKR_POSCONTROL)) {
+        this._map.addSource(SOURCE_WBIOKR_POSCONTROL, {
+          type: "geojson",
+          data: {
+            type: "FeatureCollection",
+            features
+          }
+        });
+      } else {
+        this._map.getSource(SOURCE_WBIOKR_POSCONTROL).setData({
           type: "FeatureCollection",
           features
-        }
-      });
-    } else {
-      this._map.getSource(SOURCE_WBIOKR_POSCONTROL).setData({
-        type: "FeatureCollection",
-        features
-      });
-    }
-    if (!this._map.getLayer(LAYER_WBIOKR_POSCONTROL)) {
-      this._map.addLayer({
-        type: "symbol",
-        id: LAYER_WBIOKR_POSCONTROL,
-        source: SOURCE_WBIOKR_POSCONTROL,
-        layout: {
-          ...this.options.layout
-        },
-        paint: {
-          ...this.options.paint
-        }
+        });
+      }
+      if (!this._map.getLayer(LAYER_WBIOKR_POSCONTROL)) {
+        this._map.addLayer({
+          type: "symbol",
+          id: LAYER_WBIOKR_POSCONTROL,
+          source: SOURCE_WBIOKR_POSCONTROL,
+          layout: {
+            ...this.options.layout
+          },
+          paint: {
+            ...this.options.paint
+          }
+        });
+      }
+    } else if (this.options.type === "marker") {
+      const newMarkers = newLocs.map((loc, index2) => {
+        const el = document.createElement("img");
+        el.className = "wbiokr-marker w-30 z-1";
+        el.src = IconNormal;
+        el.onclick = () => {
+          this.current = index2;
+        };
+        return new mapboxgl.Marker(el).setLngLat(loc).addTo(this._map);
       });
+      this.markers = newMarkers;
     }
     const ul = this._container.querySelector("ul");
     ul.innerHTML = "";