From 95d5dd947d88e756ffae520e9b1311f65be89469 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Tue, 10 Oct 2023 11:23:06 +0800
Subject: [PATCH] 添加功能：切换图层的时icon随之变动
---
src/hooks/use-cesium-tsa.ts | 2 --
src/components/cesiumMap/cesium.vue | 11 +++++++++--
src/utils/common.ts | 4 ++++
3 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/src/components/cesiumMap/cesium.vue b/src/components/cesiumMap/cesium.vue
index afbbc9d..1a99b4b 100644
--- a/src/components/cesiumMap/cesium.vue
+++ b/src/components/cesiumMap/cesium.vue
@@ -36,7 +36,7 @@
</template>
<div class="layer-icon">
<div class="layer-btn">
- <div class="img"></div>
+ <div class="img" :style="{'background': loadBgImg}"></div>
</div>
</div>
</a-popover>
@@ -49,6 +49,7 @@
import { gaodeSearch } from '/@/api/gaode'
import { SearchOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
import { useMyStore } from '/@/store'
+import { requireImg } from '/@/utils/common'
import * as Cesium from 'cesium'
type result = {
label: string,
@@ -130,6 +131,13 @@
store.commit('SET_MAP_SETTING_MODE', type)
patternMap()
}
+const loadBgImg = computed(() => {
+ if (store.state.common.mapSetting.mode === 0) {
+ return `url(${requireImg('icons/stand.png')}) no-repeat center`
+ } else {
+ return `url(${requireImg('icons/satellite-icon.png')}) no-repeat center`
+ }
+})
const roadChange = (e:any) => {
if (mapSetting.value.mode === 0) return
store.commit('SET_MAP_SETTING_ROAD_LINE', e.target.checked)
@@ -139,7 +147,6 @@
roadPattern(false)
}
}
-const checked = ref(true)
</script>
<style scoped lang="scss">
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
index 7b03f6d..d2153cc 100644
--- a/src/hooks/use-cesium-tsa.ts
+++ b/src/hooks/use-cesium-tsa.ts
@@ -220,7 +220,6 @@
// 切换不同背景图层
const patternMap = () => {
const imageryLayers = viewer?.scene.imageryLayers
- console.log(imageryLayers, 'imageryLayers')
// 切换为标准图层
if (store.state.common.mapSetting.mode === 0) {
const tdtImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtImg_c')
@@ -230,7 +229,6 @@
} else {
const tdtStand_c = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_tc')
const tdtStand_zj = imageryLayers?._layers.find(v => v.imageryProvider.credit.html === 'stand_zj')
- console.log(tdtStand_c, tdtStand_zj, '===========================')
viewer?.imageryLayers.remove(tdtStand_c)
viewer?.imageryLayers.remove(tdtStand_zj)
}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 26fd977..891e618 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -10,3 +10,7 @@
lable.click()
URL.revokeObjectURL(lable.href)
}
+
+export const requireImg = (imgPath: string) => {
+ return new URL(`../assets/${imgPath}`, import.meta.url).href
+}
--
Gitblit v1.9.3