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

package/src/openlayer/OpenlayerPolyline.ts

@@ -1,289 +1,303 @@
-
-import { OpenlayerMap } from "./OpenlayerMap";
-import Feature from 'ol/Feature.js'
-import LineString from 'ol/geom/LineString.js'
-import { Icon, Stroke, Style } from 'ol/style.js'
-import { fromLonLat, toLonLat } from "ol/proj";
-import { Polyline } from "../basic/Polyline";
-import VectorSource from "ol/source/Vector";
-import VectorLayer from "ol/layer/Vector";
-import iconPoint from '../assets/point.png'
-import iconAdd from '../assets/add.png'
-import Point from 'ol/geom/Point.js'
-import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
-const styleNode = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconPoint,
-    crossOrigin: 'anonymous'
-  })
-});
-
-const styleVirtual = new Style({
-  image: new Icon({
-    width: 16,
-    height: 16,
-    src: iconAdd,
-    crossOrigin: 'anonymous'
-  })
-});
-
-export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
-  const { event, viewer, getFromLonLat, isFromLonLat } = map
-
-  const source = new VectorSource();
-
-  const layer = new VectorLayer({
-    source,
-    visible: polyline.show
-  })
-  viewer.addLayer(layer)
-
-  let status = 0
-  let skip = 0
-
-  const feature = new Feature()
-  const geometry = new LineString([[0, 0], [0, 0]])
-
-  const stroke = new Stroke({
-    color: polyline.stroke,
-    width: polyline.lineWidth,
-    lineDash: polyline.dash ? [10, 10] : undefined,
-  })
-  const style = new Style({
-    zIndex: 50,
-    stroke,
-  })
-
-  const _event = {
-    cursor: polyline.cursor,
-    silent: polyline.silent,
-    onPointerIn() {
-      status == 2 && polyline.event.trigger('pointer-in')
-    },
-    onPointerOut() {
-      status == 2 && polyline.event.trigger('pointer-out')
-    },
-    onLClick() {
-      status == 2 && polyline.event.trigger('left-click')
-    },
-    onRClick() {
-      if (polyline.menu) {
-        map.menu.show(polyline.menu);
-      }
-      status == 2 && polyline.event.trigger('right-click')
-    },
-    onDbClick() {
-      polyline.editable && status == 2 && setTimeout(() => {
-        polyline.event.trigger('start-edit')
-      });
-    }
-  }
-
-  feature.setGeometry(geometry)
-  feature.setStyle(style)
-  feature.set('event', _event, true)
-  if (polyline.coordinates) {
-    status = 2
-    geometry.setCoordinates(polyline.coordinates.map(e => getFromLonLat(e, isFromLonLat)))
-    layer.setZIndex(polyline.coordinates[0][2] ?? 1)
-    source.addFeature(feature)
-  }
-
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--
-      return
-    }
-
-    e.forEach(key => {
-      switch (key) {
-        case 'show':
-          layer.setVisible(polyline.show)
-          break;
-        case 'editable':
-          break;
-        case 'coordinates':
-          if (polyline.coordinates) {
-            geometry.setCoordinates(polyline.coordinates.map(e => getFromLonLat(e, isFromLonLat)))
-            layer.setZIndex(polyline.coordinates[0][2] ?? 1)
-            switch (status) {
-              case 0:
-                source.addFeature(feature)
-                status = 2;
-                break;
-              case 1:
-                status = 2;
-                break;
-            }
-          } else {
-            source.removeFeature(feature)
-            status == 3 && editor.setCoordinates([])
-            status = 0
-          }
-
-          break;
-
-        case 'lineWidth':
-          stroke.setWidth(polyline.lineWidth)
-          break;
-        case 'stroke':
-          stroke.setColor(polyline.stroke)
-          break;
-        case 'dash':
-          stroke.setLineDash(polyline.dash ? [10, 10] : undefined)
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`)
-      }
-    })
-
-    feature.changed()
-  }
-  let cache = [[0]]
-  let activeNode: ChainNode<Feature, Feature>
-  const onMouseMove = () => {
-    switch (status) {
-      case 1:
-        cache.pop()
-        cache.push(getFromLonLat(event.geography))
-        geometry.setCoordinates(cache)
-        break
-      case 4:
-        activeNode.update(getFromLonLat(event.geography))
-        geometry.setCoordinates(editor.getCoordinates())
-        break;
-    }
-  }
-
-  const onClick = () => {
-    switch (status) {
-      case 0:
-        status = 1
-        _event.silent = true;
-        cache = [getFromLonLat(event.geography)]
-        cache.push(cache[0])
-        geometry.setCoordinates(cache)
-        source.addFeature(feature)
-        break;
-      case 1:
-        cache.push(cache[cache.length - 1])
-        geometry.setCoordinates(cache)
-        break
-    }
-  }
-
-  const onDbClick = () => {
-    switch (status) {
-      case 1:
-        status = 2
-        skip++
-        cache.pop()
-        cache.pop()
-        geometry.setCoordinates(cache)
-        polyline.coordinates = cache.map(e => toLonLat(e))
-        _event.silent = polyline.silent
-        polyline.event.trigger('data-loaded')
-        polyline.event.trigger('pointer-in')
-        break
-      case 3:
-        polyline.event.trigger('stop-edit')
-        break
-    }
-  }
-
-  const editor = new PolylineEditor<Feature<Point>, Feature<Point>>()
-
-  editor.on('create-node', (n) => {
-    if (n.type == 'node') {
-      const feature = new Feature(new Point(n.position))
-      feature.setStyle(styleNode)
-      feature.set('event', {
-        cursor: 'move',
-        onPointerDown() {
-          status = 4
-          activeNode = n
-          map.moveable = false
-        },
-        onPointerUp() {
-          if (status == 4) {
-            status = 3
-            map.moveable = true
-            activeNode = undefined
-          }
-        },
-        onDbClick() {
-          n.destroy()
-          geometry.setCoordinates(editor.getCoordinates())
-        }
-      }, true)
-      source.addFeature(feature)
-      n.shape = feature
-    } else {
-      const feature = new Feature(new Point(n.position))
-      feature.setStyle(styleVirtual)
-      feature.set('event', {
-        cursor: 'pointer',
-        onPointerDown() {
-          status = 4
-          activeNode = n.insert()
-          map.cursor = 'move'
-          map.moveable = false
-        },
-      }, true)
-      source.addFeature(feature)
-      n.shape = feature
-    }
-  })
-
-  editor.on('update-node', (n) => {
-    n.shape.getGeometry().setCoordinates(n.position)
-  })
-  editor.on('remove-node', (n) => {
-    source.removeFeature(n.shape)
-  })
-  editor.on('empty', () => {
-    source.removeFeature(feature)
-    status = 0
-  })
-  const onStartEdit = () => {
-    switch (status) {
-      case 2:
-        status = 3
-        editor.setCoordinates(geometry.getCoordinates())
-        break
-    }
-
-  }
-
-  const onStopEdit = () => {
-    if (status == 3) {
-      status = 2
-      skip++
-      polyline.coordinates = editor.getCoordinates().map(e => toLonLat(e))
-      editor.setCoordinates([])
-    }
-
-  }
-
-  const onDestroy = () => {
-    viewer.removeLayer(layer)
-    event.off('pointer-move', onMouseMove)
-    event.off('left-click', onClick)
-    event.off('double-click', onDbClick)
-    polyline.event.off('update', onUpdate)
-    polyline.event.off('start-edit', onStartEdit)
-    polyline.event.off('stop-edit', onStopEdit)
-    polyline.event.off('destroy', onDestroy)
-
-  }
-
-  event.on('pointer-move', onMouseMove)
-  event.on('left-click', onClick)
-  event.on('double-click', onDbClick)
-  polyline.event.on('update', onUpdate)
-  polyline.event.on('start-edit', onStartEdit)
-  polyline.event.on('stop-edit', onStopEdit)
-  polyline.event.on('destroy', onDestroy)
-}
+import { OpenlayerMap } from "./OpenlayerMap";
+import Feature from "ol/Feature.js";
+import LineString from "ol/geom/LineString.js";
+import { Icon, Stroke, Style } from "ol/style.js";
+import { fromLonLat, toLonLat } from "ol/proj";
+import { Polyline } from "../basic/Polyline";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
+import Point from "ol/geom/Point.js";
+import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
+export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
+  const { event, viewer } = map;
+  // getFromLonLat 使用 map.getFromLonLat 调用，保证 this 指向正确
+
+  const source = new VectorSource();
+
+  const layer = new VectorLayer({
+    source,
+    visible: polyline.show,
+  });
+  viewer.addLayer(layer);
+
+  let status = 0;
+  let skip = 0;
+
+  const feature = new Feature();
+  const geometry = new LineString([
+    [0, 0],
+    [0, 0],
+  ]);
+
+  const stroke = new Stroke({
+    color: polyline.stroke,
+    width: polyline.lineWidth,
+    lineDash: polyline.dash ? [10, 10] : undefined,
+  });
+  const style = new Style({
+    zIndex: polyline.height ?? 2,
+    stroke,
+  });
+
+  const styleNode = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconPoint,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
+
+  const styleVirtual = new Style({
+    image: new Icon({
+      width: 16,
+      height: 16,
+      src: iconAdd,
+      crossOrigin: "anonymous",
+    }),
+    // 保证编辑的点位高于线
+    zIndex: style.getZIndex() + 5,
+  });
+
+  const _event = {
+    cursor: polyline.cursor,
+    silent: polyline.silent,
+    onPointerIn() {
+      status == 2 && polyline.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      status == 2 && polyline.event.trigger("pointer-out");
+    },
+    onLClick() {
+      status == 2 && polyline.event.trigger("left-click");
+    },
+    onRClick() {
+      if (polyline.menu) {
+        map.menu.show(polyline.menu);
+      }
+      status == 2 && polyline.event.trigger("right-click");
+    },
+    onDbClick() {
+      polyline.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          polyline.event.trigger("start-edit");
+        });
+    },
+  };
+
+  feature.setGeometry(geometry);
+  feature.setStyle(style);
+  feature.set("event", _event, true);
+  if (polyline.coordinates) {
+    status = 2;
+    geometry.setCoordinates(polyline.coordinates.map((e) => map.getFromLonLat(e)));
+    layer.setZIndex(polyline.coordinates[0][2] ?? 1);
+    source.addFeature(feature);
+  }
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          layer.setVisible(polyline.show);
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          if (polyline.coordinates) {
+            geometry.setCoordinates(polyline.coordinates.map((e) => map.getFromLonLat(e)));
+            layer.setZIndex(polyline.coordinates[0][2] ?? 1);
+            switch (status) {
+              case 0:
+                source.addFeature(feature);
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            source.removeFeature(feature);
+            status == 3 && editor.setCoordinates([]);
+            status = 0;
+          }
+
+          break;
+
+        case "lineWidth":
+          stroke.setWidth(polyline.lineWidth);
+          break;
+        case "stroke":
+          stroke.setColor(polyline.stroke);
+          break;
+        case "dash":
+          stroke.setLineDash(polyline.dash ? [10, 10] : undefined);
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+
+    feature.changed();
+  };
+  let cache = [[0]];
+  let activeNode: ChainNode<Feature, Feature>;
+  const onMouseMove = () => {
+    switch (status) {
+      case 1:
+        cache.pop();
+        cache.push(map.getFromLonLat(event.geography));
+        geometry.setCoordinates(cache);
+        break;
+      case 4:
+        activeNode.update(map.getFromLonLat(event.geography));
+        geometry.setCoordinates(editor.getCoordinates());
+        break;
+    }
+  };
+
+  const onClick = () => {
+    switch (status) {
+      case 0:
+        status = 1;
+        _event.silent = true;
+        cache = [map.getFromLonLat(event.geography)];
+        cache.push(cache[0]);
+        geometry.setCoordinates(cache);
+        source.addFeature(feature);
+        break;
+      case 1:
+        cache.push(cache[cache.length - 1]);
+        geometry.setCoordinates(cache);
+        break;
+    }
+  };
+
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
+        geometry.setCoordinates(cache);
+        polyline.coordinates = cache.map((e) => toLonLat(e));
+        _event.silent = polyline.silent;
+        polyline.event.trigger("data-loaded");
+        polyline.event.trigger("pointer-in");
+        break;
+      case 3:
+        polyline.event.trigger("stop-edit");
+        break;
+    }
+  };
+
+  const editor = new PolylineEditor<Feature<Point>, Feature<Point>>();
+
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
+      const feature = new Feature(new Point(n.position));
+      feature.setStyle(styleNode);
+      feature.set(
+        "event",
+        {
+          cursor: "move",
+          onPointerDown() {
+            status = 4;
+            activeNode = n;
+            map.moveable = false;
+          },
+          onPointerUp() {
+            if (status == 4) {
+              status = 3;
+              map.moveable = true;
+              activeNode = undefined;
+            }
+          },
+          onDbClick() {
+            n.destroy();
+            geometry.setCoordinates(editor.getCoordinates());
+          },
+        },
+        true,
+      );
+      source.addFeature(feature);
+      n.shape = feature;
+    } else {
+      const feature = new Feature(new Point(n.position));
+      feature.setStyle(styleVirtual);
+      feature.set(
+        "event",
+        {
+          cursor: "pointer",
+          onPointerDown() {
+            status = 4;
+            activeNode = n.insert();
+            map.cursor = "move";
+            map.moveable = false;
+          },
+        },
+        true,
+      );
+      source.addFeature(feature);
+      n.shape = feature;
+    }
+  });
+
+  editor.on("update-node", (n) => {
+    n.shape.getGeometry().setCoordinates(n.position);
+  });
+  editor.on("remove-node", (n) => {
+    source.removeFeature(n.shape);
+  });
+  editor.on("empty", () => {
+    source.removeFeature(feature);
+    status = 0;
+  });
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3;
+        editor.setCoordinates(geometry.getCoordinates());
+        break;
+    }
+  };
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2;
+      skip++;
+      polyline.coordinates = editor.getCoordinates().map((e) => toLonLat(e));
+      editor.setCoordinates([]);
+    }
+  };
+
+  const onDestroy = () => {
+    viewer.removeLayer(layer);
+    event.off("pointer-move", onMouseMove);
+    event.off("left-click", onClick);
+    event.off("double-click", onDbClick);
+    polyline.event.off("update", onUpdate);
+    polyline.event.off("start-edit", onStartEdit);
+    polyline.event.off("stop-edit", onStopEdit);
+    polyline.event.off("destroy", onDestroy);
+  };
+
+  event.on("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  event.on("double-click", onDbClick);
+  polyline.event.on("update", onUpdate);
+  polyline.event.on("start-edit", onStartEdit);
+  polyline.event.on("stop-edit", onStopEdit);
+  polyline.event.on("destroy", onDestroy);
+}

package/src/utils/Image.ts

@@ -1,5 +1,3 @@
-
-
 /**
  * 加载图片
  * @param src 路径
@@ -19,28 +17,26 @@ export function loadImage(src: string): Promise<HTMLImageElement | undefined> {
   });
 }
 
-
-
 export function coverSolidColor(img: HTMLImageElement | HTMLCanvasElement, color: number) {
-  const canvas = document.createElement('canvas')
+  const canvas = document.createElement("canvas");
 
-  canvas.width = img.width
-  canvas.height = img.height
-  const ctx = canvas.getContext('2d')
-  ctx.drawImage(img, 0, 0)
-  const imgaeData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-  const r = (color >> 16) % 256
-  const g = (color & 0xff00) >> 8
-  const b = color & 0xff
+  canvas.width = img.width;
+  canvas.height = img.height;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(img, 0, 0);
+  const imgaeData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const r = (color >> 16) % 256;
+  const g = (color & 0xff00) >> 8;
+  const b = color & 0xff;
   for (let i = 0; i < imgaeData.data.length; i += 4) {
     if (imgaeData.data[i + 3] > 0) {
-      imgaeData.data[i] = r
-      imgaeData.data[i + 1] = g
-      imgaeData.data[i + 2] = b
-      imgaeData.data[i + 3] = 255
+      imgaeData.data[i] = r;
+      imgaeData.data[i + 1] = g;
+      imgaeData.data[i + 2] = b;
+      imgaeData.data[i + 3] = 255;
     }
   }
-  ctx.putImageData(imgaeData, 0, 0)
+  ctx.putImageData(imgaeData, 0, 0);
 
-  return canvas
-}
+  return canvas;
+}