@hzab/map-combine 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/map-combine0.2.3
+
+fix: 流动线可配置图形+颜色
+
 # @hzab/map-combine0.2.2
 
 fix: openlayer point 问题修复

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/cesium/CesiumPolyline.ts

@@ -1,115 +1,110 @@
 import { Polyline } from "../basic/Polyline";
 import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
 import { CesiumMap } from "./CesiumMap";
-import iconPoint from '../assets/point.png'
-import iconAdd from '../assets/add.png'
-
-
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
 
 const source = `
 czm_material czm_getMaterial(czm_materialInput materialInput){
     czm_material material = czm_getDefaultMaterial(materialInput);
-    vec2 st =vec2(fract(materialInput.st.x*k), materialInput.st.y);
-    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed*czm_frameNumber*0.005)), st.t));
-    material.alpha = colorImage.a;
-    material.diffuse = colorImage.xyz;
+    vec2 st = vec2(fract(materialInput.st.x * k), materialInput.st.y);
+    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed * czm_frameNumber * 0.005)), st.t));
+    vec3 tintedColor = color.rgb;
+    material.diffuse = tintedColor;
+    material.alpha = colorImage.a * color.a;
     return material;
-}`
-
-
+}`;
 function createLineMaterial(e: Polyline<unknown>) {
-
   if (e.icon || e.flow) {
     const material = new Cesium.Material({
       fabric: {
-        type: 'PolylineFlowIcon',
+        type: "PolylineFlowIcon",
         uniforms: {
-          image: e.icon || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAO1JREFUWEftl8EJwkAQRWd7iAFTgZZgJD0YtJOQu/eQToyxh2AsIVbgQdKDsoEBT0L+H9hL9j7smzd/l12XNPFZAi63AAQ3sL6uPgEjIA4FSKO99OOdZocAim0pxaaUU5fTEBTAY+zl2B0oCxCA13/J2mlj1gIE4DduspvsolTqZyX1UMEWYAC1wI4BBvi1wIyBAtDTwFigACzCSAFYhJEGYMNIA2gOvI2kjWcfRzMA9D6gAV75e+oa6d7XUQCqH+2eBtDugwCw4dO0wiOw0E+NgA0fZcCqe9iA1VsABvCFQR+ls+/bPwXL12wx8AUhFKmRjCCoogAAAABJRU5ErkJggg==',
-          speed: e.flow ? 10 : 0,
-          k: 20
+          color: Cesium.Color.fromCssColorString(e.stroke),
+          image:
+            e.icon ||
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABQCAYAAADY692eAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL7SURBVHgB7ZjBbRpBFIZnB4mzS4ALiGM6SDqJK0g6iNxBUoHTSdKBj0hwgBJ8RgI8Y3mtAQye2X2r1b73/QcjvLv+bOnXP5+pVqvVv+Px+NVl5nA4fFssFv+dUOD3yz+P3+/39+H1OfsB7x83m82dEwr8fvkXPz+0bRte/xQ8M9ntdj+dUOD3yz+Pj1/G4/Hv8LIteO7HcrmcOKHA75ef5rUQ0+n0OZxN9wXP3Y1Go0cnFPj98tNU6RsED8H06RsED8E8KQSCh2D6828geLb5F4VA8Gzzq2sXEDybfH/tAoJnk3+1EAieTb6/dRHBs8e/WQgEzx6/yrkJwbPD9zk3IXh2+FmFQPDs8LMKEYPg2eBnFwLBs8HPkso0CJ5ufvZC1EHwdPOLC4Hg6eYXFyIGwdPLb1QIBE8vv1gq0yB4+viNFqIOgqeP36oQCJ4+fqtCxCB4uvitC4Hg6eK3kso0CJ4OfuuFqIPg6eCLFQLB08EXK0QMgjd8vmghELzh88WkMg2CN1y+6ELUQfCGy++kEAjecPmdHBkxsXEB8hRhmY/E8+/L2x8Dvyd+JwsRg+ANk99ZIWICYOLKsnWCgV/O77QQwXR/ldwfZOjBCQZ+Ob+zQqzX6/jLTHLvD/P2IHV+wm/O70Qq46df4V+ZTcEj2/l8PnVCgd+c38lChLOraKpiO51g4Dfniy9E+JTsezi7sm25qqq/s9msxIbhd8gXXwhEbth80UIgcsPnix0ZiJwOvthCIHI6+CILgcjp4YssBCKnh9+6EIicLn6rIwOR08dvtRCInD5+44VA5HTyGy8EIqeT36gQiJxefvGRgcjp5hcvBCKnm1+0EIicfn7RQiBy+vnZhUDkbPCzjgxEzg4/ayEQOTv8TxcCkbPF/3QhEDlb/JuFQOTs8a8eGYicTf7VhUDkbPI/XAhEzi7/w4VA5OzyLwqByNnmnxwZiJxtfszJQiBytvkx7wuByNnm13lfCETONr/OayEQOdv8NBUih0im8YgcIpnmBTnnQRKFAYSqAAAAAElFTkSuQmCC",
+          speed: 1,
+          k: 20,
         },
         source,
       },
       translucent() {
-        return true
-      }
-    })
-    return material
+        return true;
+      },
+    });
+    return material;
   } else {
     return e.dash
       ? Cesium.Material.fromType("PolylineDash", {
-        color: Cesium.Color.fromCssColorString(e.stroke),
-        dashLength: 10,
-      })
+          color: Cesium.Color.fromCssColorString(e.stroke),
+          dashLength: 10,
+        })
       : Cesium.Material.fromType("Color", {
-        color: Cesium.Color.fromCssColorString(e.stroke),
-      });
+          color: Cesium.Color.fromCssColorString(e.stroke),
+        });
   }
-
-
-
 }
 
 function cartesian3Tgeography(e: any): number[] {
-  const r = Cesium.Cartographic.fromCartesian(e)
-  return [Cesium.Math.toDegrees(r.longitude), Cesium.Math.toDegrees(r.latitude), r.height]
+  const r = Cesium.Cartographic.fromCartesian(e);
+  return [Cesium.Math.toDegrees(r.longitude), Cesium.Math.toDegrees(r.latitude), r.height];
 }
 
 function geographyTcartesian3(e: number[]) {
-  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
+  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]);
 }
 
-const eyeOffset = new Cesium.Cartesian3(0, 0, -1)
+const eyeOffset = new Cesium.Cartesian3(0, 0, -1);
 
 export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
-  const { event, viewer } = map
-  let status = 0
-  let skip = 0
-
+  const { event, viewer } = map;
+  let status = 0;
+  let skip = 0;
 
-  let material = createLineMaterial(polyline)
+  let material = createLineMaterial(polyline);
   const appearance = new Cesium.PolylineMaterialAppearance({
     material,
-  })
+  });
   const markers = viewer.scene.primitives.add(
     new Cesium.BillboardCollection({
-      show: polyline.show
-    })
+      show: polyline.show,
+    }),
   );
 
   const _event = {
     cursor: polyline.cursor,
     silent: polyline.silent,
     onPointerIn() {
-      status == 2 && polyline.event.trigger('pointer-in')
+      status == 2 && polyline.event.trigger("pointer-in");
     },
     onPointerOut() {
-      status == 2 && polyline.event.trigger('pointer-out')
+      status == 2 && polyline.event.trigger("pointer-out");
     },
     onLClick() {
-      status == 2 && polyline.event.trigger('left-click')
+      status == 2 && polyline.event.trigger("left-click");
     },
     onRClick() {
       if (polyline.menu) {
         map.menu.show(polyline.menu);
       }
-      status == 2 && polyline.event.trigger('right-click')
+      status == 2 && polyline.event.trigger("right-click");
     },
     onDbClick() {
-      polyline.editable && status == 2 && setTimeout(() => {
-        polyline.event.trigger('start-edit')
-      });
-    }
-  }
+      polyline.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          polyline.event.trigger("start-edit");
+        });
+    },
+  };
 
-  let primitive: any
-  let cache: any[]
-  let activeNode: ChainNode<any, any>
+  let primitive: any;
+  let cache: any[];
+  let activeNode: ChainNode<any, any>;
   if (polyline.coordinates) {
-    status = 2
-    cache = polyline.coordinates.map((e) =>
-      Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
-    )
+    status = 2;
+    cache = polyline.coordinates.map((e) => Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]));
     primitive = new Cesium.Primitive({
       show: polyline.show,
       geometryInstances: new Cesium.GeometryInstance({
@@ -121,17 +116,14 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         id: _event,
       }),
       appearance,
-
     });
     viewer.scene.primitives.add(primitive);
   }
 
+  const editor = new PolylineEditor<any, any>();
 
-
-  const editor = new PolylineEditor<any, any>()
-
-  editor.on('create-node', (n) => {
-    if (n.type == 'node') {
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
       const feature = markers.add({
         position: new Cesium.Cartesian3(...n.position),
         width: 16,
@@ -139,28 +131,27 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         image: iconPoint,
         eyeOffset,
         id: {
-          cursor: 'move',
+          cursor: "move",
           onPointerDown() {
-            status = 4
-            activeNode = n
-            map.moveable = false
+            status = 4;
+            activeNode = n;
+            map.moveable = false;
           },
           onPointerUp() {
             if (status == 4) {
-              status = 3
-              map.moveable = true
-              activeNode = undefined
+              status = 3;
+              map.moveable = true;
+              activeNode = undefined;
             }
           },
           onDbClick() {
-            n.destroy()
-            cache = editor.getCoordinates().map(e => new Cesium.Cartesian3(...e))
-            initPrimitive()
-
-          }
-        }
-      })
-      n.shape = feature
+            n.destroy();
+            cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
+            initPrimitive();
+          },
+        },
+      });
+      n.shape = feature;
     } else {
       const feature = markers.add({
         position: new Cesium.Cartesian3(...n.position),
@@ -169,146 +160,146 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         image: iconAdd,
         eyeOffset,
         id: {
-          cursor: 'pointer',
+          cursor: "pointer",
           onPointerDown() {
-            status = 4
-            activeNode = n.insert()
-            map.cursor = 'move'
-            map.moveable = false
+            status = 4;
+            activeNode = n.insert();
+            map.cursor = "move";
+            map.moveable = false;
           },
-        }
-      })
-      n.shape = feature
+        },
+      });
+      n.shape = feature;
     }
-  })
-
-  editor.on('update-node', (n) => {
-    n.shape.position = new Cesium.Cartesian3(...n.position)
-  })
-  editor.on('remove-node', (n) => {
-    markers.remove(n.shape)
-  })
-  editor.on('empty', () => {
+  });
+
+  editor.on("update-node", (n) => {
+    n.shape.position = new Cesium.Cartesian3(...n.position);
+  });
+  editor.on("remove-node", (n) => {
+    markers.remove(n.shape);
+  });
+  editor.on("empty", () => {
     // markers.removeAll()
     viewer.scene.primitives.remove(primitive);
-    status = 0
-  })
+    status = 0;
+  });
 
   const onUpdate = (e: Set<string>) => {
     if (skip) {
-      skip--
-      return
+      skip--;
+      return;
     }
-    const keys = new Set()
-    e.forEach(key => {
+    const keys = new Set();
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
+        case "show":
           if (primitive) {
-            primitive.show = polyline.show
-            markers.show = polyline.show
+            primitive.show = polyline.show;
+            markers.show = polyline.show;
           }
           break;
-        case 'editable':
+        case "editable":
           break;
-        case 'coordinates':
-          keys.add('Primitive')
+        case "coordinates":
+          keys.add("Primitive");
           break;
-        case 'lineWidth':
-          keys.add('Primitive')
+        case "lineWidth":
+          keys.add("Primitive");
           break;
-        case 'icon':
-          keys.add('Material')
+        case "icon":
+          keys.add("Material");
           break;
-        case 'flow':
-          keys.add('Material')
+        case "flow":
+          keys.add("Material");
           break;
-        case 'stroke':
+        case "stroke":
           material.uniforms.color = Cesium.Color.fromCssColorString(polyline.stroke);
           break;
-        case 'dash':
-          keys.add('Material')
+        case "dash":
+          keys.add("Material");
 
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
-    keys.forEach(key => {
+    });
+    keys.forEach((key) => {
       switch (key) {
-        case 'Primitive':
+        case "Primitive":
           if (polyline.coordinates) {
-            cache = polyline.coordinates.map(e => geographyTcartesian3(e))
+            cache = polyline.coordinates.map((e) => geographyTcartesian3(e));
           } else {
-            cache = []
-            markers.removeAll()
-            status = 0
+            cache = [];
+            markers.removeAll();
+            status = 0;
           }
 
-          initPrimitive()
+          initPrimitive();
 
           break;
-        case 'Material':
-          material = createLineMaterial(polyline)
-          appearance.material = material
-          break
+        case "Material":
+          material = createLineMaterial(polyline);
+          appearance.material = material;
+          break;
       }
-    })
-  }
+    });
+  };
 
   const onStartEdit = () => {
-
     switch (status) {
       case 2:
-        status = 3
-        editor.setCoordinates(cache.map(e => [e.x, e.y, e.z]))
-        break
+        status = 3;
+        editor.setCoordinates(cache.map((e) => [e.x, e.y, e.z]));
+        break;
     }
-  }
-  let temp: any
+  };
+  let temp: any;
   const onMouseMove = () => {
-    const e = event.geography
+    const e = event.geography;
 
     switch (status) {
       case 1:
-        cache.pop()
-        cache.push(Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]))
-        initPrimitive()
-        break
+        cache.pop();
+        cache.push(Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]));
+        initPrimitive();
+        break;
       case 4:
-        temp = Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
-        activeNode.update([temp.x, temp.y, temp.z])
-        cache = editor.getCoordinates().map(e => new Cesium.Cartesian3(...e))
-        initPrimitive()
+        temp = Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]);
+        activeNode.update([temp.x, temp.y, temp.z]);
+        cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
+        initPrimitive();
         break;
     }
-  }
+  };
 
   const onClick = () => {
-    const e = event.geography
+    const e = event.geography;
     switch (status) {
       case 0:
-        status = 1
-        cache = [Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])]
-        cache.push(cache[0])
-        initPrimitive()
+        status = 1;
+        cache = [Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])];
+        cache.push(cache[0]);
+        initPrimitive();
         break;
       case 1:
-        cache.push(cache[cache.length - 1])
+        cache.push(cache[cache.length - 1]);
         // geometry.setCoordinates(cache)
-        initPrimitive()
-        break
+        initPrimitive();
+        break;
     }
-  }
-
+  };
 
   const initPrimitive = () => {
     primitive && viewer.scene.primitives.remove(primitive);
     if (cache.length > 1) {
-      const geometry = Cesium.PolylineGeometry.createGeometry(new Cesium.PolylineGeometry({
-        positions: cache,
-        width: polyline.lineWidth,
-        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
-      }))
+      const geometry = Cesium.PolylineGeometry.createGeometry(
+        new Cesium.PolylineGeometry({
+          positions: cache,
+          width: polyline.lineWidth,
+          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        }),
+      );
       if (geometry) {
         primitive = new Cesium.Primitive({
           show: polyline.show,
@@ -321,62 +312,58 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
         });
         viewer.scene.primitives.add(primitive);
       } else {
-        primitive = undefined
+        primitive = undefined;
       }
-
     } else {
-      primitive = undefined
+      primitive = undefined;
     }
-
-  }
+  };
 
   const onDbClick = () => {
     switch (status) {
       case 1:
-        status = 2
-        skip++
-        cache.pop()
-        cache.pop()
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
         // geometry.setCoordinates(cache)
-        polyline.coordinates = cache.map(e => cartesian3Tgeography(e))
-        polyline.event.trigger('data-loaded')
-        polyline.event.trigger('pointer-in')
-        break
+        polyline.coordinates = cache.map((e) => cartesian3Tgeography(e));
+        polyline.event.trigger("data-loaded");
+        polyline.event.trigger("pointer-in");
+        break;
       case 3:
-        polyline.stopEdit()
-        break
+        polyline.stopEdit();
+        break;
     }
-  }
+  };
 
   const onStopEdit = () => {
     if (status == 3) {
-      status = 2
-      skip++
-      polyline.coordinates = editor.getCoordinates().map(e => cartesian3Tgeography(e))
-      editor.setCoordinates([])
-      polyline.event.trigger('pointer-in')
+      status = 2;
+      skip++;
+      polyline.coordinates = editor.getCoordinates().map((e) => cartesian3Tgeography(e));
+      editor.setCoordinates([]);
+      polyline.event.trigger("pointer-in");
     }
-  }
+  };
 
   const onDestroy = () => {
     primitive && viewer.scene.primitives.remove(primitive);
-    viewer.scene.primitives.remove(markers)
-    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)
-
+    viewer.scene.primitives.remove(markers);
+    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/openlayer/OpenlayerPoint.ts

@@ -9,7 +9,7 @@ import VectorLayer from "ol/layer/Vector";
 const RD = 0.017453292519943295
 
 export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
-  const { viewer, event, getFromLonLat } = map
+  const { viewer, event, getFromLonLat, isFromLonLat } = map
   let status = 0
 
   const source = new VectorSource();
@@ -67,7 +67,7 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
   feature.set('event', _event, true)
   if (point.coordinates) {
     status = 2
-    geometry.setCoordinates(getFromLonLat(point.coordinates))
+    geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat))
     layer.setZIndex(point.coordinates[2] ?? 1)
     point.event.trigger('data-loaded')
     source.addFeature(feature)
@@ -87,7 +87,7 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
           break;
         case 'coordinates':
           if (point.coordinates) {
-            geometry.setCoordinates(getFromLonLat(point.coordinates))
+            geometry.setCoordinates(getFromLonLat(point.coordinates, isFromLonLat))
             layer.setZIndex(point.coordinates[2])
             switch (status) {
               case 0:
@@ -142,12 +142,12 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
     switch (status) {
       case 0:
         status = 1
-        geometry.setCoordinates(getFromLonLat(coordinates))
+        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat))
         source.addFeature(feature)
         break;
       case 1:
       case 3:
-        geometry.setCoordinates(getFromLonLat(coordinates))
+        geometry.setCoordinates(getFromLonLat(coordinates, isFromLonLat))
         break
     }
   }