@hzab/map-combine 0.4.2-alpha.6 → 0.4.2-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.6",
+  "version": "0.4.2-alpha.7",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/basic/BasicModel.ts

@@ -1,6 +1,7 @@
 import { BasicElement, type BasicElementOption } from "./BasicElement";
 
 export interface BasicModelOption extends BasicElementOption {
+  name?: string;
   /** 经度 */
   lon: number;
   /** 纬度 */

package/src/basic/MapElement.ts

@@ -16,7 +16,8 @@ export abstract class MapElement<T extends MapElementOption = MapElementOption>
     this.map = map;
     this._option = option;
     if (map.elements.has(option.name)) {
-      throw new Error(`已存在同名元素 ${option.name}`);
+      console.error(new Error(`已存在同名元素 ${option.name}`));
+      return;
     }
     map.elements.set(option.name, this);
   }

package/src/basic/MapEvent.ts

@@ -5,6 +5,11 @@ export class MapEvent extends Eventful<{
   "pointer-move": () => void;
   "pointer-up": () => void;
   "left-click": () => void;
+  /**
+   * 获取当前点击位置的所有元素
+   * @returns
+   */
+  "drill-pick": (elements) => void;
   "right-click": () => void;
   "double-click": () => void;
   "view-change": () => void;

package/src/cesium/CesiumEvent.ts

@@ -22,6 +22,7 @@ export function bindEvent(map: CesiumMap) {
     event.geography = map.canvasTgeography(event.canvas);
     let _target: any = undefined;
     const res = viewer.scene.pick(e.endPosition);
+
     const a = res ? (res.id ? res.id : res.primitive ? res.primitive : undefined) : undefined;
 
     if (a && !a.silent) {
@@ -64,6 +65,17 @@ export function bindEvent(map: CesiumMap) {
       target.onLClick?.();
     }
     event.trigger("left-click");
+
+    // 穿透拾取，获取点击位置的所有对象
+    const pickedObjects = viewer.scene.drillPick(e.position);
+    if (pickedObjects && pickedObjects.length > 0) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => it.id?.target),
+        sourceObjects: pickedObjects,
+        position: e.position,
+      });
+    }
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   handler.setInputAction(() => {
     if (target) {

package/src/cesium/CesiumModel.ts

@@ -11,6 +11,10 @@ export class CesiumModel extends BasicModel {
 
     this._shape = map.viewer.scene.primitives.add(
       Cesium.Model.fromGltf({
+        id: {
+          name: option.name,
+          target: this,
+        },
         show: this.option.show,
         url: this.option.model,
         modelMatrix: this._initMatrix(),

package/src/cesium/CesiumPoint.ts

@@ -20,6 +20,8 @@ export function drawPoint(map: CesiumMap, point: Point<unknown>) {
     rotation: point.rotation,
     allowPicking: !point.silent,
     id: {
+      name: point.name,
+      target: point,
       cursor: point.cursor,
       silent: point.silent,
       onPointerIn() {

package/src/cesium/CesiumPolygon.ts

@@ -67,6 +67,8 @@ export function drawPolygon(map: CesiumMap, polygon: Polygon<unknown>) {
   );
 
   const _event = {
+    name: polygon.name,
+    target: polygon,
     cursor: polygon.cursor,
     silent: polygon.silent,
     onPointerIn() {

package/src/cesium/CesiumPolyline.ts

@@ -74,6 +74,8 @@ export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
   );
 
   const _event = {
+    name: polyline.name,
+    target: polyline,
     cursor: polyline.cursor,
     silent: polyline.silent,
     onPointerIn() {

package/src/openlayer/OpenlayerEvent.ts

@@ -69,6 +69,27 @@ export function bindEvent(map: OpenlayerMap) {
     event.trigger("left-click");
   });
 
+  // 监听地图的单击事件
+  viewer.on("singleclick", function (e) {
+    // 使用 forEachFeatureAtPixel 查询该像素位置下的所有要素
+    const pickedObjects = [];
+    viewer.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+      // 这个回调函数会为每一个被点击到的要素执行
+      pickedObjects.push(feature);
+      // 返回 true 可以提前终止遍历
+      // return true;
+    });
+
+    if (pickedObjects.length > 0) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => it?.values_?.userData?.target),
+        sourceObjects: pickedObjects,
+        position: map.canvasTgeography(e.pixel),
+      });
+    }
+  });
+
   viewer.on("dblclick", () => {
     if (target) {
       target.onDbClick?.();

package/src/openlayer/OpenlayerPoint.ts

@@ -26,7 +26,12 @@ export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
     visible: point.show,
   });
   viewer.addLayer(layer);
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: point.name,
+      target: point,
+    },
+  });
   const geometry = new OlPoint([0, 0]);
   const style = new Style({
     image: new Icon({

package/src/openlayer/OpenlayerPolygon.ts

@@ -26,7 +26,12 @@ export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
   let status = 0;
   let skip = 0;
 
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: polygon.name,
+      target: polygon,
+    },
+  });
   const geometry = new OlPolygon([
     [
       [0, 0],

package/src/openlayer/OpenlayerPolyline.ts

@@ -25,7 +25,12 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
   let status = 0;
   let skip = 0;
 
-  const feature = new Feature();
+  const feature = new Feature({
+    userData: {
+      name: polyline.name,
+      target: polyline,
+    },
+  });
   const geometry = new LineString([
     [0, 0],
     [0, 0],
@@ -64,6 +69,8 @@ export function drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
   });
 
   const _event = {
+    name: polyline.name,
+    target: polyline,
     cursor: polyline.cursor,
     silent: polyline.silent,
     onPointerIn() {