From 1dd9751171f27170d7b96e51b7074b336a545f7a Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期三, 04 六月 2025 13:29:58 +0800
Subject: [PATCH] 切换影像
---
src/views/GisView.vue | 140 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 140 insertions(+), 0 deletions(-)
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index afd104f..1fea18c 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -1,5 +1,22 @@
<template>
<div id="gis-view" ref="mapRef"></div>
+ <!-- 鍒囨崲搴曞浘褰卞儚 -->
+ <div @click="handleShow" class="diqiu">
+ <img src="@/assets/img/screen/dq.png" alt="" />
+ </div>
+ <div v-show="picShow" class="earthBox">
+ <div
+ v-for="(item, index) in views"
+ :key="index"
+ :class="['item-container', { active: currentIndex === index }]"
+ @click="switchView(index)"
+ >
+ <div class="icon-wrapper">
+ <img :src="getImageUrl(item.icon)" :alt="item.label" />
+ <span class="label">{{ item.label }}</span>
+ </div>
+ </div>
+ </div>
</template>
<script setup>
@@ -18,6 +35,66 @@
import { useRoute } from "vue-router";
import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+const views = [
+ { label: "鍦板浘", value: "map", icon: "鍦板浘.png" },
+ { label: "褰卞儚", value: "image", icon: "褰卞儚.png" },
+ { label: "鍦板舰", value: "terrain", icon: "鍦板舰.png" },
+];
+
+const getImageUrl = (iconName) => {
+ return `/images/earth/${iconName}`;
+};
+
+const picShow = ref(false);
+
+const handleShow = () => {
+ picShow.value = !picShow.value;
+};
+
+const currentIndex = ref(-1);
+
+let currentLayer = null;
+
+const switchView = async (index) => {
+ currentIndex.value = index;
+
+ // 濡傛灉宸茬粡鏈夊浘灞傚瓨鍦紝鍏堜粠鍦板浘涓Щ闄�
+ if (currentLayer) {
+ currentLayer.removeFromMap();
+ currentLayer = null; // 娓呯┖寮曠敤
+ }
+
+ if (views[index].value === "map") {
+ // 鐧惧害鍦板浘
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "baidu",
+ url: "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1",
+ });
+ } else if (views[index].value === "image") {
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "mapworld",
+ url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb",
+ layers: "tdtBasicLayer",
+ style: "default",
+ format: "image/jpeg",
+ maximumLevel: 18,
+ layer: "",
+ tileMatrixSetID: "",
+ });
+ //鏍囨敞灞�
+ currentLayer = await earthCtrl.factory.createImageryLayer({
+ sourceType: "mapworld",
+ subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
+ url: "https://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=c53eb074c3fcba5ac86103d4d711bbe8",
+ });
+ } else if (views[index].value === "terrain") {
+ // 鍦板舰鍥惧眰
+ currentLayer = await earthCtrl.factory.createTerrainLayer({
+ sourceType: "arcgis",
+ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+ });
+ }
+};
const route = useRoute();
let handler = null;
function initMap() {
@@ -41,6 +118,8 @@
//鏄剧ずfps
earthCtrl.showFPS = true;
+
+ // 绯荤粺鐩墠榛樿浣跨敤鐨�
earthCtrl.factory.createImageryLayer({
sourceType: "mapworld",
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
@@ -472,9 +551,70 @@
height: 100vh;
position: absolute;
}
+
// // 淇敼鎸囧崡閽堜綅缃�
/deep/ .compass {
right: 128px !important;
top: 112px;
}
+
+.diqiu {
+ position: absolute;
+ bottom: 8%;
+ right: 4%;
+ z-index: 9999;
+}
+
+.earthBox {
+ z-index: 9999;
+ width: 12%;
+ height: 7%;
+ background-color: rgba(0, 9, 9, 0.3);
+ position: absolute;
+ right: 8%;
+ bottom: 6%;
+ display: flex;
+ justify-content: space-evenly;
+ padding: 10px 6px;
+}
+
+.icon-wrapper {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ border: 1px solid transparent; /* 榛樿閫忔槑杈规鍗犱綅 */
+
+ img {
+ height: 100%;
+ width: auto; /* 纭繚鍥剧墖鎸夋瘮渚嬬缉鏀� */
+ margin: 0;
+ padding: 0;
+ display: block; /* 绉婚櫎鍥剧墖涓嬫柟鍙兘瀛樺湪鐨勭┖鐧介棿闅� */
+ }
+
+ .label {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ text-align: center;
+ color: white;
+ }
+}
+
+.item-container {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+}
+
+.item-container.active .icon-wrapper {
+ border: 1px solid #218967; /* 钃濊壊杈规 */
+}
+
+.item-container.active .label {
+ background-color: rgba(33, 137, 103, 0.8);
+}
</style>
--
Gitblit v1.9.3