fix: 1

src/api/map-tile.ts

@@ -1,20 +1,24 @@
 import axios from "./instance";
-import {
-  MAP_TILE_LIST
-} from "./constant";
+import { MAP_TILE_LIST } from "./constant";
 
 type ServiceMapTile = {
-  id: number,
-  mapUrl: string,
-  coord: string
-}
+  id: number;
+  name: string,
+  mapUrl: string;
+  coord: string;
+};
 
 export type MapTile = {
-  id: number,
-  mapUrls: string[],
-  coord: string
-}
+  id: number;
+  name: string,
+  mapUrls: string[];
+  coord: string;
+};
 
-export const fetchMapTiles = () => {
-   axios.get<ServiceMapTile>(MAP_TILE_LIST)
-}
+export const fetchMapTiles = async () => {
+  const items = await axios.get<ServiceMapTile[]>(MAP_TILE_LIST);
+  return items.map((item) => ({
+    ...item,
+    mapUrls: JSON.parse(item.mapUrl),
+  }));
+};

src/api/setting.ts

@@ -9,6 +9,7 @@ type ServeSetting = {
   cover?: string;
   mapType?: 'satellite' | 'standard',
   back?: string;
+  mapId?: number
 };
 
 export type Setting = {
@@ -25,9 +26,10 @@ export type Setting = {
   };
   mapType: 'satellite' | 'standard',
   cover: string;
-  back: string;
+  back?: string;
   fov?: number;
   openCompass?: boolean;
+  mapId?: number
 };
 
 const toLocal = (serviceSetting: ServeSetting): Setting => ({
@@ -36,10 +38,12 @@ const toLocal = (serviceSetting: ServeSetting): Setting => ({
   cover: serviceSetting.cover || defaultCover,
   back: serviceSetting.back || "map",
   mapType: serviceSetting.mapType || 'satellite',
+  mapId: serviceSetting.mapId,
 });
 
 const toService = (setting: Setting): ServeSetting => ({
   settingsId: setting.id,
+  mapId: setting.mapId,
   pose: setting.pose && JSON.stringify(setting.pose),
   cover: setting.cover,
   back: setting.back,

src/sdk/association/setting.ts

@@ -1,4 +1,4 @@
-import { setting } from "@/store";
+import { setting, sysTiles } from "@/store";
 import { nextTick, watchEffect } from "vue";
 import { SDK, SettingResourceType } from "../sdk";
 import { setPose } from ".";
@@ -23,12 +23,26 @@ export const associationSetting = (sdk: SDK, mountEl: HTMLDivElement) => {
   });
 
   watchEffect(() => {
-    const back = setting.value!.back || "map";
-    console.log(setting.value!.back);
-    sdk.setBackdrop(
-      back,
-      back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
-      {}
-    );
+    let mapUrls: string[] | undefined
+    if (setting.value?.mapId) {
+      mapUrls = sysTiles.value.find(item => item.id === setting.value?.mapId)?.mapUrls
+    }
+    if (!mapUrls && setting.value?.back) {
+      const back = setting.value!.back;
+      sdk.setBackdrop(
+        back,
+        back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
+        {}
+      );
+      return;
+    } else if (!mapUrls) {
+      mapUrls = sysTiles.value[0].mapUrls
+    }
+
+
+    if (mapUrls) {
+      console.log('切换瓦片图', mapUrls)
+      sdk.changeMapTile && sdk.changeMapTile(mapUrls)
+    }
   });
 };

src/store/setting.ts

@@ -2,16 +2,20 @@ import { ref } from "vue";
 import { updateSetting, fetchSetting, uploadFile } from '@/api'
 
 import type { Setting as SSetting } from '@/api'
+import { fetchMapTiles, MapTile } from "@/api/map-tile";
 
 export type Setting = LocalMode<SSetting, 'cover'>
 
 export const setting = ref<Setting>()
+export const sysTiles = ref<MapTile[]>([])
 
 export const initialSetting = async () => {
+  sysTiles.value = await fetchMapTiles()
   setting.value = await fetchSetting()
 }
 
 export const updataSetting = async () => {
+  console.error(setting.value)
   if (setting.value) {
     const cover = await uploadFile(setting.value.cover)
     await updateSetting({ ...setting.value, cover })

src/views/setting/index.vue

@@ -11,7 +11,7 @@
 
     <ui-group title="设置天空">
       <ui-group-option>
-        <selectBack :value="setting?.back" @update:value="changeBack" />
+        <selectBack :value="[setting?.back, setting?.mapId]" @update:value="changeBack" />
       </ui-group-option>
     </ui-group>
   </RightFillPano>
@@ -48,9 +48,11 @@ const enterSetPic = () => {
 };
 
 let initBack = setting.value!.back;
+let initMapId = setting.value!.mapId;
 let isFirst = true;
-const changeBack = (back: string) => {
+const changeBack = ([back, mapId]: [string | undefined, number | undefined]) => {
   setting.value!.back = back;
+  setting.value!.mapId = mapId
 
   if (isFirst) {
     let isSave = false;
@@ -58,11 +60,13 @@ const changeBack = (back: string) => {
     enterEdit(() => {
       if (!isSave) {
         setting.value!.back = initBack;
+        setting.value!.mapId = initMapId;
       }
       isFirst = true;
     });
     enterOld(async () => {
       initBack = setting.value!.back;
+      initMapId = setting.value!.mapId;
       isSave = true;
       await loadPack(updataSetting());
     });

src/views/setting/select-back.vue

@@ -10,14 +10,16 @@
               :label="back.label"
               :url="back.image"
               :active="activeParent === back.value"
-              @click="value !== back.value && $emit('update:value', back.value)"
             />
           </div>
           <template #overlay>
             <Menu :selectedKeys="[value]">
               <MenuItem
                 v-for="item in back.children"
-                @click="value !== item.value && $emit('update:value', item.value)"
+                @click="
+                  value[1] !== item.value &&
+                    $emit('update:value', [undefined, item.value])
+                "
                 :key="item.value"
               >
                 {{ item.label }}
@@ -31,8 +33,8 @@
         :type="back.type"
         :label="back.label"
         :url="back.image"
-        :active="value === back.value"
-        @click="value !== back.value && $emit('update:value', back.value)"
+        :active="value[0] === back.value"
+        @click="value[0] !== back.value && $emit('update:value', [back.value, undefined])"
       />
     </template>
   </div>
@@ -42,22 +44,22 @@
 import { Dropdown, MenuItem, Menu } from "ant-design-vue";
 import { computed, ref } from "vue";
 import BackItem from "./back-item.vue";
+import { fetchMapTiles } from "@/api/map-tile";
+import { sysTiles } from "@/store";
 
-const props = defineProps<{ value: string | undefined }>();
-defineEmits<{ (e: "update:value", value: string): void }>();
+const props = defineProps<{ value: [string | undefined, number | undefined] }>();
+defineEmits<{
+  (e: "update:value", value: [string | undefined, number | undefined]): void;
+}>();
 
-const backs = ref([
+const backs = computed(() => [
   { label: "无", type: "icon", image: "icon-without", value: "none" },
   {
     label: "地图",
     type: "map",
     image: "/oss/fusion/default/images/map.png",
     value: "dt",
-    children: [
-      { label: "天地图", value: "map" },
-      { label: "高德地图", value: "gdMap" },
-      { label: "谷歌地图", value: "gMap" },
-    ],
+    children: sysTiles.value.map((t) => ({ label: t.name, value: t.id })),
   },
   {
     label: "蓝天白云",
@@ -87,11 +89,11 @@ const backs = ref([
 
 const activeParent = computed(() => {
   for (const back of backs.value) {
-    if (back.value === props.value) {
+    if (back.value === props.value[0]) {
       return back.value;
     } else if (back.children) {
       for (const c of back.children) {
-        if (c.value === props.value) {
+        if (c.value === props.value[1]) {
           return back.value;
         }
       }