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

package/src/mine/MinePolyline.ts

@@ -1,48 +1,41 @@
-
 import { Polyline } from "../basic/Polyline";
 import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
-import { MineMap } from './MineMap';
-import iconPoint from '../assets/point.png'
-import iconAdd from '../assets/add.png'
-
-
-function createImgNode(
-  onPointerDown: () => void,
-  onPointerUp: () => void,
-  onDbClick: () => void,
-) {
-  const img = document.createElement('img')
-  img.src = iconPoint
-  img.width = 16
-  img.height = 16
-  img.style.cursor = 'move'
-  img.addEventListener('pointerdown', onPointerDown)
-  img.addEventListener('pointerup', onPointerUp)
-  img.addEventListener('dblclick', onDbClick)
+import { MineMap } from "./MineMap";
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
+
+function createImgNode(onPointerDown: () => void, onPointerUp: () => void, onDbClick: () => void) {
+  const img = document.createElement("img");
+  img.src = iconPoint;
+  img.width = 16;
+  img.height = 16;
+  img.style.cursor = "move";
+  img.addEventListener("pointerdown", onPointerDown);
+  img.addEventListener("pointerup", onPointerUp);
+  img.addEventListener("dblclick", onDbClick);
   const marker = new minemap.Marker({
     draggable: false,
     element: img,
     offset: [-8, -8],
-  })
-  return marker
+  });
+  return marker;
 }
 
 function createImgVirtul(onPointerDown: () => void) {
-  const img = document.createElement('img')
-  img.src = iconAdd
-  img.width = 16
-  img.height = 16
-  img.style.cursor = 'pointer'
-  img.addEventListener('pointerdown', onPointerDown)
+  const img = document.createElement("img");
+  img.src = iconAdd;
+  img.width = 16;
+  img.height = 16;
+  img.style.cursor = "pointer";
+  img.addEventListener("pointerdown", onPointerDown);
   const marker = new minemap.Marker({
     draggable: false,
     element: img,
     offset: [-8, -8],
-  })
-  return marker
+  });
+  return marker;
 }
 
-
 function getLayerOption(polyline: Polyline<unknown>) {
   return {
     id: polyline.name,
@@ -51,80 +44,85 @@ function getLayerOption(polyline: Polyline<unknown>) {
     translation: [0, 0, 1000],
     "depth-test": false,
     layout: {
-      visibility: polyline.show ? "visible" : 'none',
-    },
-    paint: polyline.dash ? {
-      "line-dasharray": [10, 10],
-      "line-color": polyline.stroke,
-      "line-width": polyline.lineWidth
-    } : {
-      "line-color": polyline.stroke,
-      "line-width": polyline.lineWidth
+      visibility: polyline.show ? "visible" : "none",
     },
-  }
+    paint: polyline.dash
+      ? {
+          "line-dasharray": [10, 10],
+          "line-color": polyline.stroke,
+          "line-width": polyline.lineWidth,
+        }
+      : {
+          "line-color": polyline.stroke,
+          "line-width": polyline.lineWidth,
+        },
+  };
 }
 
-
 function main(map: MineMap, polyline: Polyline<unknown>) {
-  const { viewer } = map
+  const { viewer } = map;
   const data = {
     type: "FeatureCollection",
     features: [],
-  }
+  };
   viewer.addSource(polyline.name, {
     type: "geojson",
-    data
+    data,
   });
 
-  const cource = viewer.getSource(polyline.name)
+  const cource = viewer.getSource(polyline.name);
 
   viewer.addLayer(getLayerOption(polyline));
 
-  let status = 0
-  let skip = 0
-  const editor = new PolylineEditor<any, any>()
-  let activeNode: ChainNode<any, any>
-  editor.on('create-node', (n) => {
-    if (n.type == 'node') {
-      const maker = createImgNode(() => {
-        status = 4
-        activeNode = n
-        map.moveable = false
-      }, () => {
-        if (status == 4) {
-          status = 3
-          map.moveable = true
-          activeNode = undefined
-        }
-      }, () => {
-        n.destroy()
-        updateCoordinate(editor.getCoordinates())
-      })
-      maker.setLngLat(n.position).addTo(viewer)
+  let status = 0;
+  let skip = 0;
+  const editor = new PolylineEditor<any, any>();
+  let activeNode: ChainNode<any, any>;
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
+      const maker = createImgNode(
+        () => {
+          status = 4;
+          activeNode = n;
+          map.moveable = false;
+        },
+        () => {
+          if (status == 4) {
+            status = 3;
+            map.moveable = true;
+            activeNode = undefined;
+          }
+        },
+        () => {
+          n.destroy();
+          updateCoordinate(editor.getCoordinates());
+        },
+      );
+      maker.setLngLat(n.position).addTo(viewer);
 
-      n.shape = maker
+      n.shape = maker;
     } else {
       const maker = createImgVirtul(() => {
-        status = 4
-        activeNode = n.insert()
-        map.moveable = false
-      })
-      maker.setLngLat(n.position).addTo(viewer)
-      viewer.addMarker(maker)
-      n.shape = maker
+        status = 4;
+        activeNode = n.insert();
+        map.moveable = false;
+      });
+      maker.setLngLat(n.position).addTo(viewer);
+      viewer.addMarker(maker);
+      n.shape = maker;
     }
-  })
+  });
 
-  editor.on('update-node', (n) => {
-    n.shape.setLngLat(n.position)
-  })
-  editor.on('remove-node', (n) => {
-    viewer.removeMarker(n.shape)
-  })
-  editor.on('empty', () => {
+  editor.on("update-node", (n) => {
+    n.shape.setLngLat(n.position);
+  });
+  editor.on("remove-node", (n) => {
+    viewer.removeMarker(n.shape);
+  });
+  editor.on("empty", () => {
     // source.removeFeature(feature)
-    status = 0
-  })
+    status = 0;
+  });
 
   const updateCoordinate = (coordinates) => {
     if (coordinates) {
@@ -137,223 +135,215 @@ function main(map: MineMap, polyline: Polyline<unknown>) {
         properties: {
           id: polyline.name,
         },
-      }
+      };
     } else {
-      data.features = []
+      data.features = [];
     }
-    cource.setData(data)
-  }
-
-
-
-
+    cource.setData(data);
+  };
 
   if (polyline.coordinates) {
-    status = 2
-    updateCoordinate(polyline.coordinates)
+    status = 2;
+    updateCoordinate(polyline.coordinates);
   }
   const onUpdate = (e: Set<string>) => {
     if (skip) {
-      skip--
-      return
+      skip--;
+      return;
     }
 
-    const keys = new Set()
+    const keys = new Set();
 
-    e.forEach(key => {
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
-          keys.add('layer')
+        case "show":
+          keys.add("layer");
           break;
-        case 'editable':
+        case "editable":
           break;
-        case 'coordinates':
-          updateCoordinate(polyline.coordinates)
+        case "coordinates":
+          updateCoordinate(polyline.coordinates);
           if (polyline.coordinates) {
-            status = 2
+            status = 2;
           } else {
-            status = 0
+            status = 0;
           }
           break;
-        case 'lineWidth':
-          keys.add('layer')
+        case "lineWidth":
+          keys.add("layer");
           break;
-        case 'stroke':
-          keys.add('layer')
+        case "stroke":
+          keys.add("layer");
           break;
-        case 'dash':
-          keys.add('layer')
+        case "dash":
+          keys.add("layer");
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
+    });
 
-    keys.forEach(e => {
+    keys.forEach((e) => {
       switch (e) {
-        case 'layer':
-          viewer.removeLayer(polyline.name)
+        case "layer":
+          viewer.removeLayer(polyline.name);
           viewer.addLayer(getLayerOption(polyline));
           break;
       }
-    })
-  }
+    });
+  };
 
   const onPointerIn = () => {
-    map.cursor = polyline.cursor
+    map.cursor = polyline.cursor;
     if (status == 2) {
-
-      polyline.event.trigger('pointer-in')
+      polyline.event.trigger("pointer-in");
     }
-
-  }
+  };
 
   const onPointerOut = () => {
-    map.cursor = 'default'
+    map.cursor = "default";
     if (status == 2) {
-
-      polyline.event.trigger('pointer-out')
+      polyline.event.trigger("pointer-out");
     }
-  }
+  };
 
-  let cache = []
+  let cache = [];
 
   const onClick = (e: any) => {
     switch (status) {
       case 0:
-        status = 1
-        cache = [[e.lngLat.lng, e.lngLat.lat], [e.lngLat.lng, e.lngLat.lat]]
+        status = 1;
+        cache = [
+          [e.lngLat.lng, e.lngLat.lat],
+          [e.lngLat.lng, e.lngLat.lat],
+        ];
         break;
       case 1:
-        cache.push(cache[cache.length - 1])
+        cache.push(cache[cache.length - 1]);
         break;
     }
-  }
+  };
 
   const onPointerMove = (e: any) => {
     switch (status) {
       case 1:
-        cache.pop()
-        cache.push([e.lngLat.lng, e.lngLat.lat])
-        updateCoordinate(cache)
+        cache.pop();
+        cache.push([e.lngLat.lng, e.lngLat.lat]);
+        updateCoordinate(cache);
         break;
       case 4:
-        activeNode.update([e.lngLat.lng, e.lngLat.lat])
-        updateCoordinate(editor.getCoordinates())
+        activeNode.update([e.lngLat.lng, e.lngLat.lat]);
+        updateCoordinate(editor.getCoordinates());
         break;
     }
-  }
+  };
 
   const onDbClick = (e) => {
     switch (status) {
       case 1:
-        status = 2
-        skip++
-        cache.pop()
-        cache.pop()
-        polyline.coordinates = cache
-        polyline.event.trigger('pointer-in')
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
+        polyline.coordinates = cache;
+        polyline.event.trigger("pointer-in");
         break;
       case 3:
         if (!skip) {
-          polyline.event.trigger('stop-edit')
+          polyline.event.trigger("stop-edit");
         } else {
-          skip = 0
+          skip = 0;
         }
 
         break;
     }
-  }
+  };
 
   const onLineDbClick = () => {
     switch (status) {
       case 2:
-
-
-        polyline.event.trigger('start-edit')
+        polyline.event.trigger("start-edit");
 
         break;
     }
-  }
+  };
 
   const onLineClick = () => {
     switch (status) {
       case 2:
-        polyline.event.trigger('left-click')
+        polyline.event.trigger("left-click");
         break;
     }
-  }
+  };
   const onLineRClick = () => {
     if (polyline.menu) {
       map.menu.show(polyline.menu);
     }
     switch (status) {
       case 2:
-        polyline.event.trigger('right-click')
+        polyline.event.trigger("right-click");
         break;
     }
-  }
+  };
 
   const onStartEdit = () => {
     if (status == 2) {
-      status = 3
-      map.cursor = 'default'
-      editor.setCoordinates(polyline.coordinates)
-      skip = 1
+      status = 3;
+      map.cursor = "default";
+      editor.setCoordinates(polyline.coordinates);
+      skip = 1;
     }
-  }
+  };
 
   const onStopEdit = () => {
     if (status == 3) {
-      status = 2
-      skip++
-      polyline.coordinates = editor.getCoordinates()
-      editor.setCoordinates([])
+      status = 2;
+      skip++;
+      polyline.coordinates = editor.getCoordinates();
+      editor.setCoordinates([]);
     }
-  }
-
+  };
 
   const onDestroy = () => {
-    viewer.removeLayer(polyline.name)
-    viewer.removeSource(polyline.name)
-    viewer.off('mouseover', polyline.name, onPointerIn)
-    viewer.off('mouseout', polyline.name, onPointerOut)
-    viewer.off('dblclick', polyline.name, onLineDbClick)
-    viewer.off('click', polyline.name, onLineClick)
-    viewer.off('contextmenu', polyline.name, onLineRClick)
-    viewer.off('click', onClick)
-    viewer.off('mousemove', onPointerMove)
-    viewer.off('dblclick', onDbClick)
-
-    polyline.event.off('update', onUpdate)
-    polyline.event.off('destroy', onDestroy)
-    polyline.event.off('start-edit', onStartEdit)
-    polyline.event.off('stop-edit', onStopEdit)
-  }
-
-  viewer.on('mouseover', polyline.name, onPointerIn)
-  viewer.on('mouseout', polyline.name, onPointerOut)
-  viewer.on('dblclick', polyline.name, onLineDbClick)
-  viewer.on('click', polyline.name, onLineClick)
-  viewer.on('contextmenu', polyline.name, onLineRClick)
-  viewer.on('click', onClick)
-  viewer.on('mousemove', onPointerMove)
-  viewer.on('dblclick', onDbClick)
-
-  polyline.event.on('update', onUpdate)
-  polyline.event.on('destroy', onDestroy)
-  polyline.event.on('start-edit', onStartEdit)
-  polyline.event.on('stop-edit', onStopEdit)
+    viewer.removeLayer(polyline.name);
+    viewer.removeSource(polyline.name);
+    viewer.off("mouseover", polyline.name, onPointerIn);
+    viewer.off("mouseout", polyline.name, onPointerOut);
+    viewer.off("dblclick", polyline.name, onLineDbClick);
+    viewer.off("click", polyline.name, onLineClick);
+    viewer.off("contextmenu", polyline.name, onLineRClick);
+    viewer.off("click", onClick);
+    viewer.off("mousemove", onPointerMove);
+    viewer.off("dblclick", onDbClick);
+
+    polyline.event.off("update", onUpdate);
+    polyline.event.off("destroy", onDestroy);
+    polyline.event.off("start-edit", onStartEdit);
+    polyline.event.off("stop-edit", onStopEdit);
+  };
+
+  viewer.on("mouseover", polyline.name, onPointerIn);
+  viewer.on("mouseout", polyline.name, onPointerOut);
+  viewer.on("dblclick", polyline.name, onLineDbClick);
+  viewer.on("click", polyline.name, onLineClick);
+  viewer.on("contextmenu", polyline.name, onLineRClick);
+  viewer.on("click", onClick);
+  viewer.on("mousemove", onPointerMove);
+  viewer.on("dblclick", onDbClick);
+
+  polyline.event.on("update", onUpdate);
+  polyline.event.on("destroy", onDestroy);
+  polyline.event.on("start-edit", onStartEdit);
+  polyline.event.on("stop-edit", onStopEdit);
 }
 
-
 export function drawPolyline(map: MineMap, polyline: Polyline<unknown>) {
-  const { viewer } = map
+  const { viewer } = map;
   if (viewer.loaded()) {
-    main(map, polyline)
+    main(map, polyline);
   } else {
-    viewer.once('load', () => {
-      main(map, polyline)
-    })
+    viewer.once("load", () => {
+      main(map, polyline);
+    });
   }
-}
+}

package/src/mine/MineTile3D.ts

@@ -1,9 +1,8 @@
 import { Tile3D } from "../basic/Tile3D";
 import { MineMap } from "./MineMap";
 
-
 function main(map: MineMap, tile3d: Tile3D) {
-  const { viewer } = map
+  const { viewer } = map;
 
   viewer.addSource(tile3d.name, {
     type: "3d-tiles",
@@ -17,16 +16,13 @@ function main(map: MineMap, tile3d: Tile3D) {
   });
 }
 
-
 export function drawTile3D(map: MineMap, tile3d: Tile3D) {
-
-  const { viewer } = map
+  const { viewer } = map;
   if (viewer.loaded()) {
-    main(map, tile3d)
+    main(map, tile3d);
   } else {
-    viewer.once('load', () => {
-      main(map, tile3d)
-    })
+    viewer.once("load", () => {
+      main(map, tile3d);
+    });
   }
-
-}
+}