From 0e882f03b725da570cec11bdeab636da32e4f936 Mon Sep 17 00:00:00 2001
From: cbwu <504-wuchengbo@htsdfp.com>
Date: Mon, 11 Mar 2024 15:09:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85=E5=A4=A9=E5=9C=B0?=
=?UTF-8?q?=E5=9B=BE=E5=9C=A8=E7=BA=BF=E5=9C=B0=E5=9B=BE=E6=9C=8D=E5=8A=A1?=
=?UTF-8?q?=EF=BC=9BCesium=E6=8E=A5=E5=85=A5=E5=A4=A9=E5=9C=B0=E5=9B=BE?=
=?UTF-8?q?=E5=9C=A8=E7=BA=BF=E5=BD=B1=E5=83=8F=E5=92=8C=E5=9C=B0=E5=BD=A2?=
=?UTF-8?q?=E6=9C=8D=E5=8A=A1=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 6 ++-
package.json | 2 +-
pnpm-lock.yaml | 2 +-
src/App.vue | 16 ++++--
src/components/map/SceneViewer.vue | 44 +++++++++++++++-
src/utils/map/TDTProvider.ts | 82 ++++++++++++++++++++++++++++++
6 files changed, 144 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 859c4c4..4ecaf65 100644
--- a/index.html
+++ b/index.html
@@ -13,10 +13,14 @@
+
diff --git a/src/components/map/SceneViewer.vue b/src/components/map/SceneViewer.vue
index fdafe1f..59de14e 100644
--- a/src/components/map/SceneViewer.vue
+++ b/src/components/map/SceneViewer.vue
@@ -6,6 +6,12 @@
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
+import {
+ TDTLayerType,
+ TDTProjectionType,
+ getTDTProvider,
+ getTDTTerrainProvider,
+} from '@/utils/map/TDTProvider'
const viewerDivRef = ref()
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署
@@ -47,12 +53,48 @@ onMounted(async () => {
//去除cesium logo，隐藏版本信息
const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
creditContainer.style.display = 'none'
+ // 抗锯齿
+ // 是否支持图像渲染像素化处理
+ // if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
+ // viewer.resolutionScale = window.devicePixelRatio
+ // }
+ viewer.scene.postProcessStages.fxaa.enabled = true
+ // 水雾特效
+ viewer.scene.globe.showGroundAtmosphere = true
+ // 关闭太阳，月亮，天空盒，雾等相关特效
+ viewer.scene.moon.show = false
+ viewer.scene.fog.enabled = false
+ viewer.scene.sun.show = false
+ viewer.scene.skyBox.show = false
+
+ //添加天地图影像
+ viewer.imageryLayers.addImageryProvider(
+ getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator),
+ )
+ //添加天地图影像注记
+ viewer.imageryLayers.addImageryProvider(
+ getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator),
+ )
+ // 添加三维地形服务
+ viewer.terrainProvider = getTDTTerrainProvider()
+ // 将三维球定位到中国
+ viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 12550000),
+ orientation: {
+ heading: Cesium.Math.toRadians(348.4202942851978),
+ pitch: Cesium.Math.toRadians(-89.74026687972041),
+ roll: Cesium.Math.toRadians(0),
+ },
+ complete: function callback() {
+ // 定位完成之后的回调函数
+ },
+ })
})
diff --git a/src/utils/map/TDTProvider.ts b/src/utils/map/TDTProvider.ts
index ba47e25..3635c49 100644
--- a/src/utils/map/TDTProvider.ts
+++ b/src/utils/map/TDTProvider.ts
@@ -1 +1,83 @@
// 天地图影像服务
+import { WebMapTileServiceImageryProvider } from 'cesium'
+//地图服务枚举类型：_c为墨卡托投影，_w为经纬度投影
+enum TDTLayerType {
+ Vec = 'vec', //矢量底图
+ Cva = 'cva', //矢量注记
+ Img = 'img', //影像底图
+ Cia = 'cia', //影像注记
+ Ter = 'ter', //地形晕渲
+ Cta = 'cta', //地形注记
+ Ibo = 'ibo', //全球境界
+}
+enum TDTProjectionType {
+ WebMercator = 'w',
+ WGS84 = 'c',
+}
+//天地图token
+const TDT_tk = '1c5b7cbf9da7d33b221f68c32b6a1791'
+// 服务域名
+const tdtUrl = 'https://t{s}.tianditu.gov.cn'
+// 服务负载子域
+const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
+/**
+ * 获取天地图影像服务
+ * @param layerType :影像类型
+ * @param projectionType :投影类型，注WGS84下有问题
+ * @param minimumLevel :最小缩放级别
+ * @param maximumLevel :最大缩放级别
+ * @returns :ImageryProvider
+ */
+export function getTDTProvider(
+ layerType: string,
+ projectionType: string,
+ minimumLevel: number = 0,
+ maximumLevel: number = 18,
+) {
+ // 切片方式
+ const tilingScheme =
+ projectionType == TDTProjectionType.WGS84
+ ? new Cesium.GeographicTilingScheme()
+ : new Cesium.WebMercatorTilingScheme()
+ const tileMatrixLabels =
+ projectionType == TDTProjectionType.WGS84
+ ? new Array(19).fill(1).map((v, i) => `${i}`)
+ : undefined
+ const imageryProvider = new WebMapTileServiceImageryProvider({
+ //影像底图
+ url:
+ `${tdtUrl}/DataServer?T=${layerType}_${projectionType}&x={TileCol}&y={TileRow}&l={TileMatrix}&tk=` +
+ TDT_tk,
+ subdomains: subdomains, //天地图8个服务器
+ minimumLevel: minimumLevel, //定义最小缩放级别
+ maximumLevel: maximumLevel, //定义最大缩放级别
+ layer: layerType,
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: projectionType, //'GoogleMapsCompatible', //使用谷歌的瓦片切片方式
+ tilingScheme: tilingScheme,
+ tileMatrixLabels: tileMatrixLabels,
+ })
+ return imageryProvider
+}
+/**
+ * 获取天地图三维地形服务
+ * @returns ImageryProvider
+ */
+export function getTDTTerrainProvider() {
+ const terrainUrls: string[] = []
+
+ for (let i = 0; i < subdomains.length; i++) {
+ const url =
+ tdtUrl.replace('{s}', subdomains[i]) +
+ '/mapservice/swdx?T=elv_c&tk=' +
+ TDT_tk
+ terrainUrls.push(url)
+ }
+
+ const provider = new Cesium.GeoTerrainProvider({
+ urls: terrainUrls,
+ })
+ return provider
+}
+export { TDTLayerType, TDTProjectionType }