feat: 封装天地图在线地图服务；Cesium接入天地图在线影像和地形服务。

index.html

@@ -13,10 +13,14 @@
     </style>
     <!-- 天地图三维地形服务接入 -->
     <script
+      cesium="true"
+      src="node_modules/cesium/Build/Cesium/Cesium.js"
+    ></script>
+    <!-- <script
       type="text/javascript"
       cesium="true"
       src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js"
-    ></script>
+    ></script> -->
     <script
       type="text/javascript"
       cesium="true"

package.json

@@ -20,7 +20,7 @@
     "axios": "^1.6.7",
     "cesium": "1.108",
     "pinia": "^2.1.7",
-    "vue": "^3.4.19"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",

pnpm-lock.yaml

@@ -15,7 +15,7 @@ dependencies:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.4.2)(vue@3.4.21)
   vue:
-    specifier: ^3.4.19
+    specifier: ^3.4.21
     version: 3.4.21(typescript@5.4.2)
 
 devDependencies:

src/App.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="map-viewer">
+  <div id="map">
-    <SceneViewer></SceneViewer>
+    <SceneViewer id="scene-viewer"></SceneViewer>
   </div>
 </template>
 
@@ -9,8 +9,16 @@ import SceneViewer from './components/map/SceneViewer.vue'
 </script>
 
 <style scoped>
-#map-viewer {
+#map {
-  width: 100%;
+  width: 100vw;
   height: 100vh;
+  position: relative;
+  /* overflow: hidden; */
+}
+#scene-viewer {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  overflow: hidden;
 }
 </style>

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<HTMLDivElement>()
 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() {
+      // 定位完成之后的回调函数
+    },
+  })
 })
 </script>
 
 <style scoped>
 #cesium-viewer {
   width: 100%;
-  height: 100vh;
+  height: 100%;
 }
 </style>

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 }