feat(src/packages): 优化高德地图组件部分代码

@@ -88,7 +88,7 @@ export const option = {
     amapLon: 104.108689,
     amapLat: 30.66176,
     amapZindex: 11,
-    typeMarker: '',
+    iconMarker: '1.png',
     mpBorderConfig: {
       value: 'Border01',
     },

@@ -81,8 +81,8 @@
           size="small"
           placeholder="请选择您要使用的图标"
           style="width: 250px"
-          :value="typeMarkerValue"
-          :options="typeMarkerOptions"
+          :value="iconMarkerValue"
+          :options="iconMarkerOptions"
           :render-label="renderOption"
           clearable
           filterable
@@ -92,16 +92,6 @@
     </setting-item-box>
     <setting-item-box name="弹窗选择" v-if="optionData.mapOptions.mapMarkerType === MarkerEnum.MARKER">
       <setting-item name="弹窗选择">
-        <!-- <NSelect
-          size="small"
-          placeholder="请选择您要使用的弹窗"
-          style="width: 250px"
-          :value="mapSelectBorderValue"
-          :options="mapSelectBorderOption.option"
-          @update:value="mapSelectBorderHandle"
-          clearable
-          filterable
-        /> -->
         <NSelect
           size="small"
           placeholder="请选择您要使用的弹窗"
@@ -119,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, computed, h, onMounted, reactive } from 'vue'
+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'
@@ -234,7 +224,7 @@ const featuresOptions = [
 const MarkerOptions = [
   // {
   //   value: MarkerEnum.CIRCLE_MARKER,
-  //   label: '圆形标点'
+  //   label: '圆形标点' //在地图里点击无效，所以注释，有需要自行打开即可
   // },
   {
     value: MarkerEnum.MARKER,
@@ -246,17 +236,7 @@ const MarkerOptions = [
   }
 ]
 
-onMounted(() => {
-  props.optionData.mapOptions.typeMarker = getMarkerImagePath(props.optionData.mapOptions.typeMarker || 'position1.png')
-  typeMarkerValue.value = props.optionData.mapOptions.typeMarker || 'position1.png'
-  mapSelectBorderValue.value =
-    `${props.optionData.mapOptions.mpBorderConfig.value.toLocaleLowerCase()}.png` || 'border01.png'
-})
-
-const typeMarkerValue = ref<string | null>('position1.png')
-
-const mapSelectBorderValue = ref<string | null>('border01.png')
-
+/**通用函数封装 */
 const isHref = (url: string) => {
   try {
     new URL(url)
@@ -265,81 +245,87 @@ const isHref = (url: string) => {
     return false
   }
 }
+const renderCommonOption = (option: SelectOption, src: string) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src,
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+const getImagePath = (path: string, name: string) => {
+  return isHref(name) ? name : new URL(`${path}/${name}`, import.meta.url).href
+}
+/** */
 
-// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
-const typeMarkerOptions = computed(() => {
+/** 图标选择 */
+const iconMarkerValue = ref<string | null>('1.png')
+
+// import.meta.glob 这里没有封装，不能通过传值传进去
+const iconMarkerOptions = computed(() => {
   const pathList = import.meta.glob('./images/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(`./images/marker/${name}`, import.meta.url).href
-}
+const getMarkerImagePath = (name: string) => getImagePath('./images/marker', name)
 
-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 renderOption = (option: SelectOption) => renderCommonOption(option, getMarkerImagePath(option.value as string))
 
 const selectHandle = (value: string) => {
-  typeMarkerValue.value = value
-  props.optionData.mapOptions.typeMarker = getMarkerImagePath(value)
+  iconMarkerValue.value = value
+  props.optionData.mapOptions.iconMarker = getMarkerImagePath(value)
 }
+/** */
+
+/** 弹窗选择 */
+const mapSelectBorderValue = ref<string | null>('border01.png')
 
 const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
 
-// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
+// import.meta.glob 这里没有封装，不能通过传值传进去
 const mapBorderOptions = computed(() => {
   const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
   return Object.keys(pathList)
     .map(item => {
       const imgName = item.split('/').at(-1) as string
-      if (needBorder.includes(imgName)) {
-        return {
-          label: imgName,
-          value: imgName
-        } as SelectOption
-      }
+      if (!needBorder.includes(imgName)) return
+      return {
+        label: imgName,
+        value: imgName
+      } as SelectOption
     })
     .filter(Boolean) as SelectOption[]
 })
 //
 
-const getMapBorderImagePath = (name: string) => {
-  return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
-}
+const getMapBorderImagePath = (name: string) => getImagePath('../../../../../../assets/images/chart/decorates', name)
 
-const renderMapBorderOption = (option: SelectOption) => {
-  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
-    h(NImage, {
-      width: 25,
-      src: getMapBorderImagePath(option.value as string),
-      previewDisabled: true,
-      style: { height: '25px' }
-    } as Recordable),
-    h(NEllipsis, null, () => option.label)
-  ])
-}
+const renderMapBorderOption = (option: SelectOption) =>
+  renderCommonOption(option, getMapBorderImagePath(option.value as string))
 
 const selectMapBorderHandle = (value: string) => {
   mapSelectBorderValue.value = value
   const toLowerValue = value.toLocaleLowerCase()
   ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
-    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
-  }
+    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substring(1)?.split('.')[0]
+  } //这里首字母转大写，动态引入时匹配对应目录也是大写字母开头，即components\Decorates\Borders\Border01
 }
+/** */
+
+onMounted(() => {
+  iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
+  props.optionData.mapOptions.iconMarker = getMarkerImagePath(iconMarkerValue.value)
+  mapSelectBorderValue.value = `${props.optionData.mapOptions.mpBorderConfig.value?.toLocaleLowerCase()}.png`
+  props.optionData.mapOptions.mpBorderConfig.value = getMarkerImagePath(mapSelectBorderValue.value)
+})
 </script>

@@ -16,7 +16,7 @@ import { isArray } from '@/utils'
 import djh from './images/djh.png'
 import online from './images/online.png'
 import lx1 from './images/lx1.png'
-import positionImg from './images/marker/position1.png'
+import positionImg from './images/marker/1.png'
 import { getDeviceActiveTime, getDeviceList } from '@/api/external/common/index'
 import dayjs from 'dayjs'
 import SearchBox from './components/SearchBox.vue'
@@ -46,7 +46,7 @@ let {
   pitch,
   skyColor,
   marker,
-  typeMarker,
+  iconMarker,
   mpBorderConfig
 } = toRefs(props.chartConfig.option.mapOptions)
 
@@ -104,7 +104,7 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => {
     const res = await getDeviceActiveTime(tbDeviceId) //查询设备最后离线时间
     let { lastUpdateTs } = res[0]
     const lastUpdateFormatTs = dayjs(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss')
-    //render方式渲染小组件里的边框组件
+    //以render方式渲染小组件里的边框组件
     const BorderInstance = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/index.vue`)
     const config = await import(`../../../../Decorates/Borders/${mpBorderConfig.value.value}/config.ts`)
     const BorderConfigInstance = new config.default()
@@ -201,7 +201,7 @@ const dataHandle = (newData: dataJsonType) => {
         const markerInstance = new AMapIns.Marker({
           position: [markerItem.position[0], markerItem.position[1]],
           offset: new AMapIns.Pixel(-13, -30),
-          icon: typeMarker.value || positionImg
+          icon: iconMarker.value || positionImg
         })
         // markers.push(markerInstance) 原作者这种方式添加，属于JS API 1.4.8版本的
         // markerInstance.setMap(mapIns)