天地图官网都是用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获取高度了
参考下面文章
获取天地图三维地形高度

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐