cesium 1.132 vue vite 使用天地图地形和地名
·
天地图官网都是用CDN导入,Cesium必须挂载在window对象上,插件还是混淆过的。使用vue+vite包管理器引入用起来不是很方便。还好有大佬弄了一个插件提取自天地图官方插件轻量级cesium天地图地形和地名
安装vite-plugin-cesium和cesium构建好项目后
要使用插件还要安装pako和protobufjs
1.132cesium的有些api变化了,插件里要替换下(或者直接用我修改的)
GeoWTFS.js里的wgs84ToDrawingBufferCoordinates改成worldToDrawingBufferCoordinates
GeoTerrainProvider.js里的
GeoTerrainProvider的构造函数要加一个参数callback函数,随便返回什么都行,不影响使用
最后使用样例
import {onMounted, ref} from "vue";
import * as Cesium from 'cesium';
import earthPng from "@/assets/images/cesium/earth.png"
import TdtPlug from "@/tdtCesium/index"
onMounted(async () => {
const token = import.meta.env.VITE_CESIUM_TOKEN
let TDImage = new Cesium.ProviderViewModel({
name: "天地图",
tooltip: "天地图提供的18级卫星影像",
iconUrl: earthPng,
creationFunction: () => new Cesium.UrlTemplateImageryProvider({
"url": "https://{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + token,
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18
})
})
let viewer = new Cesium.Viewer("cesiumContainer", {
requestRenderMode: true,//仅根据场景中的更改确定是否需要渲染帧
selectedImageryProviderViewModel: TDImage,
imageryProviderViewModels: [TDImage],
fullscreenButton: false, //全屏按钮
animation: false, // 动画小组件
timeline: false, // 时间轴
homeButton: true,//主页按钮
baseLayerPicker: true, // 底图组件,选择三维数字地球的底图(imagery and terrain)。
infoBox: false, // 信息框
vrButton: false, // VR模式
geocoder: false, // 地理编码(搜索)组件
sceneModePicker: false, // 场景模式,切换2D、3D 和 Columbus View (CV) 模式。
selectionIndicator: false, //是否显示选取指示器组件
navigationHelpButton: false, // 帮助提示,如何操作数字地球。
})
try {
//地形
viewer.terrainProvider = new TdtPlug.GeoTerrainProvider({
url: `https://t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&x={x}&y={y}&l={z}&tk=${token}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
});
} catch (e) {
console.error(e)
}
//地名
new TdtPlug.GeoWTFS(viewer, {
subdomains: ['0','1','2','3','4','5','6','7'],
url: `https://t{s}.tianditu.gov.cn/mapservice/GetTiles?lxys={z},{x},{y}&VERSION=1.0.0&tk=${token}`,
icoUrl: `https://t{s}.tianditu.gov.cn/mapservice/GetIcon?id={id}&tk=${token}`,
metadata:{
boundBox: {
minX: -180,
minY: -90,
maxX: 180,
maxY: 90
},
minLevel: 1,
maxLevel: 20
},
autoCollide: true, //是否开启避让
collisionPadding: [5, 10, 8, 5], //开启避让时,标注碰撞增加内边距,上、右、下、左
serverFirstStyle: true, //服务端样式优先
})
//国界
const iboMap = new Cesium.UrlTemplateImageryProvider({
url: `https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=${token}`,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
tilingScheme: new Cesium.WebMercatorTilingScheme(),
maximumLevel: 18,
enablePickFeatures: false
});
viewer.imageryLayers.addImageryProvider(iboMap);
})
使用天地图地形没办法使用sampleTerrain获取高度了
参考下面文章
获取天地图三维地形高度
更多推荐



所有评论(0)