地图事件

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -358,7 +358,8 @@ const props = defineProps({
   }
 })
 
-const chartEditStore = useChartEditStore()
+const chartEditStore = useChartEditStore();
+
 const themeSetting = computed(() => {
   const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
   return chartThemeSetting

src/hooks/ceshiFun.hook.ts

@@ -2,9 +2,182 @@
 export function mapFun() {
   const ceshiClick = () => {
     console.log('ceshi');
+    alert('ceshi');
   };
+
+  // 根据坐标点跳转位置
+  const handlerFlyToPoint = (params) => {
+    window.globalMap.flyToPoint([118.000666,35.11987],
+    {"alt":4269.7,"heading":359.2,"pitch":-51.9}); 
+  }
+
+
+  const handlerAddEntity = (data) => { 
+
+    let graphicOptions = {
+      id:data.id,
+      position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
+      style: {
+        image: data.image.generalIcon,
+        clampToGround: true,
+        scale: 0.5,
+        label: {
+          text: data.attribute.label,
+          font_size: 14,
+          color: "#ffffff",
+          pixelOffsetY: 10,
+          distanceDisplayCondition: true,
+          distanceDisplayCondition_far: 500000,
+          distanceDisplayCondition_near: 0,
+        },
+      },
+      popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
+          <div class="marsTiltPanel-wrap">
+              <div class="area">
+                  <div class="arrow-lt"></div>
+                  <div class="b-t"></div>
+                  <div class="b-r"></div>
+                  <div class="b-b"></div>
+                  <div class="b-l"></div>
+                  <div class="arrow-rb"></div>
+                  <div class="label-wrap">
+                      <div class="title">火点信息</div>
+                      <div class="label-content">
+                          <div class="data-li">
+                              <div class="data-label">火点地址：${data.attribute.address}</div>
+                          </div>
+                          <div class="data-li">
+                              <div class="data-label">上报时间：</div>
+                              <div class="data-value"><span id="lablYeWei"  class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
+                              </div>
+                          </div>
+                          <div class="data-li">
+                              <div class="data-value">
+                                  <span id="lablCSFM3" onclick="aroundYuAn([${data.position.lng},${data.position.lat}])"  class="label-tag data-value-status-2" >防灭火资源</span>
+                                  <span id="lablCSFM2" onclick="delFirePoint(${data.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="b-t-l"></div>
+              <div class="b-b-r"></div>
+          </div>
+          <div class="arrow" ></div>
+      </div>`,
+      popupOptions: {
+        offsetY: -30,
+        template: "{content}",
+        horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
+        verticalOrigin: "Cesium.VerticalOrigin.CENTER",
+      },
+    }
+  
+    let graphic = window.graphicLayer.getGraphicById(data.id);
+  
+    if(graphic){
+        graphic.setStyleOptions(graphicOptions);
+    }else{
+        graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
+
+        window.graphicLayer.addGraphic(graphic);
+    }
+  }
+
+  const handlerMeasureSurfaceLength = async () => {
+    const graphic = await window.measureTool.distanceSurface({
+      showAddText: true,
+      exact: false
+    })
+  }
+
+  const handlerMeasureLength = async () => {
+    const graphic = await window.measureTool.distance({
+      showAddText: true,
+      label: {
+        type: "div",
+        updateText: function (text, graphic) {
+          graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
+        },
+        html: `<div class="marsGreenGradientPnl" ></div>`,
+      }
+    })
+  }
+
+  const handlerMeasureSurfaceArea = async () => {
+    const graphic = await window.measureTool.areaSurface({
+      style: {
+        color: "#ffff00"
+      },
+      splitNum: 10, // step插值分割的个数
+      exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
+    })
+  }
+
+  const handlerMeasureArea = async () => {
+    const graphic = await window.measureTool.area({
+      style: {
+        color: '#00fff2',
+        opacity: 0.4,
+        outline: true,
+        outlineColor: '#fafa5a',
+        outlineWidth: 1,
+        clampToGround: false //贴地
+      }
+    })
+  }
+
+  const handlerMeasurePoint = async () => {
+    const graphic = await window.measureTool.point({
+      popupOptions: {
+        pointerEvents: false
+      },
+      popup: function (point, event) {
+        return `<div class="mars3d-template-title">位置信息</div>
+        <div class="mars3d-template-content">
+            <div><label>经度</label>${point.lng}</div>
+            <div><label>纬度</label>${point.lat}</div>
+            <div><label>海拔</label>${point.alt}米</div>
+        </div>`
+      }
+    })
+  }
+
+
+  const handlerMeasureHeight = async () => {
+    const graphic = await window.measureTool.height();
+  }
+
+  const handlerClearMeasure =  () => {
+    window.measureTool.clear();
+  }
+
+  const handlerDrawPolygon = async () => {
+    const graphic = await graphicLayer.startDraw({
+      type: "polygon",
+      style: {
+        color: "#3388ff",
+        opacity: 0.5,
+        outline: true,
+        outlineColor: "#ffffff",
+        outlineWidth: 2.0,
+        clampToGround:true
+      }
+    })
+  }
+
   return {
     ceshiClick,
+    handlerFlyToPoint,
+    handlerAddEntity,
+    handlerMeasureSurfaceLength,
+    handlerMeasureLength,
+    handlerMeasureSurfaceArea,
+    handlerMeasureArea,
+    handlerMeasurePoint,
+    handlerMeasureHeight,
+    handlerClearMeasure,
+    handlerDrawPolygon
   };
 }
 
@@ -16,4 +189,104 @@ export const funSelectOptions = [
     // 事件名(用于触发)
     value: 'ceshiClick',
   },
+  {
+    label:"根据坐标定位地图视角",
+    value: 'handlerFlyToPoint'
+  },
+  {
+    label:"添加任意类型图层",
+    value: 'handlerAddLayer'
+  },
+  {
+    label:"隐藏任意类型图层",
+    value: 'handlerHiddenLayer'
+  },
+  {
+    label:"删除任意类型图层",
+    value: 'handlerRemoveLayer'
+  },
+  {
+    label:"添加单个矢量数据",
+    value: 'handlerAddEntity'
+  },
+  {
+    label:"隐藏单个矢量数据",
+    value:"handlerHiddenEntity"
+  },
+  {
+    label:"移除单个矢量数据",
+    value:"handlerRemoveEntity"
+  },
+  {
+    label:"定位和高亮矢量数据",
+    value:"handlerFlyToEntity"
+  },
+  {
+    label:"清除全部矢量数据",
+    value:"handlerClearEntityLayer"
+  },
+  {
+    label:"隐藏全部矢量数据",
+    value:"handlerHiddenEntityLayer"
+  },
+  {
+    label:"点击地图拾取坐标",
+    value:"handlerDrawPoint"
+  },
+  {
+    label:"绘制贴地线",
+    value:"handlerDrawLine"
+  },
+  {
+    label:"绘制图标点",
+    value:"handlerDrawIconPoint"
+  },
+  {
+    label:"绘制贴地线",
+    value:"handlerDrawLine"
+  },
+  {
+    label:"绘制贴地自由线",
+    value:"handlerDrawBrushLine"
+  },
+  {
+    label:"绘制贴地面",
+    value:"handlerDrawLine"
+  },
+  {
+    label:"绘制贴地矩形",
+    value:"handlerDrawRectangle"
+  },
+  {
+    label:"绘制贴地面",
+    value:"handlerDrawPolygon"
+  },
+  {
+    label:"贴地距离测量",
+    value:"handlerMeasureSurfaceLength"
+  },
+  {
+    label:"空间距离测量",
+    value:"handlerMeasureLength"
+  },
+  {
+    label:"贴地面积测量",
+    value:"handlerMeasureSurfaceArea"
+  },
+  {
+    label:"水平面积测量",
+    value:"handlerMeasureArea"
+  },
+  {
+    label:"坐标点位测量",
+    value:"handlerMeasurePoint"
+  },
+  {
+    label:"高度差测量",
+    value:"handlerMeasureHeight"
+  },
+  {
+    label:"清空测量数据",
+    value:"handlerClearMeasure"
+  }
 ];

src/hooks/eventHandler.hook.ts

@@ -5,7 +5,7 @@ const chartEditStore = useChartEditStore();
 const ceshiFunction = mapFun();
 
 // 交互事件
-export const eventHandlerHook = (comonentList: any, elementList: any) => {
+export const eventHandlerHook = (comonentList: any, elementList: any, params:any = null) => {
   let obj: any = {};
   let index = 0;
   for (let i = 0; i < comonentList.length; i++) {
@@ -37,7 +37,11 @@ export const eventHandlerHook = (comonentList: any, elementList: any) => {
         // 地图事件联动
         for (let k = 0; k < elementList[j].elementId.length; k++) {
           if (comonentList[i].id == elementList[j].elementId[k]) {
-            ceshiFunction[elementList[j].funName]();
+            if(params){
+              ceshiFunction[elementList[j].funName](params);
+            }else{
+              ceshiFunction[elementList[j].funName]();
+            }
           }
         }
       }

src/packages/components/Charts/Maps/MapLayer/config.vue

@@ -77,7 +77,6 @@
 
 
   <collapse-item name="右键菜单" :expanded="true">
-
   
 
   </collapse-item>

src/packages/components/Charts/Maps/MapMars3d/index.vue

@@ -68,8 +68,12 @@ const initMap = (newData: any) => {
 
   window.globalMap = map;
 
-
+  // 初始化矢量图层
   handlerInitEntityLayer();
+
+  // 初始化测量工具
+  handlerInitMeasureTool();
+  
   return null;
   // 初始化
   AMapLoader.load({
@@ -2149,13 +2153,15 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 // 方法函数封装
 
 let graphicLayer = null;
-
+let measureTool = null;
 //  地球创建完成后默认加载矢量数据图层
 const handlerInitEntityLayer = () => {
   if(graphicLayer == null){
 
     graphicLayer = new mars3d.layer.GraphicLayer({ id: 999 });
 
+    window.graphicLayer = graphicLayer;
+
     window.globalMap.addLayer(graphicLayer);
 
     let data = {
@@ -2179,10 +2185,27 @@ const handlerInitEntityLayer = () => {
   }
 }
 
+const handlerInitMeasureTool = () => {
+  measureTool = new mars3d.thing.Measure({
+    label: {
+      color: "#ffffff",
+      font_family: "黑体",
+      font_size: 18,
+      background: false
+    },
+    isAutoEditing: false // 绘制完成后是否自动激活编辑
+    // drawEndEventType: mars3d.EventType.rightClick,
+    // drawDelEventType: mars3d.EventType.middleClick
+  })
+
+  window.measureTool = measureTool;
+
+  window.globalMap.addThing(measureTool)
+}
 
 // 点击获取点击位置点位信息  用于常见的下发火点、下发任务点等使用
 
-const handlerDrawPointt = async () => {
+const handlerDrawPoint = async () => {
   const graphic = await graphicLayer.startDraw({
     type: "point",
   })

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteractionConfiguration/components/EventItem.vue

@@ -93,9 +93,76 @@
   const { chartEditStore } = useTargetData();
   const funSelectOptions = ref([
     {
+      // 事件名称（用于选择显示）
       label: 'ceshi点击',
+      // 事件名(用于触发)
       value: 'ceshiClick',
     },
+    {
+      label:"根据坐标定位地图视角",
+      value: 'handlerFlyToPoint'
+    },
+    {
+      label:"添加任意类型图层",
+      value: 'handlerAddLayer'
+    },
+    {
+      label:"隐藏任意类型图层",
+      value: 'handlerHiddenLayer'
+    },
+    {
+      label:"删除任意类型图层",
+      value: 'handlerRemoveLayer'
+    },
+    {
+      label:"添加单个矢量数据",
+      value: 'handlerAddEntity'
+    },{
+      label:"隐藏单个矢量数据",
+      value:"handlerHiddenEntity"
+    },{
+      label:"移除单个矢量数据",
+      value:"handlerRemoveEntity"
+    },{
+      label:"定位和高亮矢量数据",
+      value:"handlerFlyToEntity"
+    },{
+      label:"清除全部矢量数据",
+      value:"handlerClearEntityLayer"
+    },{
+      label:"隐藏全部矢量数据",
+      value:"handlerHiddenEntityLayer"
+    },{
+      label:"点击地图拾取坐标",
+      value:"handlerDrawPoint"
+    },{
+      label:"绘制贴地线",
+      value:"handlerDrawLine"
+    },{
+      label:"绘制贴地面",
+      value:"handlerDrawPolygon"
+    },{
+      label:"贴地距离测量",
+      value:"handlerMeasureSurfaceLength"
+    },{
+      label:"空间距离测量",
+      value:"handlerMeasureLength"
+    },{
+      label:"贴地面积测量",
+      value:"handlerMeasureSurfaceArea"
+    },{
+      label:"水平面积测量",
+      value:"handlerMeasureArea"
+    },{
+      label:"坐标点位测量",
+      value:"handlerMeasurePoint"
+    },{
+      label:"高度差测量",
+      value:"handlerMeasureHeight"
+    },{
+      label:"清空测量数据",
+      value:"handlerClearMeasure"
+    }
   ]);
   const props = defineProps({
     eventData: {