Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

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.ts

@@ -53,6 +53,12 @@ export enum MarkerEnum {
 
 export const option = {
   dataset: dataJson,
+  boxStyle:{
+    title:"",
+    borderColor:"",
+    backgroundColor:"",
+    fontColor:"",
+  },
   mapOptions:{
     "scene": {
       "center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
@@ -1991,7 +1997,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = MapLayerConfig.key
-  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 300, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(MapLayerConfig)
   public option = cloneDeep(option)
 }

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

@@ -1,85 +1,21 @@
 <template>
-  <collapse-item name="地图场景" :expanded="true">
+  <collapse-item name="组件样式" :expanded="true">
 
 
-    <setting-item-box name="经度" :alone="true">
-      <n-input-number v-model:value="optionData.mapOptions.scene.center.lng" :show-button="false" size="small">
-        <template #suffix>°</template>
-      </n-input-number>
+    <setting-item-box name="标题" :alone="true">
+      <n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
     </setting-item-box>
 
-    <setting-item-box name="纬度" :alone="true">
-      <n-input-number v-model:value="optionData.mapOptions.scene.center.lat" :show-button="false" size="small">
-        <template #suffix>°</template>
-      </n-input-number>
+    <setting-item-box name="字体颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
     </setting-item-box>
 
-    <setting-item-box name="高度值" :alone="true">
-      <n-input-number v-model:value="optionData.mapOptions.scene.center.alt" :min="0" size="small"></n-input-number>
+    <setting-item-box name="边框颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
     </setting-item-box>
 
-    <setting-item-box name="方向角度" :alone="true">
-      <n-input-number v-model:value="optionData.mapOptions.scene.center.heading" :min="0" size="small"></n-input-number>
-    </setting-item-box>
-
-    <setting-item-box name="俯仰角" :alone="true">
-      <n-input-number v-model:value="optionData.mapOptions.scene.center.pitch" :min="-90" size="small"></n-input-number>
-    </setting-item-box>
-
-
-    <setting-item-box name="是否显示太阳" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.scene.showSun" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-
-    <setting-item-box name="是否显示月亮" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.scene.showMoon" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="是否显示默认天空盒" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.scene.showSkyBox" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="是否显示地球大气层外光圈" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.scene.showSkyAtmosphere" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="是否启用雾化效果" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.scene.fog" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="是否开启快速抗锯齿" :alone="true">
-      <setting-item>
-        <n-space>
-          <n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
-          <n-text>是否显示</n-text>
-        </n-space>
-      </setting-item>
+    <setting-item-box name="背景颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
     </setting-item-box>
 
   </collapse-item>
@@ -138,13 +74,9 @@
     </setting-item-box>
 
   </collapse-item>
-<!-- 
-  <collapse-item name="底图图层" :expanded="true">
 
-  </collapse-item> -->
 
   <collapse-item name="右键菜单" :expanded="true">
-
   
 
   </collapse-item>
@@ -156,14 +88,15 @@ import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, Fe
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true
+    }
   }
-}
 )
 
-console.log("props.optionData",props.optionData);
+console.log("optionDatasss",props.optionData);
+
 
 
 

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

@@ -1,8 +1,8 @@
 <template>
   <div ref="vChartRef"  >
-    <div class="layer-container" @click="handlerMap">
+    <div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
       <div class="title">
-        费县林业防火
+        {{ props.chartConfig.option.boxStyle.title }}
       </div>
       <div class="layer-item-container">
         <div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
@@ -58,6 +58,8 @@ const props = defineProps({
   }
 })
 
+console.log("props123",props.chartConfig.option);
+
 const layers = ref(null)
 
 const handlerLayers = ref([]);
@@ -237,7 +239,7 @@ const handlerChangeAllLayer = (group) =>{
   if(group.show == false){
     group.children?.forEach((item,index)=>{
       item.show = true;
-      
+
     }) 
   }else{
     group.children?.forEach((item,index)=>{
@@ -462,20 +464,21 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   width:100%;
   height:100%;
   padding:15px;
+  padding-top:0px;
   padding-right:5px;
   background:rgba(7,38,30,0.85);
   border:1px solid #088538;
 }
 .layer-item-container{
   width:100%;
-  height: calc( 100% - 40px);
+  height: calc( 100% - 50px);
   overflow-y:auto;
 }
 
 .layer-container .title{
   width:100%;
-  height:40px;
-  line-height:40px;
+  height:50px;
+  line-height:50px;
   color:#CBE6CD;
   font-size:16px;
 }

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

@@ -0,0 +1,210 @@
+<template>
+  <collapse-item name="组件样式" :expanded="true">
+
+
+    <setting-item-box name="标题" :alone="true">
+      <n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
+    </setting-item-box>
+
+    <setting-item-box name="字体颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
+    </setting-item-box>
+
+    <setting-item-box name="边框颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
+    </setting-item-box>
+
+    <setting-item-box name="背景颜色" :alone="true">
+      <n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
+    </setting-item-box>
+
+  </collapse-item>
+
+  <collapse-item name="地图控件" :expanded="true">
+
+    <setting-item-box name="底图切换按钮" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.control.baseLayerPicker" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="视角复位按钮" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.control.homeButton" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="二三维切换按钮" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.control.sceneModePicker" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="全屏按钮" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.control.fullscreenButton" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+
+
+  </collapse-item>
+
+  <collapse-item name="地形设置" :expanded="true">
+
+    <setting-item-box name="是否开启地形" :alone="true">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.mapOptions.terrain.show" size="small" />
+          <n-text>是否显示</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+
+  </collapse-item>
+
+
+  <collapse-item name="右键菜单" :expanded="true">
+
+  
+
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+    optionData: {
+      type: Object as PropType<typeof option>,
+      required: true
+    }
+  }
+)
+
+console.log("optionDatasss",props.optionData);
+
+
+
+
+const themeOptions = [
+  {
+    value: ThemeEnum.NORMAL,
+    label: '标准'
+  },
+  {
+    value: ThemeEnum.DARK,
+    label: '幻影黑'
+  },
+  {
+    value: ThemeEnum.LIGHT,
+    label: '月光银'
+  },
+  {
+    value: ThemeEnum.WHITES_MOKE,
+    label: '远山黛'
+  },
+  {
+    value: ThemeEnum.FRESH,
+    label: '草色青'
+  },
+  {
+    value: ThemeEnum.GREY,
+    label: '雅士灰'
+  },
+  {
+    value: ThemeEnum.GRAFFITI,
+    label: '涂鸦'
+  },
+  {
+    value: ThemeEnum.MACARON,
+    label: '马卡龙'
+  },
+  {
+    value: ThemeEnum.BLUE,
+    label: '靛青蓝'
+  },
+  {
+    value: ThemeEnum.DARKBLUE,
+    label: '极夜蓝'
+  },
+  {
+    value: ThemeEnum.WINE,
+    label: '酱籽'
+  }
+]
+
+const langOptions = [
+  {
+    value: LangEnum.ZH_CN,
+    label: '中文简体'
+  },
+  {
+    value: LangEnum.EN,
+    label: '英文'
+  },
+  {
+    value: LangEnum.ZH_EN,
+    label: '中英文对照'
+  }
+]
+
+const viewModeOptions = [
+  {
+    value: ViewModeEnum.PLANE,
+    label: '2D'
+  },
+  {
+    value: ViewModeEnum.STEREOSCOPIC,
+    label: '3D'
+  }
+]
+
+const featuresOptions = [
+  {
+    value: FeaturesEnum.BG,
+    label: '区域面'
+  },
+  {
+    value: FeaturesEnum.POINT,
+    label: '标注'
+  },
+  {
+    value: FeaturesEnum.ROAD,
+    label: '道路'
+  },
+  {
+    value: FeaturesEnum.BUILDING,
+    label: '建筑物'
+  }
+]
+
+const MarkerOptions = [
+  {
+    value: MarkerEnum.CIRCLE_MARKER,
+    label: '圆形标点'
+  },
+  {
+    value: MarkerEnum.MARKER,
+    label: '定位标点'
+  },
+  {
+    value: MarkerEnum.NONE,
+    label: '隐藏标点'
+  }
+]
+</script>

src/packages/components/Charts/Maps/Navigation/data.json

@@ -0,0 +1,19 @@
+{
+  "markers": [
+    {
+      "name": "某某地市",
+      "value": 10,
+      "position": [116.300467, 39.907761]
+    },
+    {
+      "name": "某某地市",
+      "value": 15,
+      "position": [116.400567, 39.908761]
+    },
+    {
+      "name": "某某地市",
+      "value": 20,
+      "position": [116.200467, 39.937761]
+    }
+  ]
+}

src/packages/components/Charts/Maps/Navigation/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const MapLayerConfig: ConfigType = {
+  key: 'MapLayer',
+  chartKey: 'VMapLayer',
+  conKey: 'VCMapLayer',
+  title: '图层管理',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'map-layer.png'
+}

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

@@ -0,0 +1,539 @@
+<template>
+  <div ref="vChartRef"  >
+    <div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
+      <div class="title">
+        {{ props.chartConfig.option.boxStyle.title }}
+      </div>
+      <div class="layer-item-container">
+        <div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
+          <div class="layer-category">
+            <div class="arrow" @click="handnlerFoldGroupLayer(item)">
+              <CaretDownOutlined v-show="item.fold" />
+              <CaretRightOutlined v-show="!item.fold" />
+            </div>
+            <div class="layer-category-checkbox" :style="{'background':item.show ? '#00E832':'#fff'}" @click="handlerChangeAllLayer(item)">
+
+            </div>
+            <div class="layer-category-name">
+              {{ item.name }}（{{item.children.length}}）
+            </div>
+          </div>
+          <div class="layer-item" v-for="(it,idx) in item.children" :key="idx" v-show="item.fold">
+            <div class="layer-checkbox" :style="{'background':it.show ? '#00E832':'#fff'}" @click="handlerChangeLayer(it,item)">
+              <!-- <CheckOutlined  v-show="it.show" /> -->
+            </div>
+            <div class="layer-name" @click="handlerChangeLayer(it,item)">
+              {{ it.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch,onMounted,nextTick } from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { MarkerEnum, ThemeEnum } from './config'
+import { isArray } from '@/utils';
+import axios from 'axios';
+import { CaretDownOutlined, StarFilled, StarTwoTone,CheckOutlined,CaretRightOutlined } from '@ant-design/icons-vue';
+
+import * as mars3d from "mars3d";
+import { option } from '@/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions'
+
+let map: mars3d.Map; // 地图对象
+
+
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+console.log("props123",props.chartConfig.option);
+
+const layers = ref(null)
+
+const handlerLayers = ref([]);
+
+
+const handlerGetLayerTree = ()=>{
+  axios.get('http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian').then((res)=>{
+    layers.value = res.data.data
+    console.log("res",layers.value);
+    let configLayers = [];
+    let GEOSERVER_BASE_API = "http://221.2.83.254:9007/";
+    res.data.data.forEach((item, index) => {
+      let group = null;
+      group = {
+        id: parseInt(Math.random() * 10000000),
+        name: item.serverName,
+        type: "group",
+        fold:true,
+        show:false,
+      };
+
+      let layerGroup = group;
+      layerGroup.children = [];
+      configLayers.unshift(group);
+      if (item.children && item.children.length > 0) {
+        item.children.forEach((it, idx) => {
+        
+          let attribute = JSON.parse(it.attribute);
+
+          // 处理根据字段分类渲染样式的图层
+          if(attribute && attribute.symbol && attribute.symbol.styleField && attribute.symbol.styleFieldOptions && Object.keys(attribute.symbol.styleFieldOptions).length>0){
+            // console.log(attribute.layers,attribute)
+            attribute.type = 'geojson';
+            if(attribute.layers){
+              attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
+            }
+            
+            // delete attribute.layers;
+            delete attribute.parameters;
+            delete attribute.highlight;
+            console.log("图层属性信息:",attribute.url,attribute);
+          
+
+            if(!attribute.symbol.styleOptions){
+              attribute.symbol.styleOptions =  {
+                "opacity": 0.8,
+                "color": "",
+                "width": 2,
+                "clampToGround": true
+              }
+            }
+            attribute.zIndex = 10000000000;
+          }
+          
+
+          if(attribute.dynamic){
+              attribute.type = 'geojson';
+              if(attribute.layers){
+                attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
+                attribute.symbol = {
+                  type: "polyline",
+                  styleOptions: {
+                    clampToGround:true,
+                    width: 5,
+                    materialType: mars3d.MaterialType.LineFlow,
+                    materialOptions: {
+                      // color: Cesium.Color.CHARTREUSE,
+                      image: "img/textures/line-color-yellow.png",
+                      speed: 8
+                    }
+                  }
+                }
+              }
+          }
+
+          
+          // 设置标签文字偏移量
+          if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
+            attribute.symbol.styleOptions.label.pixelOffsetY = -40
+            let oldText = attribute.symbol.styleOptions.label.text;
+            attribute.symbol.styleOptions.label = {
+              text: oldText,
+              font_size: 14,
+              // color: Cesium.Color.AZURE,
+              outline: true,
+              // outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+              // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              // pixelOffset: new Cesium.Cartesian2(10, -25) // 偏移量
+              pixelOffsetY:-40
+            } 
+          
+          }
+
+          attribute.pid = group.id;
+
+          // 去掉所有图层点击选中样式
+          delete attribute.highlight;
+
+          // 如果不为空
+          if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label && attribute.symbol.styleOptions.label.text){
+            /**
+             * 图标标题显示情况：
+              key：字段中文名称，value：字段英文名称
+              * 1. key:value
+              * 2. key:value@key:value
+              * 3. key:value@,@key:value
+              * 4. @value
+              * 5. @value1@value2
+              * 6. @value1@,@value2
+              * 7. key:value1@value2
+              * */ 
+            let text = "";
+            if(attribute.symbol.styleOptions.label.text.match("@")){
+              let arr = attribute.symbol.styleOptions.label.text.split("@");
+              if(arr.length>0){
+                arr.forEach((item,index)=>{
+                  if(item.match(":")){
+                    let garr = item.split(":")
+                    text = text+garr[0]+":{"+garr[1]+"}"
+                  }else if(item.length==1){
+                    text = text+item
+                  }else if(item.length>1){
+                    text = text+"{"+item+"}"
+                  }
+                })
+              }
+            }else if(attribute.symbol.styleOptions.label.text.length>1 && attribute.symbol.styleOptions.label.text.match(":") ){
+              let garr = attribute.symbol.styleOptions.label.text.split(":")
+              text = text+garr[0]+":{"+garr[1]+"}"
+            }else if(attribute.symbol.styleOptions.label.text.length>1 && !attribute.symbol.styleOptions.label.text.match(":")){
+              text = "{"+attribute.symbol.styleOptions.label.text+"}";
+            }
+            attribute.symbol.styleOptions.label.text = text;
+          }
+
+          let ipinfo = matchHttpIpPort(attribute.url);
+
+          if(ipinfo){ // 如果匹配得到则替换为配置文件中的
+            attribute.url = attribute.url.replace(ipinfo[0],GEOSERVER_BASE_API);
+          }else{  //如果没有匹配到则直接拼接
+            attribute.url = GEOSERVER_BASE_API+attribute.url
+          }
+          if(attribute.type == 'geojson'){
+            attribute.url = attribute.url + "&cql_filter=is_del%20=0"
+          }else if(attribute.type == 'wms'){
+            attribute.parameters.cql_filter="is_del=0"
+          }
+          
+          if(attribute.name == '防火驿站'){
+            attribute.show = true;
+          }
+          configLayers.unshift(attribute);
+          attribute.show = attribute.show ? true : false;
+       
+          layerGroup.children.push(attribute)
+        });
+      }
+      handlerLayers.value.push(layerGroup);
+    });
+
+    console.log("configlayers",configLayers);
+    // window.globalMap.setLayersOptions(configLayers);
+  })
+}
+
+const matchHttpIpPort = (url) => { // 匹配“ http://ip:port ”
+    const ipRegex = /^http\:\/\/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b\:\b[0-9]{1,5}\//;
+    const match = url.match(ipRegex)
+    if (match) {
+      return match;
+    }
+    return null;
+}
+const handlerChangeAllLayer = (group) =>{
+  if(group.show == false){
+    group.children?.forEach((item,index)=>{
+      item.show = true;
+
+    }) 
+  }else{
+    group.children?.forEach((item,index)=>{
+      item.show = false;
+    }) 
+  }
+
+
+  group.show = !group.show;
+
+
+  
+}
+
+const handlerChangeLayer = (options,group)=>{
+  if(options.show == true){
+    group.show = false;
+  }
+  options.show = !options.show;
+  let layer = window.globalMap.getLayerById(options.id);
+  
+  if(layer){
+    layer.show = !layer.show
+  }else{
+    if(options.type == "geojson"){
+      layer = new mars3d.layer.GeoJsonLayer(options);
+      layer.show = true;
+    }else if(options.type == "wms"){
+      layer = new mars3d.layer.WmsLayer(options);
+      layer.show = true;
+    }
+    window.globalMap.addLayer(layer);
+  }
+}
+
+const handnlerFoldGroupLayer = (item)=>{
+  item.fold = !item.fold;
+}
+
+const ch = ()=>{
+
+}
+
+const handlerMap = ()=>{
+  
+}
+let {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  mapMarkerType,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  showLabel,
+  pitch,
+  skyColor,
+  marker,
+  satelliteTileLayer,
+  roadNetTileLayer,
+  trafficTileLayer
+} = toRefs(props.chartConfig.option.mapOptions)
+
+let mapIns: any = null
+let markers: any = []
+let AMapIns: any = null
+
+const vChartRef = ref<HTMLElement>()
+
+onMounted(()=>{
+  handlerGetLayerTree();
+})
+
+
+
+const isFirstLoad = ref(true);
+const initMap = (newData: any) => {
+  // 第一次加载
+  if(isFirstLoad.value){
+    map = new mars3d.Map(vChartRef.value, newData);
+  }else{ // 之后更新
+    // map.setOptions(newData);
+    map.setSceneOptions(newData.scene);
+  }
+  isFirstLoad.value = false;
+
+  window.globalMap = map;
+
+  return null;
+  // 初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
+  }).then(AMap => {
+      AMapIns = AMap
+      mapIns = new AMap.Map(vChartRef.value, {
+        resizeEnable: true,
+        zoom: amapZindex.value, // 地图显示的缩放级别
+        center: [amapLon.value, amapLat.value],
+        lang: lang.value,
+        features: features.value,
+        pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
+        skyColor: skyColor.value,
+        viewMode: viewMode.value, // 地图模式
+        showLabel: showLabel.value, // 是否显示地图文字标记
+        willReadFrequently: true
+      })
+      dataHandle(props.chartConfig.option.dataset)
+
+      let satelliteLayer = new AMap.TileLayer.Satellite({
+        zIndex: satelliteTileLayer.value.zIndex,
+        opacity: satelliteTileLayer.value.opacity,
+        zooms: satelliteTileLayer.value.zooms
+      })
+      let roadNetLayer = new AMap.TileLayer.RoadNet({
+        zIndex: roadNetTileLayer.value.zIndex,
+        opacity: roadNetTileLayer.value.opacity,
+        zooms: roadNetTileLayer.value.zooms
+      })
+      let trafficLayer = new AMap.TileLayer.Traffic({
+        zIndex: trafficTileLayer.value.zIndex,
+        opacity: trafficTileLayer.value.opacity,
+        zooms: trafficTileLayer.value.zooms
+      })
+      mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
+      if (satelliteTileLayer.value.show) {
+        mapIns.add([satelliteLayer])
+      }
+      if (roadNetTileLayer.value.show) {
+        mapIns.add([roadNetLayer])
+      }
+      if (trafficTileLayer.value.show) {
+        mapIns.add([trafficLayer])
+      }
+
+      mapIns.setMapStyle(
+        `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+      )
+    })
+    .catch(e => {})
+}
+
+const dataHandle = (newData: any) => {
+  if (!mapIns && !AMapIns) {
+    // initMap(props.chartConfig.option)
+    return
+  }
+  if (isArray(newData.markers)) {
+    // 先清除旧标记
+    mapIns.remove(markers)
+    markers = []
+    // 记录新标记
+    if (mapMarkerType.value === MarkerEnum.MARKER) {
+      newData.markers.forEach((markerItem: any) => {
+        const markerInstance = new AMapIns.Marker({
+          position: [markerItem.position[0], markerItem.position[1]],
+          offset: new AMapIns.Pixel(-13, -30)
+        })
+        markers.push(markerInstance)
+        markerInstance.setMap(mapIns)
+      })
+    } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
+      newData.markers.forEach((markerItem: any) => {
+        const markerInstance = new AMapIns.CircleMarker({
+          center: [markerItem.position[0], markerItem.position[1]],
+          radius: markerItem.value,
+          ...marker.value
+        })
+        markers.push(markerInstance)
+        markerInstance.setMap(mapIns)
+      })
+    }
+  }
+}
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+ async option => {
+  let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
+   console.log("props.chartConfig.option.mapOptions",);
+
+    await nextTick();
+
+
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+
+
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  stopWatch()
+  dataHandle(newData)
+})
+
+</script>
+<style scoped>
+.layer-container{
+  width:100%;
+  height:100%;
+  padding:15px;
+  padding-top:0px;
+  padding-right:5px;
+  background:rgba(7,38,30,0.85);
+  border:1px solid #088538;
+}
+.layer-item-container{
+  width:100%;
+  height: calc( 100% - 50px);
+  overflow-y:auto;
+}
+
+.layer-container .title{
+  width:100%;
+  height:50px;
+  line-height:50px;
+  color:#CBE6CD;
+  font-size:16px;
+}
+
+.layer-category{
+  width:100%;
+  height:36px;
+  color:#CBE6CD;
+  font-size:16px;
+  line-height:36px;
+  display: flex;
+}
+
+.arrow{
+  font-size:22px;
+  cursor:pointer;
+}
+.layer-category-checkbox{
+  width:14px;
+  height:14px;
+  background:#fff;
+  margin-top:11px;
+  cursor:pointer;
+  border-radius:2px;
+}
+.layer-category-name{
+  flex:auto;
+  text-indent: 12px;
+  cursor:pointer;
+}
+
+.layer-item{
+  width:100%;
+  height:24px;
+  line-height:24px;
+  font-size:14px;
+  color: #CBE6CD;
+  display:flex;
+  padding-left:40px;
+
+}
+
+.layer-checkbox{
+  width:14px;
+  height:14px;
+  background:#fff;
+  margin-top:5px;
+  cursor:pointer;
+  border-radius:2px;
+  font-weight:bold;
+}
+
+.layer-name{
+  flex:auto;
+  text-indent: 12px;
+  cursor:pointer;
+}
+</style>

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: {