From 2c680fa0913b9ff1e8e7a4f8bc3dd49543fc97b5 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Mon, 09 Oct 2023 15:19:43 +0800
Subject: [PATCH] 地图基本功能-放大缩小
---
src/components/cesiumMap/cesium.vue | 50 +++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 45 insertions(+), 5 deletions(-)
diff --git a/src/components/cesiumMap/cesium.vue b/src/components/cesiumMap/cesium.vue
index 407ae0c..e8867d1 100644
--- a/src/components/cesiumMap/cesium.vue
+++ b/src/components/cesiumMap/cesium.vue
@@ -9,6 +9,16 @@
<SearchOutlined style="fontSize:24px; color: blue;" />
</span>
</div>
+
+ <div class="zoon">
+ <span class="zoon-in" @mousedown="handleMouseDown(zoonIn)" @mouseup="handleMouseUp">
+ <PlusOutlined style="fontSize:24px; color: black;" />
+ </span>
+
+ <span class="zoon-out" @mousedown="handleMouseDown(zoonOut)" @mouseup="handleMouseUp">
+ <MinusOutlined style="fontSize:24px; color: black;" />
+ </span>
+ </div>
<div class="switch">
<div class="2d" v-if="dimension === 2" @click="switchDimension('3D')">2D</div>
<div class="3d" v-else @click="switchDimension('2D')">3D</div>
@@ -20,7 +30,7 @@
import _ from 'lodash'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
import { gaodeSearch } from '/@/api/gaode'
-import { SearchOutlined } from '@ant-design/icons-vue'
+import { SearchOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'
import { useMyStore } from '/@/store'
import * as Cesium from 'cesium'
type result = {
@@ -31,6 +41,7 @@
}
const searchText = ref('')
const resultList = ref<result[]>([])
+const timer = ref<any>(null)
const store = useMyStore()
const centerConfig = computed(() => {
return store.state.map.centerConfig
@@ -56,7 +67,7 @@
}
}
const searchLocation = _.debounce(search, 500)
-const { flyTo, addPoint, removeById, switchModel, dimension } = cesiumOperation()
+const { flyTo, addPoint, removeById, switchModel, dimension, zoonIn, zoonOut } = cesiumOperation()
const enter = (e: string) => {
removeById('key')
const filterItem = resultList.value.find(v => v.value === e)
@@ -88,6 +99,16 @@
const switchDimension = (type: string) => {
switchModel(type)
}
+const handleMouseDown = (fn:Function) => {
+ // clearInterval(timer.value)
+ timer.value = setInterval(() => {
+ fn(10)
+ }, 100)
+}
+const handleMouseUp = () => {
+ clearInterval(timer.value)
+}
+
</script>
<style scoped lang="scss">
@@ -128,17 +149,36 @@
}
}
+.zoon {
+ position: absolute;
+ right: 20px;
+ bottom: 340px;
+ color: #fff;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ height: 32px;
+ &-in, &-out {
+ padding: 5px;
+ background-color: #fff;
+ height: 32px;
+ cursor: pointer;
+ margin-top: 10px;
+ }
+}
+
.switch {
position: absolute;
background-color: #fff;
z-index: 30;
- bottom: 80px;
+ bottom: 400px;
font-size: 14px;
right: 20px;
cursor: pointer;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .6);
- width: 28px;
- height: 28px;
+ width: 34px;
+ height: 34px;
color: #4e4e4e;
font-weight: 600;
display: flex;
--
Gitblit v1.9.3