From 65f4b3f007fe452dc2dcc0045577f1cd10dd4e06 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 30 Oct 2024 11:18:20 +0800
Subject: [PATCH] 工具栏，菜单，等更改
---
src/views/layout/components/scomponents/baseMap.vue | 155 +++++++++++++++++++++++++++------------------------
1 files changed, 82 insertions(+), 73 deletions(-)
diff --git a/src/views/layout/components/scomponents/baseMap.vue b/src/views/layout/components/scomponents/baseMap.vue
index 85430ef..7d5f699 100644
--- a/src/views/layout/components/scomponents/baseMap.vue
+++ b/src/views/layout/components/scomponents/baseMap.vue
@@ -2,20 +2,23 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-28 11:44:45
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-10-29 00:05:47
+ * @LastEditTime: 2024-10-29 20:50:40
* @FilePath: \bigScreen\src\views\layout\components\scomponents\baseMap.vue
* @Description:
*
* Copyright (c) 2024 by shuishen, All Rights Reserved.
-->
<template>
- <div class="map-layers-change-box">
- <div class="title">
+ <public-box>
+ <template #name>
<div class="name"><i class="fa fa-map"></i> 底图</div>
- <div class="close" @click="$emit('close')"><i class="fa fa-close"></i></div>
- </div>
+ </template>
- <div class="content">
+ <template #close>
+ <div class="close" @click="$emit('close', 'map')"><i class="fa fa-close"></i></div>
+ </template>
+
+ <template #content>
<div class="layers-box-content">
<ul class="layers-box">
<li :class="{ on: item.mode == curMode }" v-for="item, index in baseMaps" :key="index"
@@ -26,18 +29,23 @@
</ul>
</div>
- <div class="checkbox checkbox-primary checkbox-inline" style="margin-left:10px;color:#fff"><input
- id="chkHasTerrain" class="styled" type="checkbox"> <label for="chkHasTerrain">显示地形</label></div>
- </div>
- </div>
+ <div class="show-terrain" style="margin-left:10px;color:#fff">
+ <el-checkbox @change="terrainChange" v-model="showTerrainFlag" label="显示地形" size="large" />
+ </div>
+ </template>
+ </public-box>
</template>
<script setup>
+import { getAssetsFile } from 'utils/utils'
import AmapMercatorTilingScheme from './cesium/AmapMercatorTilingScheme/index'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const Cesium = DC.getLib('Cesium')
+const cesiumToken =
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYTZlNGNlYS01NTU1LTQ1MGEtYmNlZS0yNTE2NDk5YWM2MjEiLCJpZCI6MTc5Njk2LCJpYXQiOjE3MDA1NDcwMjV9.qcl4AH2731cfFd0-I1ZLUINPXqvglLkDFD-UGR2zU5M'
+Cesium.Ion.defaultAccessToken = cesiumToken
const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
// 天地图Key
@@ -166,7 +174,7 @@
let mapLayers = [
{
- src: '',
+ src: getAssetsFile('stand.png'),
mode: '0',
name: '天地图矢量',
layers: [
@@ -175,7 +183,7 @@
]
},
{
- src: '',
+ src: getAssetsFile('satellite.png'),
mode: '1',
name: '天地图影像',
layers: [
@@ -187,7 +195,7 @@
]
},
{
- src: '',
+ src: getAssetsFile('stand.png'),
mode: '2',
name: '高德矢量',
layers: [
@@ -198,7 +206,7 @@
]
},
{
- src: '',
+ src: getAssetsFile('satellite.png'),
mode: '3',
name: '高德影像',
layers: [
@@ -268,78 +276,79 @@
}
loadLAYER(0, 0)
+
+const showTerrainFlag = ref(false)
+
+const terrainChange = (e) => {
+ if (e) {
+ let terrain = DC.TerrainFactory.createTerrain(DC.TerrainType.XYZ, {
+ url: 'https://data.marsgis.cn/terrain'
+ })
+ global.$viewer.setTerrain(terrain)
+ } else {
+ global.$viewer.setTerrain()
+ }
+}
</script>
<style lang="scss" scoped>
-.map-layers-change-box {
- position: absolute;
- right: 540px;
- z-index: 99;
- top: 152px;
- border: 1px solid #4081CB;
- border-radius: 4px;
- background: rgba(135, 158, 199, 0.3);
- box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
- pointer-events: auto;
+.close {
+ cursor: pointer;
+}
- .title {
+.layers-box-content {
+ .layers-box {
display: flex;
justify-content: space-between;
+ flex-wrap: wrap;
+ width: 354px;
padding: 0 10px;
- border-color: rgba(32, 160, 255, 0.3);
- background: rgba(30, 36, 50, 0.6);
- height: 40px;
- line-height: 40px;
- color: #FFFFFF;
- font-size: 16px;
+ box-sizing: border-box;
- .close {
+ li {
+ margin-top: 10px;
cursor: pointer;
- }
- }
- .content {
- .layers-box-content {
- .layers-box {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- width: 354px;
- padding: 0 10px;
- box-sizing: border-box;
+ &.on,
+ &:hover {
+ div:first-child {
+ border: solid 2px #337fe5;
+ }
- li {
- margin-top: 10px;
- cursor: pointer;
-
- &.on,
- &:hover {
- div:first-child {
- border: solid 2px #337fe5;
- }
-
- div:last-child {
- color: #337fe5;
- }
- }
-
- div:first-child {
- width: 76px;
- height: 76px;
- background: red;
- border: 2px solid white;
- box-sizing: border-box;
- }
-
- div:last-child {
- width: 76px;
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- text-align: center;
- }
+ div:last-child {
+ color: #337fe5;
}
}
+
+ div:first-child {
+ width: 76px;
+ height: 76px;
+ background: red;
+ border: 2px solid white;
+ box-sizing: border-box;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ div:last-child {
+ width: 76px;
+ height: 20px;
+ line-height: 20px;
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ }
+ }
+ }
+}
+
+.show-terrain {
+ ::v-deep(.el-checkbox) {
+ .el-checkbox__label {
+ color: #fff;
}
}
}
--
Gitblit v1.9.3