@hzab/map-combine 0.4.1 → 0.4.2-alpha.1

package/src/openlayer/OpenlayerPoint.ts

@@ -1,177 +1,185 @@
-import { Point } from "../basic/Point";
-import { OpenlayerMap } from "./OpenlayerMap";
-import Feature from 'ol/Feature.js'
-import OlPoint from 'ol/geom/Point.js'
-import { Icon, Style } from 'ol/style.js'
-import { fromLonLat } from "ol/proj";
-import VectorSource from "ol/source/Vector";
-import VectorLayer from "ol/layer/Vector";
-const RD = 0.017453292519943295
-
-export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
-  const { viewer, event, getFromLonLat, isFromLonLat } = map
-  let status = 0
-
-  const source = new VectorSource();
-  const layer = new VectorLayer({
-    source,
-    visible: point.show
-  })
-  viewer.addLayer(layer)
-  const feature = new Feature()
-  const geometry = new OlPoint([0, 0])
-  const style = new Style({
-    image: new Icon({
-      width: point.size[0],
-      height: point.size[1],
-      src: point.src,
-      rotation: point.rotation * RD,
-      anchor: point.center,
-      crossOrigin: 'anonymous'
-    })
-  });
-
-  const _event = {
-    cursor: point.cursor,
-    silent: point.silent,
-    onPointerIn() {
-      point.event.trigger('pointer-in')
-    },
-    onPointerOut() {
-      point.event.trigger('pointer-out')
-    },
-    onLClick() {
-      point.event.trigger('left-click')
-    },
-    onRClick() {
-      point.event.trigger('right-click')
-    },
-    onPointerDown() {
-      if (point.editable && status == 2) {
-        status = 3
-        map.moveable = false
-      }
-    },
-    onPointerUp() {
-      if (point.editable && status == 3) {
-        status = 2;
-        map.moveable = true;
-        point.coordinates = [event.geography[0], event.geography[1], point.height];
-        point.event.trigger('data-update')
-      }
-    }
-  }
-
-  feature.setGeometry(geometry)
-  feature.setStyle(style)
-  feature.set('event', _event, true)
-  if (point.coordinates) {
-    status = 2
-    geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat))
-    layer.setZIndex(point.coordinates[2] ?? 1)
-    point.event.trigger('data-loaded')
-    source.addFeature(feature)
-  }
-
-
-  const onUpdate = (e: Set<string>) => {
-    const keys = new Set()
-    e.forEach(key => {
-      switch (key) {
-        case 'show':
-          if (status) {
-            layer.setVisible(point.show)
-          }
-          break;
-        case 'editable':
-          break;
-        case 'coordinates':
-          if (point.coordinates) {
-            geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat))
-            layer.setZIndex(point.coordinates[2])
-            switch (status) {
-              case 0:
-                source.addFeature(feature)
-                status = 2;
-                break;
-              case 1:
-                status = 2;
-                break;
-            }
-          } else {
-            source.removeFeature(feature)
-            status = 0
-          }
-          break;
-        case 'src':
-          keys.add('icon')
-          break;
-        case 'size':
-          keys.add('icon')
-          break;
-        case 'center':
-          keys.add('icon')
-          break;
-        case 'rotation':
-          keys.add('icon')
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`)
-      }
-    })
-
-    keys.forEach(e => {
-      switch (e) {
-        case 'icon':
-          style.setImage(new Icon({
-            width: point.size[0],
-            height: point.size[1],
-            src: point.src,
-            rotation: point.rotation * RD,
-            anchor: point.center,
-            crossOrigin: 'anonymous'
-          }))
-          break;
-      }
-    })
-    feature.changed()
-  }
-
-  const onMouseMove = () => {
-    const coordinates = [event.geography[0], event.geography[1], point.height];
-    switch (status) {
-      case 0:
-        status = 1
-        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat))
-        source.addFeature(feature)
-        break;
-      case 1:
-      case 3:
-        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat))
-        break
-    }
-  }
-
-  const onClick = () => {
-    if (status == 1) {
-      status = 2
-      point.coordinates = [event.geography[0], event.geography[1], point.height];
-      point.event.trigger('pointer-in')
-    }
-  }
-
-
-  const onDestroy = () => {
-    source.removeFeature(feature)
-    event.off('pointer-move', onMouseMove)
-    event.off('left-click', onClick)
-    point.event.off('update', onUpdate)
-    point.event.off('destroy', onDestroy)
-
-  }
-
-  event.on('pointer-move', onMouseMove)
-  event.on('left-click', onClick)
-  point.event.on('update', onUpdate)
-  point.event.on('destroy', onDestroy)
-}
+import { Point } from "../basic/Point";
+import { OpenlayerMap } from "./OpenlayerMap";
+import Feature from "ol/Feature.js";
+import OlPoint from "ol/geom/Point.js";
+import { Icon, Style } from "ol/style.js";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+const RD = 0.017453292519943295;
+
+/**
+ * 获取点位的 zIndex/height 值
+ * @param point
+ * @returns
+ */
+function getPointZIndex(point) {
+  return point?.coordinates?.[2] ?? point.height ?? 3;
+}
+
+export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
+  const { viewer, event, getFromLonLat, isFromLonLat } = map;
+  let status = 0;
+
+  const source = new VectorSource();
+  const layer = new VectorLayer({
+    source,
+    visible: point.show,
+  });
+  viewer.addLayer(layer);
+  const feature = new Feature();
+  const geometry = new OlPoint([0, 0]);
+  const style = new Style({
+    image: new Icon({
+      width: point.size[0],
+      height: point.size[1],
+      src: point.src,
+      rotation: point.rotation * RD,
+      anchor: point.center,
+      crossOrigin: "anonymous",
+    }),
+    zIndex: 3,
+  });
+
+  const _event = {
+    cursor: point.cursor,
+    silent: point.silent,
+    onPointerIn() {
+      point.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      point.event.trigger("pointer-out");
+    },
+    onLClick() {
+      point.event.trigger("left-click");
+    },
+    onRClick() {
+      point.event.trigger("right-click");
+    },
+    onPointerDown() {
+      if (point.editable && status == 2) {
+        status = 3;
+        map.moveable = false;
+      }
+    },
+    onPointerUp() {
+      if (point.editable && status == 3) {
+        status = 2;
+        map.moveable = true;
+        point.coordinates = [event.geography[0], event.geography[1], getPointZIndex(point)];
+        point.event.trigger("data-update");
+      }
+    },
+  };
+
+  feature.setGeometry(geometry);
+  feature.setStyle(style);
+  feature.set("event", _event, true);
+  if (point.coordinates) {
+    status = 2;
+    geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat));
+    layer.setZIndex(getPointZIndex(point));
+    point.event.trigger("data-loaded");
+    source.addFeature(feature);
+  }
+
+  const onUpdate = (e: Set<string>) => {
+    const keys = new Set();
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (status) {
+            layer.setVisible(point.show);
+          }
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          if (point.coordinates) {
+            geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat));
+            layer.setZIndex(getPointZIndex(point));
+            switch (status) {
+              case 0:
+                source.addFeature(feature);
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            source.removeFeature(feature);
+            status = 0;
+          }
+          break;
+        case "src":
+          keys.add("icon");
+          break;
+        case "size":
+          keys.add("icon");
+          break;
+        case "center":
+          keys.add("icon");
+          break;
+        case "rotation":
+          keys.add("icon");
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+
+    keys.forEach((e) => {
+      switch (e) {
+        case "icon":
+          style.setImage(
+            new Icon({
+              width: point.size[0],
+              height: point.size[1],
+              src: point.src,
+              rotation: point.rotation * RD,
+              anchor: point.center,
+              crossOrigin: "anonymous",
+            }),
+          );
+          break;
+      }
+    });
+    feature.changed();
+  };
+
+  const onMouseMove = () => {
+    const coordinates = [event.geography[0], event.geography[1], getPointZIndex(point)];
+    switch (status) {
+      case 0:
+        status = 1;
+        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat));
+        source.addFeature(feature);
+        break;
+      case 1:
+      case 3:
+        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat));
+        break;
+    }
+  };
+
+  const onClick = () => {
+    if (status == 1) {
+      status = 2;
+      point.coordinates = [event.geography[0], event.geography[1], getPointZIndex(point)];
+      point.event.trigger("pointer-in");
+    }
+  };
+
+  const onDestroy = () => {
+    source.removeFeature(feature);
+    event.off("pointer-move", onMouseMove);
+    event.off("left-click", onClick);
+    point.event.off("update", onUpdate);
+    point.event.off("destroy", onDestroy);
+  };
+
+  event.on("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  point.event.on("update", onUpdate);
+  point.event.on("destroy", onDestroy);
+}