From 33d69f9ff8b7100494f873b405d0431ec95b2ada Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Tue, 10 Oct 2023 11:09:44 +0800
Subject: [PATCH] 地图图层更换功能添加
---
src/hooks/use-cesium-tsa.ts | 141 ++++++++++++++++++++++++++++++++++------------
1 files changed, 103 insertions(+), 38 deletions(-)
diff --git a/src/hooks/use-cesium-tsa.ts b/src/hooks/use-cesium-tsa.ts
index d6d00b7..7b03f6d 100644
--- a/src/hooks/use-cesium-tsa.ts
+++ b/src/hooks/use-cesium-tsa.ts
@@ -1,5 +1,6 @@
import { ELocalStorageKey, EDeviceTypeName } from '/@/types'
import * as Cesium from 'cesium'
+import { useMyStore } from '/@/store'
import {
getCurrentInstance,
} from 'vue'
@@ -32,7 +33,62 @@
var viewer: Cesium.Viewer | null = null
export function cesiumOperation () {
let handler: Cesium.ScreenSpaceEventHandler
+ const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
+ // 天地图Key
+ // 天地图地图
+ const TDT_IMG_C = 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+ // 天地图注记
+ const TDT_ZJ = 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+ // 标准地图注记
+ const TID_STAND = 'https://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
+ '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
+ '&style=default&format=tiles&tk=' + TDT_Token
+ // 天地图图层变量
+ const imageryProvider_tdt = new Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_IMG_C,
+ layer: 'tdtImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+ tilingScheme: new Cesium.GeographicTilingScheme(),
+ tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
+ maximumLevel: 50,
+ })
+ // 标准地图图层变量
+ const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ maximumLevel: 18,
+ credit: 'stand_tc'
+ })
+ // 标准地图图层注解
+ const imageryProvider_standZh = new Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ maximumLevel: 18,
+ credit: 'stand_zj'
+ })
+ // 天地图中文注记加载
+ const annotation = new Cesium.WebMapTileServiceImageryProvider({
+ url: TDT_ZJ,
+ layer: 'tdtZwImg_c',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'c',
+ subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+ tilingScheme: new Cesium.GeographicTilingScheme(),
+ tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
+ maximumLevel: 50,
+ })
const dimension = ref(3)
+ const store = useMyStore()
const _init = () => {
// Cesium Token
const cesiumToken = import.meta.env.VITE_CESIUM_TOKEN
@@ -60,42 +116,19 @@
}
// 加载图层、注解方法
const loadLAYER = () => {
- // 天地图Key
- const TDT_Token = 'c6eea7dad4fa1e2d1e32ec0e7c9735db'
- // 天地图地图
- const TDT_IMG_C = 'https://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
- '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
- '&style=default&format=tiles&tk=' + TDT_Token
- // 天地图注记
- const TDT_ZJ = 'https://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
- '&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
- '&style=default&format=tiles&tk=' + TDT_Token
// 天地图图层加载
- const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
- url: TDT_IMG_C,
- layer: 'tdtImg_c',
- style: 'default',
- format: 'tiles',
- tileMatrixSetID: 'c',
- subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
- tilingScheme: new Cesium.GeographicTilingScheme(),
- tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
- maximumLevel: 50,
- })
- viewer?.imageryLayers.addImageryProvider(imageryProvider)
- // 天地图中文注记加载
- const annotation = new Cesium.WebMapTileServiceImageryProvider({
- url: TDT_ZJ,
- layer: 'tdtImg_c',
- style: 'default',
- format: 'tiles',
- tileMatrixSetID: 'c',
- subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
- tilingScheme: new Cesium.GeographicTilingScheme(),
- tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
- maximumLevel: 50,
- })
- viewer?.imageryLayers.addImageryProvider(annotation)
+ if (store.state.common.mapSetting.mode === 1) {
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_tdt)
+ }
+ // 标准地图加载
+ if (store.state.common.mapSetting.mode === 0) {
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
+ viewer?.imageryLayers.addImageryProvider(imageryProvider_standZh)
+ }
+ // 路线图加载
+ if (store.state.common.mapSetting.roadLine === true && store.state.common.mapSetting.mode === 1) {
+ viewer?.imageryLayers.addImageryProvider(annotation)
+ }
}
// 清除所有标记点
@@ -160,18 +193,48 @@
}
}
- // 长按实现地图放大
+ // 地图放大
const zoonIn = (range:number) => {
// 获取当前视角的高度
const cameraHeight = viewer?.camera.positionCartographic.height
const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
viewer?.camera.zoomIn(amout)
}
- // 长按实现地图缩小
+ // 地图缩小
const zoonOut = (range:number) => {
const cameraHeight = viewer?.camera.positionCartographic.height
const amout = Cesium.Math.sign(range) * cameraHeight / Math.log(cameraHeight)
viewer?.camera.zoomOut(amout)
+ }
+ // 生成或删除路网图层
+ const roadPattern = (flag:boolean) => {
+ if (store.state.common.mapSetting.mode === 0) return
+ const imageryLayers = viewer?.scene.imageryLayers
+ const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
+ if (!flag) {
+ viewer?.imageryLayers.remove(tdtZwImg_c)
+ } else {
+ viewer?.imageryLayers.addImageryProvider(annotation)
+ }
+ }
+ // 切换不同背景图层
+ 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')
+ const tdtZwImg_c = imageryLayers?._layers.find(v => v.imageryProvider._layer === 'tdtZwImg_c')
+ viewer?.imageryLayers.remove(tdtImg_c)
+ viewer?.imageryLayers.remove(tdtZwImg_c)
+ } 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)
+ }
+ loadLAYER()
}
onMounted(() => {
if (viewer) return
@@ -193,6 +256,8 @@
switchModel,
dimension,
zoonIn,
- zoonOut
+ zoonOut,
+ roadPattern,
+ patternMap
}
}
--
Gitblit v1.9.3