feat：函数绘图、历史轨迹、实时轨迹组件及相关代码优化bug修复

@@ -24,6 +24,7 @@
       class="rows"
       :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
     >
+     <div v-if="status.rows.length">
       <div
         class="row-item"
         v-for="(row, ri) in status.rows"
@@ -43,6 +44,10 @@
           v-html="ceil"
         />
       </div>
+     </div>
+     <div v-else class="nullData">
+      暂无数据
+     </div>
     </div>
   </div>
 </template>
@@ -384,5 +389,14 @@ onUnmounted(() => {
       overflow: hidden;
     }
   }
+  .nullData{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color:white;
+    height: 100%;
+    width: 100%;
+    background: #356b80;
+  }
 }
 </style>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { AddLinePlotConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+export const seriesItem = {
+  type: 'line',
+  showSymbol: false,
+  clip: true,
+  data: dataJson
+}
+
+export const option = {
+  animation: false,
+  grid: {
+    top: 40,
+    left: 50,
+    right: 40,
+    bottom: 50
+  },
+  xAxis: {
+    name: 'x',
+    minorTick: {
+      show: true
+    },
+    minorSplitLine: {
+      show: true
+    }
+  },
+  yAxis: {
+    name: 'y',
+    minorTick: {
+      show: true
+    },
+    minorSplitLine: {
+      show: true
+    }
+  },
+  dataZoom: [
+    {
+      show: true,
+      type: 'inside',
+      filterMode: 'none',
+      xAxisIndex: [0],
+      startValue: -20,
+      endValue: 20
+    },
+    {
+      show: true,
+      type: 'inside',
+      filterMode: 'none',
+      yAxisIndex: [0],
+      startValue: -20,
+      endValue: 20
+    }
+  ],
+  dataset:dataJson,
+  series: [seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = AddLinePlotConfig.key
+  public chartConfig = cloneDeep(AddLinePlotConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`函数绘图-${index + 1}`" :expanded="true">
+    <setting-item-box name="显示线标点">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.showSymbol" size="small" />
+          <n-text>显示线标点</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.clip" size="small" />
+          <n-text>显示修剪</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+[
+    [
+        -1.5999999999999996,
+        -6.18608508879996
+    ],
+    [
+        -1.4999999999999996,
+        -5.713593654471708
+    ],
+    [
+        -1.3999999999999995,
+        -5.245243488748958
+    ],
+    [
+        -1.2999999999999994,
+        -4.78285911291312
+    ],
+    [
+        -1.1999999999999993,
+        -4.328201018063869
+    ],
+    [
+        -1.0999999999999992,
+        -3.8829585351580356
+    ],
+    [
+        -0.9999999999999992,
+        -3.4487430163340895
+    ],
+    [
+        -0.8999999999999992,
+        -3.027081353505773
+    ],
+    [
+        -0.7999999999999993,
+        -2.619409858909628
+    ],
+    [
+        -0.6999999999999993,
+        -2.227068530901179
+    ],
+    [
+        -0.5999999999999993,
+        -1.8512957268186445
+    ],
+    [
+        -0.49999999999999933,
+        -1.4932232631765194
+    ],
+    [
+        -0.39999999999999936,
+        -1.1538719618202085
+    ],
+    [
+        -0.2999999999999994,
+        -0.8341476589728255
+    ],
+    [
+        -0.19999999999999937,
+        -0.5348376923428088
+    ],
+    [
+        -0.09999999999999937,
+        -0.2566078796424947
+    ],
+    [
+        6.38378239159465e-16,
+        1.5681617696021829e-15
+    ],
+    [
+        0.10000000000000064,
+        0.2345702121634671
+    ],
+    [
+        0.20000000000000065,
+        0.4468145531643023
+    ],
+    [
+        0.30000000000000066,
+        0.6365733103425596
+    ],
+    [
+        0.4000000000000007,
+        0.8038156929453971
+    ],
+    [
+        0.5000000000000007,
+        0.9486397319584274
+    ],
+    [
+        0.6000000000000006,
+        1.0712716492500896
+    ],
+    [
+        0.7000000000000006,
+        1.1720646984075929
+    ],
+    [
+        0.8000000000000006,
+        1.2514974816478484
+    ]
+]
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('AddLinePlot', true)
+
+export const AddLinePlotConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '函数绘图',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'func_line.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  >
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, watch, ref, nextTick } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData) => {
+    try {
+      if (Array.isArray(newData)) {
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series[0].data = newData
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

@@ -16,22 +16,22 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs,nextTick } from 'vue'
+import { PropType, computed, watch, ref, onMounted, unref, toRaw, toRefs, nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config, { includes,seriesItem } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartDataFetch } from '@/hooks'
+import { useChartDataFetch } from '@/hooks/external/useChartDataFetch.hook'
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
-import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { useAssembleDataHooks } from './useAssembleData.hook'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
 
@@ -205,25 +205,25 @@ watch(
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 const updateVChart = (newData: SocketReceiveMessageType) => {
   if (!newData) return
+  const { option } = props.chartConfig
+  const { dataset: overrideDataset } = option
+  const { dimensions } = overrideDataset
+  if (!Array.isArray(dimensions)) return
   const { data } = newData
-  const {keys,record}= useAssembleDataHooks(data)
+  const { keys, record } = useAssembleDataHooks(data,dimensions)
   if (unref(realTimeList).length >= chartMaxDataPoint.value) {
     unref(realTimeList).splice(0, 1)
   }
   realTimeList.value.push(record)
   const dataset = {
-      dimensions: ['ts', ...keys],
-      source: toRaw(unref(realTimeList))
+    dimensions: ['ts', ...keys],
+    source: toRaw(unref(realTimeList))
   }
   vChartRef.value?.setOption({
     ...option.value,
     dataset
-  },
-  {
-    notMerge: true // 修复ws 属性对应属性值不匹配
   })
 }
-
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
   updateVChart(newData)
 })

+/**
+ * 此hook的作用是 ws 组装图表需要的数据格式
+ * @param data {'wendu':[[xxxxxx,xxxx]]}
+ * @returns keys:[xx,xx,xx] record:{'x':'xx'}
+ */
+import dayjs from 'dayjs'
+
+export const useAssembleDataHooks = (data: Record<string, string | [number, string]>, dimensions: string[]) => {
+  const formatValueToNumber = (value: string | number, defaultValue = 0) =>
+    isNaN(value as number) ? defaultValue : Number(value)
+  const tempObj: Recordable = {}
+  dimensions
+    .filter(f => f !== 'ts')
+    .forEach((item: string) => {
+      Object.assign(tempObj, {
+        [item]: data[item]
+      })
+    })
+  const keys = Object.keys(tempObj)
+  const record = keys.reduce((prev, next) => {
+    const [latest] = data[next] || []
+    const [ts, value] = latest as unknown as string[]
+    //把值转为number类型 wendu:"23" 转为 wendu:23
+    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'), [next]: formatValueToNumber(value) }
+  }, {})
+
+  return {
+    keys,
+    record
+  }
+}

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { AddHistoryTimeTrajectoryAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export type dataJsonType = typeof dataJson //data.json类型
+
+export enum ThemeEnum {
+  NORMAL = 'normal',
+  DARK = 'dark',
+  LIGHT = 'light',
+  WHITES_MOKE = 'whitesmoke',
+  FRESH = 'fresh',
+  GREY = 'grey',
+  GRAFFITI = 'graffiti',
+  MACARON = 'macaron',
+  BLUE = 'blue',
+  DARKBLUE = 'darkblue',
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
+}
+
+export enum LangEnum {
+  ZH_CN = 'zh_cn',
+  EN = 'en',
+  ZH_EN = 'zh_en'
+}
+
+export enum ViewModeEnum {
+  PLANE = '2D',
+  STEREOSCOPIC = '3D'
+}
+
+export enum FeaturesEnum {
+  BG = 'bg',
+  POINT = 'point',
+  ROAD = 'road',
+  BUILDING = 'building'
+}
+
+export enum MarkerEnum {
+  // 圆圈
+  CIRCLE_MARKER = 'CircleMarker',
+  // 定位标点
+  MARKER = 'Marker',
+  // 暂无
+  NONE = 'none'
+}
+
+export const option = {
+  dataset: dataJson,
+  mapOptions: {
+    lineColor: '#53A9DE',
+    lineWidth: 2,
+    pitch: 60,
+    skyColor: '#53A9DE',
+    amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
+    amapStyleKey: ThemeEnum.DARK,
+    amapStyleKeyCustom: '',
+    amapLon: 104.108689,
+    amapLat: 30.66176,
+    amapZindex: 11,
+    iconMarker: '1.png',
+    lineDuration: 2000,
+    lineOpacity: 0.5,
+    lineShowDir: false,
+    mpBorderConfig: {
+      value: 'Border01'
+    },
+    bgColor: 'rgba(255, 255, 255, 0.05)',
+    marker: {
+      fillColor: '#E98984FF',
+      fillOpacity: 0.5,
+      strokeColor: 'white',
+      strokeWeight: 2,
+      strokeOpacity: 0.5,
+      zIndex: 10,
+      bubble: true,
+      cursor: 'pointer',
+      clickable: true
+    },
+    mapMarkerType: MarkerEnum.MARKER,
+    viewMode: ViewModeEnum.STEREOSCOPIC,
+    lang: LangEnum.ZH_CN,
+    features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
+  }
+}
+
+export type mapOption = typeof option['mapOptions']
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = AddHistoryTimeTrajectoryAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(AddHistoryTimeTrajectoryAmapConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="基础" :expanded="true">
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="Key" :alone="true">
+      <setting-item name="请务必使用自己的高德应用 key">
+        <n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图" :expanded="true">
+    <setting-item-box name="主题">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内容" :alone="true">
+      <n-checkbox-group v-model:value="optionData.mapOptions.features">
+        <n-space item-style="display: flex;">
+          <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
+        </n-space>
+      </n-checkbox-group>
+    </setting-item-box>
+    <setting-item-box name="位置">
+      <setting-item name="经度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="纬度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="初始缩放">
+        <n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.mapOptions.viewMode === '3D'">
+      <setting-item-box>
+        <setting-item name="天空色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
+        </setting-item>
+        <setting-item name="俯仰角">
+          <n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </collapse-item>
+  <collapse-item name="标记图标" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item>
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的图标"
+          style="width: 250px"
+          :value="iconMarkerValue"
+          :options="iconMarkerOptions"
+          :render-label="renderOption"
+          clearable
+          filterable
+          @update:value="selectHandle"
+        />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="标记" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
+      </setting-item>
+      <setting-item v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.CIRCLE_MARKER" name="颜色">
+        <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="线条" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="颜色">
+          <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.mapOptions.lineColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="线宽">
+          <n-input-number v-model:value="optionData.mapOptions.lineWidth" :min="0" :max="100" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="线路径显示方向箭头">
+          <n-switch v-model:value="optionData.mapOptions.lineShowDir" size="small" />
+      </setting-item>
+      <setting-item name="线透明度">
+          <n-input-number v-model:value="optionData.mapOptions.lineOpacity" :min="0" :max="1" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="动画时效">
+          <n-input-number v-model:value="optionData.mapOptions.lineDuration" :min="0" :max="10000" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, computed, h, onMounted } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { NEllipsis, NImage,NSelect, NSpace, SelectOption } from 'naive-ui'
+import { getUrlBase64 } from '@/utils/external/imageUrlToBase64'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+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: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    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: '隐藏标点'
+  }
+]
+
+const iconMarkerValue = ref<string | null>('1.png')
+
+const isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const iconMarkerOptions = computed(() => {
+  const pathList = import.meta.glob('../../../../../../assets/external/marker/*')
+  return Object.keys(pathList).map(item => {
+    const imgName = item.split('/').at(-1)
+    return {
+      label: imgName,
+      value: imgName
+    } as SelectOption
+  })
+})
+
+const getMarkerImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/external/marker/${name}`, import.meta.url).href
+}
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMarkerImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectHandle = (value: string) => {
+  iconMarkerValue.value = value
+   getUrlBase64(getMarkerImagePath(value),'png',(baseEncodeText: string)=>{
+    props.optionData.mapOptions.iconMarker =baseEncodeText
+  })
+}
+onMounted(() => {
+  getUrlBase64(getMarkerImagePath(props.optionData.mapOptions.iconMarker),'png',(baseEncodeText: string)=>{
+    props.optionData.mapOptions.iconMarker = baseEncodeText
+  })
+})
+</script>

+[
+  [
+    104.078262,
+    30.652383
+  ],
+  [
+    104.078099,
+    30.652181
+  ],
+  [
+    104.07795,
+    30.651984
+  ],
+  [
+    104.077611,
+    30.651518
+  ],
+  [
+    104.077257,
+    30.651088
+  ],
+  [
+    104.076913,
+    30.65067
+  ],
+  [
+    104.07667,
+    30.650346
+  ]
+]
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('AddHistoryTimeTrajectoryAmap', true)
+
+export const AddHistoryTimeTrajectoryAmapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '设备历史轨迹',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'history_tim_trajectory.png'
+}

+<template>
+  <div>
+    <div class="chart-amap" ref="vChartRef">
+    </div>
+    <div class="map-action-card">
+      <n-card title="历史轨迹操作面板">
+        <n-space>
+          <n-button @click="handleStartAnimation">开始动画</n-button>
+          <n-button @click="handlePauseAnimation">暂停动画</n-button>
+        </n-space>
+        <div style="height: 1rem"></div>
+        <n-space>
+          <n-button @click="handleResumeAnimation">继续动画</n-button>
+          <n-button @click="handleStopAnimation">结束动画</n-button>
+        </n-space>
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch } 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 { ThemeEnum, mapOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor,
+  lineColor,
+  lineWidth,
+  iconMarker,
+  lineDuration,
+  lineOpacity,
+  lineShowDir
+} = toRefs(props.chartConfig.option.mapOptions)
+
+//官方没有高德地图api的ts，所以关于官方api，类型全用的any
+let mapIns: any = null
+
+let AMapIns: any = null
+
+let marker: any = null
+
+let polyLine: any = null
+
+let passedPolyline: any = null
+//
+
+const vChartRef = ref<HTMLElement>()
+
+const linePoints = ref<number[][]>([]) //保存一份坐标集数据
+
+const initAMap = (newData: mapOption) => {
+  // 地图初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.MoveAnimation'] // 需要使用的的插件列表
+  })
+    .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, // 地图模式
+        willReadFrequently: true,
+        buildingAnimation: true, //楼块出现是否带动画
+        WebGLParams: {
+          preserveDrawingBuffer: true
+        }
+      })
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(
+          `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+        )
+      }
+      //实例化地图marker
+      marker = new AMap.Marker({
+        map: mapIns,
+        // position: [104.03, 30.39],
+        icon: new AMap.Icon({
+          image: iconMarker.value,
+          size: new AMap.Size(32, 32), //图标大小
+          imageSize: new AMap.Size(26, 26)
+        }),
+        offset: new AMap.Pixel(-13, -26)
+      })
+      //实例化地图线段
+      polyLine = new AMapIns.Polyline({
+        map: mapIns,
+        strokeColor: lineColor.value, //线颜色
+        strokeWeight: lineWidth.value //线宽
+      })
+      //实例化地图线段
+      passedPolyline = new AMapIns.Polyline({
+        map: mapIns,
+        strokeColor: lineColor.value, //线颜色
+        strokeWeight: lineWidth.value, //线宽
+        strokeOpacity: lineOpacity.value, //线透明度
+        showDir: lineShowDir.value, //是否延路径显示白色方向箭头
+        lineCap: 'square' //是否延路径显示白色方向箭头
+      })
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+// 绘制轨迹
+const renderLocaLayerLine = () => {
+  polyLine?.setPath(linePoints.value)
+}
+
+//marker移动
+const handleMarkerMove = () => {
+  marker.on('moving', function (e: Recordable) {
+    passedPolyline?.setPath(e.passedPath)
+    // 设置地图中心点
+    // mapIns.setCenter(e.target.getPosition())
+    // 设置旋转角
+    // mapIns.setRotation(-e.target.getOrientation())
+  })
+  mapIns.setFitView()
+}
+
+//开启动画
+const handleStartAnimation = () => {
+  renderLocaLayerLine()
+  marker.moveAlong(linePoints.value, {
+    // 每一段的时长
+    duration: lineDuration.value,
+    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+    autoRotation: true
+  })
+  handleMarkerMove()
+}
+
+//暂停动画
+const handlePauseAnimation = () => marker.pauseMove()
+
+//继续动画
+const handleResumeAnimation = () => marker.resumeMove()
+
+//停止动画
+const handleStopAnimation = () => marker.stopMove()
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+  (option: mapOption) => {
+    initAMap(option)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+  //这里是坐标集数据
+  linePoints.value = newData
+  stopWatch()
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-amap {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+  .map-action-card {
+    z-index: 1;
+    position: absolute;
+    bottom: 1.5rem;
+    right: 1.5rem;
+  }
+</style>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { AddRealTimeTrajectoryAmapConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export type dataJsonType = typeof dataJson //data.json类型
+
+export enum ThemeEnum {
+  NORMAL = 'normal',
+  DARK = 'dark',
+  LIGHT = 'light',
+  WHITES_MOKE = 'whitesmoke',
+  FRESH = 'fresh',
+  GREY = 'grey',
+  GRAFFITI = 'graffiti',
+  MACARON = 'macaron',
+  BLUE = 'blue',
+  DARKBLUE = 'darkblue',
+  WINE = 'wine',
+  WEIXIN = 'tileLayer'
+}
+
+export enum LangEnum {
+  ZH_CN = 'zh_cn',
+  EN = 'en',
+  ZH_EN = 'zh_en'
+}
+
+export enum ViewModeEnum {
+  PLANE = '2D',
+  STEREOSCOPIC = '3D'
+}
+
+export enum FeaturesEnum {
+  BG = 'bg',
+  POINT = 'point',
+  ROAD = 'road',
+  BUILDING = 'building'
+}
+
+export enum MarkerEnum {
+  // 圆圈
+  CIRCLE_MARKER = 'CircleMarker',
+  // 定位标点
+  MARKER = 'Marker',
+  // 暂无
+  NONE = 'none'
+}
+
+export const option = {
+  dataset: dataJson,
+  mapOptions: {
+    lineColor:'#53A9DE',
+    lineWidth:2,
+    pitch: 60,
+    skyColor: '#53A9DE',
+    amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
+    amapStyleKey: ThemeEnum.DARK,
+    amapStyleKeyCustom: '',
+    amapLon: 104.108689,
+    amapLat: 30.66176,
+    amapZindex: 11,
+    iconMarker: '1.png',
+    lineOpacity: 0.5,
+    lineShowDir: false,
+    mpBorderConfig: {
+      value: 'Border01'
+    },
+    bgColor: 'rgba(255, 255, 255, 0.05)',
+    marker: {
+      fillColor: '#E98984FF',
+      fillOpacity: 0.5,
+      strokeColor: 'white',
+      strokeWeight: 2,
+      strokeOpacity: 0.5,
+      zIndex: 10,
+      bubble: true,
+      cursor: 'pointer',
+      clickable: true
+    },
+    mapMarkerType: MarkerEnum.MARKER,
+    viewMode: ViewModeEnum.STEREOSCOPIC,
+    lang: LangEnum.ZH_CN,
+    features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
+  }
+}
+
+export type mapOption =typeof option['mapOptions']
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = AddRealTimeTrajectoryAmapConfig.key
+  public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(AddRealTimeTrajectoryAmapConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="基础" :expanded="true">
+    <setting-item-box name="语言类型" :alone="true">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="Key" :alone="true">
+      <setting-item name="请务必使用自己的高德应用 key">
+        <n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="自定义地图样式ID" :alone="true">
+      <setting-item>
+        <n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="地图" :expanded="true">
+    <setting-item-box name="主题">
+      <setting-item>
+        <n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="内容" :alone="true">
+      <n-checkbox-group v-model:value="optionData.mapOptions.features">
+        <n-space item-style="display: flex;">
+          <n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
+        </n-space>
+      </n-checkbox-group>
+    </setting-item-box>
+    <setting-item-box name="位置">
+      <setting-item name="经度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="纬度">
+        <n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
+          <template #suffix>°</template>
+        </n-input-number>
+      </setting-item>
+      <setting-item name="初始缩放">
+        <n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="模式" :alone="true">
+      <setting-item>
+        <n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
+          <n-space>
+            <n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
+              {{ song.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </setting-item>
+    </setting-item-box>
+    <template v-if="optionData.mapOptions.viewMode === '3D'">
+      <setting-item-box>
+        <setting-item name="天空色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
+        </setting-item>
+        <setting-item name="俯仰角">
+          <n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+    </template>
+  </collapse-item>
+  <collapse-item name="标记图标" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item>
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的图标"
+          style="width: 250px"
+          :value="iconMarkerValue"
+          :options="iconMarkerOptions"
+          :render-label="renderOption"
+          clearable
+          filterable
+          @update:value="selectHandle"
+        />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="标记" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
+      </setting-item>
+      <setting-item v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.CIRCLE_MARKER" name="颜色">
+        <n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="线条" :expanded="true">
+    <setting-item-box name="样式">
+      <setting-item name="颜色">
+          <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.mapOptions.lineColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="线宽">
+          <n-input-number v-model:value="optionData.mapOptions.lineWidth" :min="0" :max="100" size="small"></n-input-number>
+      </setting-item>
+      <setting-item name="线路径显示方向箭头">
+          <n-switch v-model:value="optionData.mapOptions.lineShowDir" size="small" />
+      </setting-item>
+      <setting-item name="线透明度">
+          <n-input-number v-model:value="optionData.mapOptions.lineOpacity" :min="0" :max="1" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, computed, h, onMounted } from 'vue'
+import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { NEllipsis, NImage,NSelect, NSpace, SelectOption } from 'naive-ui'
+import { getUrlBase64 } from '@/utils/external/imageUrlToBase64'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+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: '酱籽'
+  },
+  {
+    value: ThemeEnum.WEIXIN,
+    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: '隐藏标点'
+  }
+]
+
+const iconMarkerValue = ref<string | null>('1.png')
+
+const isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+const iconMarkerOptions = computed(() => {
+  const pathList = import.meta.glob('../../../../../../assets/external/marker/*')
+  return Object.keys(pathList).map(item => {
+    const imgName = item.split('/').at(-1)
+    return {
+      label: imgName,
+      value: imgName
+    } as SelectOption
+  })
+})
+
+const getMarkerImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/external/marker/${name}`, import.meta.url).href
+}
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMarkerImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const selectHandle = (value: string) => {
+  iconMarkerValue.value = value
+   getUrlBase64(getMarkerImagePath(value),'png',(baseEncodeText: string)=>{
+    props.optionData.mapOptions.iconMarker =baseEncodeText
+  })
+}
+onMounted(() => {
+  getUrlBase64(getMarkerImagePath(props.optionData.mapOptions.iconMarker),'png',(baseEncodeText: string) => {
+    props.optionData.mapOptions.iconMarker = baseEncodeText
+  })
+})
+</script>

+{
+  "longitude": [
+    [
+      1702952429725,
+      "104.07776"
+    ]
+  ],
+  "latitude": [
+    [
+      1702952429725,
+      "30.65186"
+    ]
+  ]
+}
\ No newline at end of file

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('AddRealTimeTrajectoryAmap', true)
+
+export const AddRealTimeTrajectoryAmapConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '设备实时轨迹',
+  category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'real_time_trajectory.png'
+}

+<template>
+  <div class="chart-amap" ref="vChartRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType, toRefs, watch } 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 { ThemeEnum, mapOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const {
+  amapKey,
+  amapStyleKey,
+  amapLon,
+  amapLat,
+  amapZindex,
+  lang,
+  amapStyleKeyCustom,
+  features,
+  viewMode,
+  pitch,
+  skyColor,
+  lineColor,
+  lineWidth,
+  iconMarker,
+  lineOpacity,
+  lineShowDir
+} = toRefs(props.chartConfig.option.mapOptions)
+
+//官方没有高德地图api的ts，所以关于官方api，类型全用的any
+let mapIns: any = null
+
+let AMapIns: any = null
+
+let marker: any = null
+
+let polyLine: any = null
+//
+
+const vChartRef = ref<HTMLElement>()
+
+const viewControlPaths = ref<number[][]>([])
+
+const initAMap = (newData: mapOption) => {
+  // 地图初始化
+  AMapLoader.load({
+    key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.MoveAnimation'] // 需要使用的的插件列表
+  })
+    .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, // 地图模式
+        willReadFrequently: true,
+        buildingAnimation: true, //楼块出现是否带动画
+        WebGLParams: {
+          preserveDrawingBuffer: true
+        }
+      })
+      let satellite = new AMap.TileLayer.Satellite()
+      let roadNet = new AMap.TileLayer.RoadNet()
+      if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
+        mapIns.add([satellite, roadNet])
+      } else {
+        mapIns.remove([satellite, roadNet])
+        mapIns.setMapStyle(
+          `amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
+        )
+      }
+      //实例化地图marker
+      marker = new AMap.Marker({
+        map: mapIns,
+        position: [104.03, 30.39],
+        icon: new AMap.Icon({
+          image: iconMarker.value,
+          size: new AMap.Size(32, 32), //图标大小
+          imageSize: new AMap.Size(26, 26)
+        }),
+        offset: new AMap.Pixel(-13, -26)
+      })
+      //实例化地图线段
+      polyLine = new AMapIns.Polyline({
+        map: mapIns,
+        strokeColor: lineColor.value, //线颜色
+        strokeWeight: lineWidth.value, //线宽
+        strokeOpacity: lineOpacity.value, //线透明度
+        showDir: lineShowDir.value, //是否延路径显示白色方向箭头
+      })
+    })
+    .catch(e => {
+      console.error(e)
+    })
+}
+
+// 绘制轨迹
+const renderLocaLayerLine = (linePoints: number[][]) => {
+  polyLine.setPath(linePoints)
+  //marker移动直接获取最后坐标点
+  handleMarkerMove([[linePoints.flat().at(-2), linePoints.flat().at(-1)]] as number[][])
+}
+
+//marker移动
+const handleMarkerMove = (linePoints: number[][]) => {
+  marker.setPosition(linePoints[0])
+  mapIns.setFitView()
+}
+
+const stopWatch = watch(
+  () => props.chartConfig.option.mapOptions,
+  (option: mapOption) => {
+    initAMap(option)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+  const { data } = newData
+  if (Reflect.get(data, 'longitude') && Reflect.get(data, 'latitude')) {
+    //必须有经纬度
+    for (let _ in data) {
+      //由于上报的是固定格式，所有直接获取对应索引值
+      viewControlPaths.value.push([Number(data['longitude'][0][1]), Number(data['latitude'][0][1])])
+    }
+    renderLocaLayerLine(viewControlPaths.value)
+  }
+  stopWatch()
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-amap {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

@@ -11,15 +11,40 @@ export const enum areaEnum {
   CITY = 'CITY', //城市
   COUNTY = 'COUNTY', //县
   COUNTRY = 'COUNTRY', //国家
-  TOWN = 'TOWN' //镇
+  TOWN = 'TOWN', //镇
+  DISTRICT = 'DISTRICT' //地区
+}
+
+export interface regionInfo {
+  provinceValue:string
+  cityValue: string|null
+  countyValue: string|null
+  levelStr:areaEnum
+}
+
+type itemOption = {
+  label:string
+  value:string
+}
+export interface regionOption{
+  provinceOptions: itemOption[],
+  cityOptions: itemOption[],
+  countryOptions: itemOption[]
 }
 
 //父级地区编码和级别接口
-export interface HistoryParentType {
-  adcode: string | number
+export interface historyParentType {
+  adcode: number
   level: string
 }
 
+export interface backMapLevel{
+  (levelStr:string): boolean
+  (level:string): boolean
+  (): void
+  (): void
+}
+
 //数据源接口
 export interface dataPointI {
   name: string
@@ -50,7 +75,10 @@ export const option = {
     adcode: 'china',
     showHainanIsLands: true,
     saveSelect: {
-      levelStr: areaEnum.COUNTRY
+      levelStr: areaEnum.COUNTRY,
+      cityValue:null, 
+      countyValue:null,
+      provinceValue:'china'
     }
   },
   tooltip: {
@@ -111,6 +139,9 @@ export const option = {
     }
   ]
 }
+
+export type optionType = typeof option
+
 export const MapDefaultConfig = { ...option }
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = AddThreeDimensionalMapConfig.key

@@ -139,6 +139,7 @@ import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/Ch
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import SelectCity from './components/SelectCity.vue'
+import { regionInfo } from './config'
 
 const props = defineProps({
   optionData: {
@@ -186,9 +187,9 @@ const symbolOption = ref([
   }
 ])
 
-const SelectCityRef = ref<typeof SelectCity>()
+const SelectCityRef = ref<InstanceType<typeof SelectCity>>()
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: regionInfo) => {
   const { cityValue, countyValue, provinceValue } = values
   props.optionData.mapRegion.saveSelect = values
   props.optionData.mapRegion.adcode = countyValue

@@ -8,7 +8,7 @@ export const AddThreeDimensionalMapConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '3d地图',
+  title: '3D地图(支持下钻)',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,

@@ -12,7 +12,7 @@ import { onMounted, ref, nextTick, PropType, toRefs, watch, reactive } from 'vue
 import * as echarts from 'echarts'
 import { registerMap } from 'echarts/core'
 import 'echarts-gl'
-import config, { areaEnum, dataPointI, HistoryParentType } from './config'
+import config, { areaEnum, dataPointI, optionType, historyParentType, backMapLevel } from './config'
 import { getGeoJsonMap } from '@/api/external/common'
 import dataMaps from './data.json'
 
@@ -23,9 +23,7 @@ const props = defineProps({
   }
 })
 
-const iconStr = ref(
-  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
-)
+const backIcon = 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
@@ -43,47 +41,51 @@ const toolBoxOption = ref({
     myFullButton: {
       show: false,
       title: '返回',
-      icon: iconStr.value,
+      icon: backIcon,
       iconStyle: {
         color: ''
       },
-      onclick: () => watchAdcode()
+      onclick: () => handleBack()
     }
   }
 })
 
+const excludeCountryLevels = ['PROVINCE','CITY'] //如果从右侧配置选择全中国
+
+const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
+
+//元组 优化if elseif else分支 隐藏返回图标
+const backIconMappingLevels: any[][] =[
+  [
+    (levelStr:string)=>levelStr===areaEnum.COUNTRY,
+    (level:string)=>excludeCountryLevels.includes(level),
+    ()=>toolBoxOption.value.feature.myFullButton.show=true,
+    ()=>toolBoxOption.value.feature.myFullButton.show=false
+  ],
+  [
+    (levelStr:string)=>levelStr===areaEnum.PROVINCE,
+    (level:string)=>includeCityLevels.includes(level),
+    ()=>toolBoxOption.value.feature.myFullButton.show=true,
+    ()=>toolBoxOption.value.feature.myFullButton.show=false
+  ],
+]
+
+
 watch(
   () => props.chartConfig.option,
-  newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
-    if (drillingIn && !newData.saveClickRegion.level) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.PROVINCE &&
-      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.COUNTRY &&
-      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.CITY &&
-      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.PROVINCE &&
-      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+  (newData:optionType) => {
+    const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    const { saveSelect }=mapRegion
+    const { levelStr }=saveSelect
+    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[])=>backLevelItem[0](levelStr)) as backMapLevel[]
+    if(findBackLevel){
+      if(findBackLevel[0]){
+        const findLevel = findBackLevel[1](saveLevelStr.level)
+        if(findLevel)findBackLevel[2]()
+        else findBackLevel[3]()
+      }
     }
-    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
+    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor //返回图标颜色
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
   },
@@ -92,26 +94,27 @@ watch(
   }
 )
 
+//追加echarts右上角自带toolbox
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...{ toolbox: toolBoxOption.value }
 }
 
 //地图点击返回
-const watchAdcode = async () => {
+const handleBack = async () => {
   stopWatch()
   if (props.chartConfig.option.drillingIn) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
     let saveAdcode = savePopParent?.adcode as string | number
-    saveLevelStr.level = savePopParent?.level
+    saveLevelStr.level = savePopParent?.level as string
     if (!savePopParent) {
       saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
       saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
     }
     if (saveAdcode === 0) {
       saveAdcode = 'china'
-      saveLevelStr.level = 'COUNTRY'
+      saveLevelStr.level = areaEnum.COUNTRY
     }
     const exist = await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
@@ -123,11 +126,12 @@ const watchAdcode = async () => {
   }
 }
 
+//地区上级对应配置
 const regionMapParentArea = {
-  [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
-  [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
-  [areaEnum.COUNTY]: areaEnum.CITY, //县或者区的上一级 城市
-  [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
+  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
+  CITY: areaEnum.PROVINCE, //城市的上一级 省份
+  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
+  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
 }
 
 //地图点击
@@ -138,8 +142,8 @@ const handleMap3DClick = async (params: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
-        if (level === 'DISTRICT') return
-        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
+        if (level === 'DISTRICT') return //下钻暂且不支持地区
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
         props.chartConfig.option.mapRegion.adcode = adcode
         props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
@@ -157,12 +161,12 @@ const saveGeojson: Recordable = ref({}) // 保存geojson
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
-// 保存地区级别
-const saveLevelStr = reactive<{ level: string | undefined }>({
+const saveLevelStr = reactive<{level:historyParentType["level"]}>({
+  // 地区级别
   level: ''
 })
 
-const saveHistoryParent = ref<HistoryParentType[]>([])
+const saveHistoryParent = ref<historyParentType[]>([])
 
 //动态注册地图
 const getGeojson = (regionId: number | string) => {
@@ -171,14 +175,14 @@ const getGeojson = (regionId: number | string) => {
       const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
       getGeoJsonMap(
         regionId === 'china' ? chinaDefaultRegionId.value : regionId,
-        !saveLevelStr.level ? levelStr : saveLevelStr.level
+        !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
       ).then(res => {
         const { geoJson, name, code, level } = res.data
         const geoJsonFile = JSON.parse(geoJson)
         if (!geoJsonFile) return
-        saveGeojson.value = geoJsonFile
+        saveGeojson.value = geoJsonFile//保存一份服务端返回的geojson
         const nameChina = name === '中国' ? 'china' : name
-        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
+        registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })
         show.value = false
         resolve(true)
       })
@@ -191,6 +195,9 @@ const getGeojson = (regionId: number | string) => {
   }
 }
 
+//异步时先注册空的 保证初始化不报错
+registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+
 //传adcode 获取上级
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000

@@ -10,7 +10,14 @@ 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, dataExtraInfoType, dataJsonType, dataJsonMarkersType, devicePartInfoInterface } from './config'
+import {
+  MarkerEnum,
+  ThemeEnum,
+  dataExtraInfoType,
+  dataJsonType,
+  dataJsonMarkersType,
+  devicePartInfoInterface
+} from './config'
 import { isArray } from '@/utils'
 import inactive from './images/inactive.png'
 import online from './images/online.png'
@@ -29,7 +36,7 @@ const props = defineProps({
   }
 })
 
-const deviceLatestTableRef = ref<Nullable<InstanceType<typeof DeviceLatestTable>>>(null);
+const deviceLatestTableRef = ref<Nullable<InstanceType<typeof DeviceLatestTable>>>(null)
 
 const {
   amapKey,
@@ -76,7 +83,7 @@ const initMap = (newData: any) => {
         viewMode: viewMode.value, // 地图模式
         willReadFrequently: true,
         WebGLParams: {
-          preserveDrawingBuffer: true,
+          preserveDrawingBuffer: true
         }
       })
       dataHandle(props.chartConfig.option.dataset) //处理地图标点
@@ -99,19 +106,19 @@ const initMap = (newData: any) => {
     })
 }
 
-
 //携带设备的tbDeviceId和别名或者名称
 const devicePartInfo = reactive<devicePartInfoInterface>({
   tbDeviceId: '',
   name: '',
   alias: '',
-  deviceProfileId: '',
+  deviceProfileId: ''
 })
 
 //创建信息弹窗
 const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
   try {
-    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId, deviceProfileId } = extraInfo
+    const { name, alias, organizationDTO, deviceState, deviceProfile, deviceInfo, tbDeviceId, deviceProfileId } =
+      extraInfo
     devicePartInfo.tbDeviceId = tbDeviceId
     devicePartInfo.alias = alias
     devicePartInfo.name = name
@@ -140,30 +147,35 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
       <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;">
         <div style="display:flex;justify-content:space-between;align-items:center;color:white;">
           <span style="${textOverflowFontBold}">${alias || name}</span>
-          ${deviceState === 'INACTIVE'
-        ? `<div style="${deviceStateContainer}">
+          ${
+            deviceState === 'INACTIVE'
+              ? `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
                 <img style="${deviceStateImg};margin-left:0.3rem" src="${inactive}"/>
                 <span style="${deviceStateText}">待激活</span>
                </div>`
-        : deviceState === 'ONLINE'
-          ? `<div style="${deviceStateContainer}">
+              : deviceState === 'ONLINE'
+              ? `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
                 <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/>
                 <span style="${deviceStateText}">在线</span>
                </div>`
-          : `<div style="${deviceStateContainer}">
+              : `<div style="${deviceStateContainer}">
                 <img onclick="handleOpenDrawer()" title="最新数据"  style="${deviceStateImg};cursor:pointer;" src="${listView}"/>
                 <img style="${deviceStateImg};margin-left:0.3rem" src="${offline}"/>
                 <span style="${deviceStateText}">离线</span>
                </div>`
-      }
+          }
         </div>
         <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;">
           <div style="${textOverflow}">所属组织：${organizationDTO.name}</div>
           <div style="${textOverflow}">接入协议：${deviceProfile.transportType}</div>
-          <div style="${textOverflow}">设备位置：${!deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address}</div>
-          <div style="${textOverflow}">${deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'}时间：${lastUpdateFormatTs}</div>
+          <div style="${textOverflow}">设备位置：${
+      !deviceInfo.address ? '该设备暂无地理位置' : deviceInfo.address
+    }</div>
+          <div style="${textOverflow}">${
+      deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
+    }时间：${lastUpdateFormatTs}</div>
         </div>
       </div>
     </div>
@@ -183,12 +195,12 @@ const handleOpenDrawer = async () => {
 }
 
 onMounted(() => {
-  (window as any).handleOpenDrawer = handleOpenDrawer;
-});
+  ;(window as any).handleOpenDrawer = handleOpenDrawer
+})
 
 onUnmounted(() => {
-  (window as any).handleOpenDrawer = null;
-});
+  ;(window as any).handleOpenDrawer = null
+})
 
 //地图鼠标hover
 const mapClick = (markerInstance: any, markerItem: dataJsonMarkersType) => {
@@ -225,7 +237,11 @@ const dataHandle = (newData: dataJsonType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, 5),
-          icon: iconMarker.value
+          icon: new AMapIns.Icon({
+            image: iconMarker.value,
+            size: new AMapIns.Size(22, 22), //图标所处区域大小
+            imageSize: new AMapIns.Size(22, 22) //图标大小
+          })
         })
         // 原作者这种方式添加，属于JS API 1.4.8版本的
         markers.push(markerInstance)

 <script lang="ts" setup name="SelectCity">
 import { onMounted, reactive } from 'vue'
 import { getAreaList } from '@/api/external/common/index'
-import { areaEnum } from '../config'
+import { areaEnum, regionInfo, regionOption } from '../config'
 
 const props = defineProps({
   drillingIn: {
@@ -15,35 +15,35 @@ const props = defineProps({
 
 const emits = defineEmits(['submit'])
 
-const selectOptions = reactive({
+const selectOptions = reactive<regionOption>({
   provinceOptions: [],
   cityOptions: [],
   countryOptions: []
 })
 
-const selectValues = reactive({
+const selectValues = reactive<regionInfo>({
   provinceValue: 'china',
   cityValue: null,
   countyValue: null,
   levelStr: areaEnum.COUNTRY
 })
 
-const getAreaLists = async (level = areaEnum.PROVINCE, parentId = 1) => {
+const getAreaLists = async (level = areaEnum.PROVINCE, parentId:number|string = 1) => {
   const resp = await getAreaList({
     level,
     parentId
   })
   if (!resp) return []
-  return resp.map((item: any) => ({ label: item.name, value: item.code }))
+  return resp.map((item: Recordable) => ({ label: item.name, value: item.code }))
 }
 
 onMounted(async () => {
   selectOptions.provinceOptions = await getAreaLists()
-  ;(selectOptions.provinceOptions as never as any).unshift({
+  ;(selectOptions.provinceOptions).unshift({
     label: '中国',
     value: 'china'
   })
-  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
+  onHandleSelectProvince('china')
   for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
 })
 
@@ -51,7 +51,7 @@ const onHandleSelectProvince = async (value: number | string) => {
   selectValues.cityValue = null
   selectValues.countyValue = null
   if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
-  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value as any)
+  selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value)
   selectValues.levelStr = areaEnum.PROVINCE
 }
 

@@ -11,8 +11,40 @@ export const enum areaEnum {
   CITY = 'CITY', //城市
   COUNTY = 'COUNTY', //县
   COUNTRY = 'COUNTRY', //国家
-  TOWN = 'TOWN' //镇
+  TOWN = 'TOWN', //镇
+  DISTRICT = 'DISTRICT' //地区
 }
+
+export interface regionInfo {
+  provinceValue:string
+  cityValue: string|null
+  countyValue: string|null
+  levelStr:areaEnum
+}
+
+type itemOption = {
+  label:string
+  value:string
+}
+export interface regionOption{
+  provinceOptions: itemOption[],
+  cityOptions: itemOption[],
+  countryOptions: itemOption[]
+}
+
+//父级地区编码和级别接口
+export interface historyParentType {
+  adcode: number
+  level: string
+}
+
+export interface backMapLevel{
+  (levelStr:string): boolean
+  (level:string): boolean
+  (): void
+  (): void
+}
+
 export const includes = []
 
 export const option = {
@@ -29,7 +61,10 @@ export const option = {
     adcode: 'china',
     showHainanIsLands: true,
     saveSelect: {
-      levelStr: areaEnum.COUNTRY
+      levelStr: areaEnum.COUNTRY,
+      cityValue:null, 
+      countyValue:null,
+      provinceValue:'china'
     }
   },
   tooltip: {
@@ -187,6 +222,9 @@ export const option = {
     }
   ]
 }
+
+export type optionType = typeof option
+
 export const MapDefaultConfig = { ...option }
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = OverrideMapBaseConfig.key

@@ -296,6 +296,14 @@ import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import { ref } from 'vue'
 import mapChinaJson from './mapGeojson/china.json'
 import SelectCity from './components/SelectCity.vue'
+import { regionInfo } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
 
 const mapRegionOptions = ref([
   {
@@ -315,17 +323,10 @@ const rippleEffectOptions = ref([
   }
 ])
 
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true
-  }
-})
-
-const SelectCityRef = ref<typeof SelectCity>()
+const selectCityRef = ref<InstanceType<typeof SelectCity>>()
 
 const initMapRegionOptions = () => {
-  mapChinaJson.features.forEach((element: any) => {
+  mapChinaJson.features.forEach((element: Recordable) => {
     if (element.properties.name) {
       mapRegionOptions.value.push({ ...element.properties })
     }
@@ -341,7 +342,7 @@ const mapRegion = computed(() => {
   return props.optionData.mapRegion
 })
 
-const onHandleSelectValues = (values: any) => {
+const onHandleSelectValues = (values: regionInfo) => {
   const { cityValue, countyValue, provinceValue } = values
   props.optionData.mapRegion.saveSelect = values
   props.optionData.mapRegion.adcode = countyValue
@@ -354,6 +355,6 @@ const onHandleSelectValues = (values: any) => {
 }
 
 const handleChangeDrillingIn = () => {
-  SelectCityRef.value?.resetValue()
+  selectCityRef.value?.resetValue()
 }
 </script>

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
-import config, { includes, areaEnum } from './config'
+import config, { includes, areaEnum, optionType, historyParentType, backMapLevel } from './config'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
@@ -60,9 +60,7 @@ use([
 
 const loading = ref(true)
 
-const iconStr = ref(
-  'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
-)
+const backIcon = 'path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z'
 
 const option = reactive({
   value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -76,55 +74,60 @@ const toolBoxOption = ref({
     myFullButton: {
       show: false,
       title: '返回',
-      icon: iconStr.value,
+      icon: backIcon,
       iconStyle: {
         color: ''
       },
-      onclick: () => watchAdcode()
+      onclick: () => handleBack()
     }
   }
 })
 
+const excludeCountryLevels = ['PROVINCE','CITY'] //如果从右侧配置选择全中国
+
+const includeCityLevels = ['CITY'] //如果从右侧配置选择省份
+
+//元组 优化if elseif else分支 隐藏返回图标
+const backIconMappingLevels: any[][] =[
+  [
+    (levelStr:string)=>levelStr===areaEnum.COUNTRY,
+    (level:string)=>excludeCountryLevels.includes(level),
+    ()=>toolBoxOption.value.feature.myFullButton.show=true,
+    ()=>toolBoxOption.value.feature.myFullButton.show=false
+  ],
+  [
+    (levelStr:string)=>levelStr===areaEnum.PROVINCE,
+    (level:string)=>includeCityLevels.includes(level),
+    ()=>toolBoxOption.value.feature.myFullButton.show=true,
+    ()=>toolBoxOption.value.feature.myFullButton.show=false
+  ],
+]
+
 watch(
   () => props.chartConfig.option,
-  newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
-    if (drillingIn && !newData.saveClickRegion.level) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.PROVINCE &&
-      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.COUNTRY &&
-      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.CITY &&
-      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = drillingIn
-    } else if (
-      drillingIn &&
-      newData.saveClickRegion.level === areaEnum.PROVINCE &&
-      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
-    ) {
-      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+  (newData:optionType) => {
+    const { iconColor, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    const { saveSelect }=mapRegion
+    const { levelStr }=saveSelect
+    const findBackLevel = backIconMappingLevels.find((backLevelItem: backMapLevel[])=>backLevelItem[0](levelStr)) as backMapLevel[]
+    if(findBackLevel){
+      if(findBackLevel[0]){
+        const findLevel = findBackLevel[1](saveLevelStr.level)
+        if(findLevel)findBackLevel[2]()
+        else findBackLevel[3]()
+      }
     }
-    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
+    toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor //返回图标颜色
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
     vEchartsSetOption()
   },
   {
-    deep: true,
+    deep:true
   }
 )
+
+//追加echarts右上角自带toolbox
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...{ toolbox: toolBoxOption.value }
@@ -132,25 +135,25 @@ props.chartConfig.option = {
 
 
 //地图点击返回 adcode=100000,名字必须是china
-const watchAdcode = async () => {
+const handleBack = async () => {
   if (props.chartConfig.option.drillingIn) {
     //如果是从右边配置里设置的，比如点击四川省，然后点击返回
     const savePopParent = saveHistoryParent.value.pop()
-    let saveAdcode: any = savePopParent?.adcode
+    let saveAdcode = savePopParent?.adcode as string | number
     saveLevelStr.level = savePopParent?.level as string
     if (!savePopParent) {
       saveAdcode = getParentAdcode(props.chartConfig.option.mapRegion.adcode)
-      saveLevelStr.level = (regionMapParentArea as any)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
+      saveLevelStr.level = (regionMapParentArea as Recordable)[props.chartConfig.option.mapRegion.saveSelect.levelStr]
     }
     if (saveAdcode === 0) {
       saveAdcode = 'china'
-      saveLevelStr.level = 'COUNTRY'
+      saveLevelStr.level = areaEnum.COUNTRY
     }
     await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
     props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
     props.chartConfig.option.geo.map = adcode
-    props.chartConfig.option.series.forEach((item: any) => {
+    props.chartConfig.option.series.forEach((item: Recordable) => {
       if (item.type === 'map') item.map = adcode
     })
     vEchartsSetOption()
@@ -160,42 +163,36 @@ const watchAdcode = async () => {
 
 const vChartRef = ref<typeof VChart>()
 
-const saveGeojson: any = ref({}) // 保存geojson
+const saveGeojson: Recordable = ref({}) //保存geojson
 
 const chinaDefaultRegionId = ref(100000) //如果是china则adcode为100000
 
-const saveLevelStr = reactive({
+const saveLevelStr = reactive<{level:historyParentType["level"]}>({
   // 地区级别
   level: ''
 })
 
-//父级地区编码和级别接口
-interface HistoryParentType {
-  adcode: number
-  level: string
-}
-
-const saveHistoryParent = ref<HistoryParentType[]>([])
+const saveHistoryParent = ref<historyParentType[]>([])
 
 //动态注册地图
-const getGeojson = async (regionId: any) => {
+const getGeojson = async (regionId: string | number) => {
   try {
-    const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //右侧配置项获取的行政级别
+    const { levelStr } = props.chartConfig.option.mapRegion.saveSelect //从右侧配置项获取的行政级别
     const { data } = await getGeoJsonMap(
       regionId === 'china' ? chinaDefaultRegionId.value : regionId,
-      !saveLevelStr.level ? levelStr : saveLevelStr.level
+      !saveLevelStr.level ? levelStr : saveLevelStr.level //没有则获取右侧配置的行政级别
     )
     const { geoJson, name, code, level } = data
     const geoJsonFile = JSON.parse(geoJson)
     if (!geoJsonFile) return
-    saveGeojson.value = geoJsonFile
+    saveGeojson.value = geoJsonFile//保存一份服务端返回的geojson
     const nameChina = name === '中国' ? 'china' : name
-    registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile as any, specialAreas: {} })
+    registerMap(level === areaEnum.COUNTRY ? nameChina : code, { geoJSON: geoJsonFile, specialAreas: {} })//注册地图 geoJSON未做ts类型
     loading.value = false
   } catch (error) {
     loading.value = false
     console.error('动态注册地图出错', error)
-    //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
+    //注册出错则注册空的，不然在选择正确的adcode，视图无法更新
     registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
   }
 }
@@ -227,11 +224,11 @@ const vEchartsSetOption = async () => {
 }
 
 // 更新数据处理
-const dataSetHandle = async (dataset: any) => {
-  props.chartConfig.option.series.forEach((item: any) => {
+const dataSetHandle = async (dataset: Recordable) => {
+  props.chartConfig.option.series.forEach((item: Recordable) => {
     if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
     else if (item.type === 'lines' && dataset.line) {
-      item.data = dataset.line.map((it: any) => {
+      item.data = dataset.line.map((it: Recordable) => {
         return {
           ...it,
           lineStyle: {
@@ -242,11 +239,10 @@ const dataSetHandle = async (dataset: any) => {
     } else if (item.type === 'map' && dataset.map) item.data = dataset.map
   })
   if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
-
   isPreview() && vEchartsSetOption()
 }
 
-// 处理海南群岛
+// 单独处理海南群岛
 const hainanLandsHandle = async (newData: boolean) => {
   if (newData) {
     await getGeojson('china')
@@ -275,7 +271,7 @@ watch(
       await hainanLandsHandle(newData)
       vEchartsSetOption()
     } catch (error) {
-      console.log(error)
+      console.log('监听是否显示南海群岛出错',error)
     }
   },
   {
@@ -284,12 +280,11 @@ watch(
 )
 
 //处理数据标点包括飞线
-const handleDataPoint = (newData: any) => {
+const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
     dataSetHandle(dataJson)
   } else {
-    const filterPoint = dataJson.point.filter((item: any) => item.adcode === newData)
-    // const filterLine = dataJson.line.filter((item: any) => item.adcode === newData)
+    const filterPoint = dataJson.point.filter((item: Recordable) => item.adcode === newData)
     dataSetHandle({
       point: filterPoint,
       line: [] //由于点击单个地图模块，所以去除飞线
@@ -304,13 +299,13 @@ watch(
     try {
       await getGeojson(newData)
       props.chartConfig.option.geo.map = newData
-      props.chartConfig.option.series.forEach((item: any) => {
+      props.chartConfig.option.series.forEach((item: Recordable) => {
         if (item.type === 'map') item.map = newData
       })
       vEchartsSetOption()
       handleDataPoint(newData)
     } catch (error) {
-      console.log(error)
+      console.log('监听地图展示区域发生变化出错',error)
     }
   },
   {
@@ -319,22 +314,23 @@ watch(
   }
 )
 
-// 预览
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+//预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Recordable) => {
   dataSetHandle(newData)
 })
 
+//地区上级对应配置
 const regionMapParentArea = {
-  [areaEnum.PROVINCE]: areaEnum.COUNTRY, //省份的上一级 中国
-  [areaEnum.CITY]: areaEnum.PROVINCE, //城市的上一级 省份
-  [areaEnum.COUNTY]: areaEnum.CITY, //县或者区的上一级 城市
-  [areaEnum.TOWN]: areaEnum.COUNTY //镇的上一级 县或者区
+  PROVINCE: areaEnum.COUNTRY, //省份的上一级 中国
+  CITY: areaEnum.PROVINCE, //城市的上一级 省份
+  COUNTY: areaEnum.CITY, //县或者区的上一级 城市
+  TOWN: areaEnum.COUNTY //镇的上一级 县或者区
 }
 
-//传adcode 获取上级
+//传地区adcode 获取上级
 const getParentAdcode = (adcode: number) => {
   let adcodeNum = 100000
-  saveGeojson.value?.features.forEach((item: any) => {
+  saveGeojson.value?.features.forEach((item: Recordable) => {
     if (item.properties.adcode === adcode) {
       adcodeNum = item.properties.parent.adcode
     }
@@ -343,22 +339,22 @@ const getParentAdcode = (adcode: number) => {
 }
 
 //地图点击下钻
-const handleVChartClick = async (params: any) => {
+const handleVChartClick = async (params: Recordable) => {
   if (props.chartConfig.option.drillingIn) {
     const { name } = params
-    saveGeojson.value?.features.forEach((item: any) => {
+    saveGeojson.value?.features.forEach((item: Recordable) => {
       if (item.properties.name === name) {
         const level = item.properties.level.toUpperCase()
         const adcode = item.properties.adcode
-        if (level === 'DISTRICT') return
-        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
+        if (level === areaEnum.DISTRICT) return //下钻暂且不支持地区
+        if (String(adcode).startsWith('15') && level === areaEnum.CITY) return //特殊处理地区码15开头的
         props.chartConfig.option.mapRegion.adcode = adcode
         props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({
           adcode: item.properties.parent.adcode,
-          level: (regionMapParentArea as any)[level]
+          level: (regionMapParentArea as Recordable)[level]
         })
       }
     })

@@ -5,6 +5,9 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = []
 const option = {
+  tooltip: {
+    formatter: '{c}'
+  },
   backgroundColor: '#0E1327',
   dataset:70,
   series: [{

@@ -18,10 +18,12 @@
         :dampingFactor="dampingFactor"
         @process="onProcess"
         @load="onLoad"
+        @mousedown="handleMouseDown"
         :position="position"
         :rotation="rotation"
         :lights="[lights[lightInput]]"
         :showFps="showFps"
+        :intersectRecursive="true"
         :labels="labels"
       />
       <div v-show="show" class="process">
@@ -96,6 +98,11 @@ const {
   labels,
   lightInput
 } = toRefs(props.chartConfig.option)  as any
+
+const handleMouseDown = (e:any,d:any)=>{
+  console.log(e)
+  console.log(d)
+}
 </script>
 
 <style lang="scss" scoped>

@@ -19,7 +19,8 @@ export const option = {
   buttonTextColor: 'white',
   buttonTextSize: '16',
   buttonTextBold: 500,
-  selectTargetItems: []
+  selectTargetItems: [],
+  quaternary: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -13,6 +13,11 @@
         <n-switch v-model:value="optionData.buttonGhost" />
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="边框">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.quaternary" />
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="颜色">
       <setting-item name="">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>

 <template>
   <n-button
+    :quaternary="quaternary"
     :style="{ width: `${w}px`, height: `${h}px` }"
     :type="buttonType"
     :dashed="buttonDashed"
@@ -29,7 +30,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset,buttonTextBold } = toRefs(
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold, quaternary } = toRefs(
   props.chartConfig.option
 )
 

@@ -19,7 +19,8 @@ export const option = {
   buttonTextColor: 'white',
   buttonTextSize: '16',
   buttonTextBold: 500,
-  selectTargetItems: []
+  selectTargetItems: [],
+  quaternary: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -13,6 +13,11 @@
         <n-switch v-model:value="optionData.buttonGhost" />
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="边框">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.quaternary" />
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="颜色">
       <setting-item name="">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>

 <template>
   <n-button
+     :quaternary="quaternary"
     :style="{ width: `${w}px`, height: `${h}px` }"
     :type="buttonType"
     :dashed="buttonDashed"
@@ -29,7 +30,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold } = toRefs(
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold, quaternary } = toRefs(
   props.chartConfig.option
 )
 

@@ -70,17 +70,20 @@ const transitionDuration = computed(() => {
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  const chartEditStore = useChartEditStore()
-  //判断只要是分组并且分组绑定了ws
-  let hasGroupWs = false
-  chartEditStore.getComponentList.some((item: CreateComponentType) => {
-    if (item.request.requestUrl?.includes('ws')) {
-      hasGroupWs = true
-    }
-  })
-  if (!hasGroupWs) {
+  if(Object.prototype.toString.call(newData) !== '[object Object]'){
     option.dataset = newData
   }
+  // const chartEditStore = useChartEditStore()
+  // //判断只要是分组并且分组绑定了ws
+  // let hasGroupWs = false
+  // chartEditStore.getComponentList.some((item: CreateComponentType) => {
+  //   if (item.request.requestUrl?.includes('ws')) {
+  //     hasGroupWs = true
+  //   }
+  // })
+  // if (!hasGroupWs) {
+  //   option.dataset = newData
+  // }
 })
 </script>
 

@@ -57,17 +57,20 @@ watch(
 
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  const chartEditStore = useChartEditStore()
-  //判断只要是分组并且分组绑定了ws
-  let hasGroupWs = false
-  chartEditStore.getComponentList.some((item: CreateComponentType) => {
-    if (item.request.requestUrl?.includes('ws')) {
-      hasGroupWs = true
-    }
-  })
-  if (!hasGroupWs) {
+  if(Object.prototype.toString.call(newData) !== '[object Object]'){
     option.dataset = newData
   }
+  // const chartEditStore = useChartEditStore()
+  // //判断只要是分组并且分组绑定了ws
+  // let hasGroupWs = false
+  // chartEditStore.getComponentList.some((item: CreateComponentType) => {
+  //   if (item.request.requestUrl?.includes('ws')) {
+  //     hasGroupWs = true
+  //   }
+  // })
+  // if (!hasGroupWs) {
+  //   option.dataset = newData
+  // }
 })
 
 //打开链接

@@ -38,17 +38,20 @@ watch(
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  const chartEditStore = useChartEditStore()
-  //判断只要是分组并且分组绑定了ws
-  let hasGroupWs = false
-  chartEditStore.getComponentList.some((item: CreateComponentType) => {
-    if (item.request.requestUrl?.includes('ws')) {
-      hasGroupWs = true
-    }
-  })
-  if (!hasGroupWs) {
+  if(Object.prototype.toString.call(newData) !== '[object Object]'){
     option.dataset = newData
   }
+  // const chartEditStore = useChartEditStore()
+  // //判断只要是分组并且分组绑定了ws
+  // let hasGroupWs = false
+  // chartEditStore.getComponentList.some((item: CreateComponentType) => {
+  //   if (item.request.requestUrl?.includes('ws')) {
+  //     hasGroupWs = true
+  //   }
+  // })
+  // if (!hasGroupWs) {
+  //   option.dataset = newData
+  // }
 })
 </script>
 

@@ -23,14 +23,17 @@ import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/B
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideLineForDeviceHistoryQueryConfig } from '@/packages/components/external/Charts/Lines/OverrideLineForDeviceHistoryQuery'
+import { OverrideLineRealTimeConfig } from '@/packages/components/external/Charts/Lines/OverrideLineRealTime'
+import { AddLinePlotConfig } from '@/packages/components/external/Charts/Lines/AddLinePlot'
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
 import { OverrideMapAmapConfig } from '@/packages/components/external/Charts/Maps/OverrideMapAmap'
+import { AddRealTimeTrajectoryAmapConfig } from '@/packages/components/external/Charts/Maps/AddRealTimeTrajectoryAmap'
+import { AddHistoryTimeTrajectoryAmapConfig } from '@/packages/components/external/Charts/Maps/AddHistoryTimeTrajectoryAmap'
 import { AddThreeDimensionalMapConfig } from '@/packages/components/external/Charts/Maps/AddThreeDimensionalMap'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 import { OverrideDialConfig } from '@/packages/components/external/Charts/Mores/OverrideDial'
-import { OverrideLineRealTimeConfig } from '@/packages/components/external/Charts/Lines/OverrideLineRealTime'
 import { PickIconConfig } from '@/packages/components/external/Decorates/Mores/PickIcon'
 import { WeatherConfig } from '@/packages/components/external/Decorates/Mores/Weather'
 import { ThreeDimensionalConfig } from '@/packages/components/external/Decorates/Three/ThreeDimensional'
@@ -56,6 +59,8 @@ import { OverrideTableScrollBoardConfig } from '@/packages/components/external/T
 
 /**
  * 重写动态注入
+ * Override是重写的
+ * Add是新增的
  */
 export function useInjectLib(packagesList: EPackagesType) {
   // packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList //此项目扩展侧边栏功能，保留待用
@@ -108,10 +113,13 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)//重写图表下的折线图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)//重写图表下的渐变折线图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineRealTimeConfig)//新增图表下的实时折线图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, AddLinePlotConfig)//新增图表下的函数绘图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideProcessConfig)//重写图表下的native ui
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig)//重写图表下的饼图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig)//重写图表下的地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapAmapConfig)//重写图表下的高德地图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, AddRealTimeTrajectoryAmapConfig)//新增图表下的设备实时轨迹地图
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, AddHistoryTimeTrajectoryAmapConfig)//新增图表下的设备历史轨迹地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, AddThreeDimensionalMapConfig)//新增图表下的3d echarts地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘

@@ -280,7 +280,9 @@ export const useSocketStore = defineStore({
               targetItem.groupList?.forEach((item: CreateComponentType) => {
                 dumpSaveHistoryInput?.forEach((inputItem: { id: string, inputValue: string }) => {
                   if (item.id === inputItem.id) {
-                    item.option.dataset = Function('res', `return ${inputItem?.inputValue}`)(targetItem.option?.dataset)
+                    // item.option.dataset = Function('res', `return ${inputItem?.inputValue}`)(targetItem.option?.dataset)
+                    item.option.dataset = Function('res', `return ${targetItem.option?.dataset[inputItem?.inputValue]}`)(targetItem.option?.dataset)
+                    item.option.selectKey = inputItem?.inputValue // 回显选择的下拉框
                   }
                 })
               })

@@ -33,7 +33,7 @@ defineExpose({
 <template>
   <NSpace>
     <NText>背景选择</NText>
-    <NSelect size="small" placeholder="请选择您要使用的背景" clearable style="width: 250px" :value="canvasConfig.backgroundImage"
+    <NSelect size="small" placeholder="请选择您要使用的背景" clearable style="width: 250px" :value="!canvasConfig.backgroundImage?null:canvasConfig.backgroundImage"
       :options="getAllBackgroundImageList" :render-label="renderOption" @update-value="handleUpdateValue" />
   </NSpace>
 </template>

@@ -117,11 +117,14 @@ defineExpose({
     <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
     <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
     <template #action>
-      <NSpace justify="space-between">
-        <div style="display: flex; align-items: center;  ">
-          <span>「 更多 」</span>
-          <span style="margin-right: 5px;">——</span>
-          <NTag type="info">{{ getRequestTypeName }}</NTag>
+      <NSpace  justify="space-between">
+        <div style="display: flex;flex-direction: column;">
+          <NTag type="info">当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag>
+          <div style="display: flex; align-items: center; margin-top:10px">
+            <span>「 更多 」</span>
+            <span style="margin-right: 5px;">——</span>
+            <NTag type="info">{{ getRequestTypeName }}</NTag>
+          </div>
         </div>
         <NButton type="primary" @click="handleSaveAndRequest">保存 & 发送请求</NButton>
       </NSpace>

@@ -5,11 +5,11 @@
       <n-card size="small">
         <n-code word-wrap :code="toString(targetData.option.dataset)" language="json"></n-code>
       </n-card>
-      <n-tag type="info"> 使用res点语法或者res中括号语法 </n-tag>
-      <n-tag type="warning">示例：res.xxxx</n-tag>
-      <span>测试一下</span>
-      <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
-      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code>
+      <n-tag type="info"> 目前支持实时多属性 </n-tag>
+      <!-- <n-tag type="warning">示例：res.xxxx</n-tag> -->
+      <!-- <span>目前支持实时多属性</span> -->
+      <!-- <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
+      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code> -->
       <n-divider />
       <div v-for="(item, index) in groupList" :key="item.key + index">
         <n-space justify="space-between">
@@ -21,10 +21,16 @@
           <n-input size="small" v-model:value="item.chartConfig.title" :disabled="true"></n-input>
         </n-space>
         <n-space vertical justify="space-between">
-          <n-ellipsis> 设置数据 </n-ellipsis>
+          <n-ellipsis> 选择键值 </n-ellipsis>
+          <n-select size="small" :placeholder="String(!item.option.selectKey?'':item.option.selectKey)" 
+           :options="dataCacheKeys" @update:value="(key:string,options:SelectOption[]) => handleSelectDataKey(key,options,item.id,groupList!)">
+          </n-select>
+        </n-space>
+        <n-space vertical justify="space-between">
+          <n-ellipsis>数据内容 </n-ellipsis>
+          <!-- @update:value="handleInput(groupList!, item.id, $event)" -->
           <n-input
             type="textarea"
-            @update:value="handleInput(groupList!, item.id, $event)"
             size="small"
             :placeholder="String(item.option.dataset)"
           ></n-input>
@@ -36,33 +42,39 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, ref, watch } from 'vue'
+import { toRefs, ref, watch,computed } from 'vue'
 import { useTargetData } from '../../hooks/useTargetData.hook'
 import { toString } from '@/utils'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { uniqBy } from 'lodash'
+import { SelectOption } from 'naive-ui'
 
 const { targetData } = useTargetData()
 
 const { groupList, option } = toRefs(targetData.value)
 
-const testInputValue = ref('')
-
 const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])
 
-const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
+const handleSelectDataKey = (key:string, options:SelectOption[], currentComponentId:string, groupList:CreateComponentType[]) => {
   saveHistoryInputValueList.value.unshift({
-    id,
-    inputValue
+    id:currentComponentId,
+    inputValue:key
   })
-  handleGroupListById(groupList, id, inputValue, option.value.dataset)
+  handleGroupListById(groupList, currentComponentId, key, option.value.dataset)
 }
 
-const executeFn = (inputValue: string, dataset: datasetType) => {
+// const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
+//   saveHistoryInputValueList.value.unshift({
+//     id,
+//     inputValue
+//   })
+//   handleGroupListById(groupList, id, inputValue, option.value.dataset)
+// }
+
+const executeFn = (inputValue: string, dataset: any) => {
   try {
-    return Function('res', `return ${inputValue}`)(dataset)
+    return Function('res', `return ${dataset[inputValue]}`)(dataset)
   } catch (e) {
     return inputValue
   }
@@ -82,14 +94,26 @@ const handleGroupListById = (
   //原生for循环优化性能
   for (let index = 0, total = groupList.length; index < total; index++) {
     const targetItem = groupList[index]
-    if (id === targetItem.id) targetItem.option.dataset = setTargetDataset(inputValue, dataset)
+    if (id === targetItem.id) {
+      targetItem.option.selectKey = inputValue // 回显选择的下拉框
+      targetItem.option.dataset = setTargetDataset(inputValue, dataset)
+    }
   }
 }
 
-//测试返回
-const handleTestInput = (inputValue: string, { dataset }: GlobalThemeJsonType) => {
-  testInputValue.value = setTargetDataset(inputValue, dataset)
-}
+
+//键值
+const dataCacheKeys = computed(()=>{
+  const datasetCache = targetData.value.option.dataset
+  if(!datasetCache) return []
+  if(datasetCache.constructor === Object){
+    //暂且不兼容嵌套对象
+    if(Reflect.ownKeys(datasetCache).length !== 0){
+      return Object.keys(datasetCache).map((dataItem:string)=>({label:dataItem,value:dataItem})) as SelectOption[]
+    }
+  }
+  return []
+})
 
 watch(
   () => targetData.value,

+<template>
+  <div class="go-chart-configurations-data" v-if="targetData">
+    <n-space vertical>
+      <n-tag type="success"> 分组返回的数据源 </n-tag>
+      <n-card size="small">
+        <n-code word-wrap :code="toString(targetData.option.dataset)" language="json"></n-code>
+      </n-card>
+      <n-tag type="info"> 使用res点语法或者res中括号语法 </n-tag>
+      <n-tag type="warning">示例：res.xxxx</n-tag>
+      <span>测试一下</span>
+      <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
+      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code>
+      <n-divider />
+      <div v-for="(item, index) in groupList" :key="item.key + index">
+        <n-space justify="space-between">
+          <n-ellipsis> 组件id </n-ellipsis>
+          <n-input size="small" v-model:value="item.id" :disabled="true"></n-input>
+        </n-space>
+        <n-space justify="space-between">
+          <n-ellipsis> 组件名称 </n-ellipsis>
+          <n-input size="small" v-model:value="item.chartConfig.title" :disabled="true"></n-input>
+        </n-space>
+        <n-space vertical justify="space-between">
+          <n-ellipsis> 设置数据 </n-ellipsis>
+          <n-input
+            type="textarea"
+            @update:value="handleInput(groupList!, item.id, $event)"
+            size="small"
+            :placeholder="String(item.option.dataset)"
+          ></n-input>
+        </n-space>
+        <n-divider />
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, ref, watch } from 'vue'
+import { useTargetData } from '../../hooks/useTargetData.hook'
+import { toString } from '@/utils'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { uniqBy } from 'lodash'
+
+const { targetData } = useTargetData()
+
+const { groupList, option } = toRefs(targetData.value)
+
+const testInputValue = ref('')
+
+const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])
+
+const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
+  saveHistoryInputValueList.value.unshift({
+    id,
+    inputValue
+  })
+  handleGroupListById(groupList, id, inputValue, option.value.dataset)
+}
+
+const executeFn = (inputValue: string, dataset: datasetType) => {
+  try {
+    return Function('res', `return ${inputValue}`)(dataset)
+  } catch (e) {
+    return inputValue
+  }
+}
+
+const setTargetDataset = (inputValue: string, dataset: datasetType) => {
+  //不能用!,会排除0，0也是需要显示的
+  return executeFn(inputValue, dataset) === undefined ? '' : executeFn(inputValue, dataset)
+}
+
+const handleGroupListById = (
+  groupList: CreateComponentType[],
+  id: string,
+  inputValue: string,
+  dataset: datasetType
+) => {
+  //原生for循环优化性能
+  for (let index = 0, total = groupList.length; index < total; index++) {
+    const targetItem = groupList[index]
+    if (id === targetItem.id) targetItem.option.dataset = setTargetDataset(inputValue, dataset)
+  }
+}
+
+//测试返回
+const handleTestInput = (inputValue: string, { dataset }: GlobalThemeJsonType) => {
+  testInputValue.value = setTargetDataset(inputValue, dataset)
+}
+
+watch(
+  () => targetData.value,
+  (newValue: CreateComponentType | CreateComponentGroupType) => {
+    try {
+      const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
+      if (uniqHistoryInputValueList) {
+        newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
+        window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
+      }
+      newValue?.groupList?.forEach((item: CreateComponentType) => {
+        uniqHistoryInputValueList.forEach((uniqueItem: historyInputValue) => {
+          if (uniqueItem.id === item.id) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            handleGroupListById(newValue.groupList!, uniqueItem.id, uniqueItem.inputValue, newValue.option.dataset)
+          }
+        })
+      })
+    } catch (e) {
+      console.log(e)
+    }
+  },
+  {
+    deep: true
+  }
+)
+</script>

 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
+import { downloadTextFile, JSONStringify } from '@/utils'
 const chartEditStore = useChartEditStore()
 
 // 导出
@@ -24,9 +24,9 @@ export const exportHandle = () => {
   }
 
   // 记录缩放比例
-  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // const scaleTemp = chartEditStore.getEditCanvas.scale
   // 百分百展示页面
-  chartEditStore.setScale(1, true)
+  // chartEditStore.setScale(1, true)
   // 展示水印
   // THINGS_KIT 隐藏水印
   watermark.style.display = 'none'