Vue+Ts+Cesium：自定义初始控件和底图

目录

前言

一、设置控件是否显示

页面效果

​编辑 

二、加载天地图作为底图

1.获取天地图Key

2.使用天地图地图服务

3.底图的加载

1.创建ts文件

2.编写代码

4.使用编写的函数完成地球加载（完整代码）

页面效果（背景发生变化是我自己设置的，默认是黑色没有影响）

总结

---

前言

紧接上文，上篇文章谈到Cesium学习中最基本的地球加载。最终实现的页面我们发现有很多视图控件，在我们日常的学习中这些控件往往排不上用场，或者大部分是用不着的。为了最初呈现的页面的美观性我们可以不显示这些控件。同时，我们也不一定要使用Cesium默认的底图，本文使用天地图提供的底图作为自定义底图示例。

一、设置控件是否显示

在createViewer()中就设置这些控件是否显示(根据自己的需求不一定要全去掉)

function createViewer() {
  viewer = new Cesium.Viewer("viewerDiv", {
    sceneModePicker: false, //视图模式按钮
    homeButton: false, //返回初始位置按钮
    selectionIndicator: false, //选择器
    geocoder: false, //搜索功能
    fullscreenButton: false, //全屏按钮
    animation: false, //动画功能
    baseLayerPicker: false, //图层选择器
    navigationHelpButton: false, //帮助按钮
    timeline: false, //时间线控件
    infoBox: false, //信息框
    // 3D视图模式
    sceneMode: Cesium.SceneMode.SCENE3D,
  });
  (viewer.cesiumWidget.creditContainer as HTMLDivElement).style.display =
    "none"; //viewer.cesiumWidget.creditContainer声明HTMLdiv容器避免TS编译器报错
}

页面效果

 

二、加载天地图作为底图

1.获取天地图Key

注册天地图账号，获取Key(如果不知道如何获取可以去参考一下别人的文章)

进入地图API看到如下界面，这里有天地图能提供的地图服务(PS:服务资源有更详细的)

2.使用天地图地图服务

拿到Key如果不知道如何使用，可以参考我以下的操作。

我首先新建一个ts文件，直接命名为tdt_layer

 ts文件中编写一个简单函数，调用时只需要输入地图服务的地图类型和投影类型

export function getTdT(type: string, coor: string) {
  //天地图图层调用
  const tdt_Key: string = "你的Key";
  const tdt_BaseUrl: string = `https://t3.tianditu.com/${type}_${coor}/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=${type}&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tdt_Key}`;
  return tdt_BaseUrl;
}

地图类型_投影类型 

这样操作下来，我们想调用天地图的地图服务就很方便了，只需要引入这个函数，调用的时候传入所使用的类型和投影类型(Cesium好像只支持球面墨卡托，若有误望指出) 

PS:只适用于以下图层

3.底图的加载

上面的createViewer()代码量越来越大，而我们在Cesium的学习中避免不了多次创建Vue文件实现不同的功能，为了提高效率，我们可以直接编写一个简单的函数来帮我们完成重复的代码编写。

1.创建ts文件

2.编写代码

import * as Cesium from 'cesium';
import { getTdT } from './tdt_layer';
export function createBaseViewer(viewerName: Cesium.Viewer, viewerDiv: string, baseLayer: Array<string>) {
    viewerName = new Cesium.Viewer(viewerDiv, {
        selectionIndicator: false,
        infoBox: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        baseLayer:
            new Cesium.ImageryLayer(
            new Cesium.OpenStreetMapImageryProvider({
                url: 'https://a.tile.openstreetmap.org/'
            })
        )
        //     new Cesium.ImageryLayer(
        //     new Cesium.WebMapTileServiceImageryProvider({
        //         url: getTdT(baseLayer[0], baseLayer[1]),
        //         layer: baseLayer[0],
        //         style: "default",
        //         format: "image/jpeg",
        //         tileMatrixSetID: baseLayer[1],
        //     })
        // ),
    });
    (viewerName.cesiumWidget.creditContainer as HTMLDivElement).style.display = //隐藏数据来源
        "none"; //viewer.cesiumWidget.creditContainer声明HTMLdiv容器避免TS编译器报错


    return viewerName; //返回viewer
}

注意上面的代码其实我没有使用天地图的服务，因为天地图服务有限额，有时超额就用不了。所以我还写了一个OSM作为备用(对网络环境有一定的要求) 二者选择一个就行了。接下来的示例我会使用下面的天地图。

这个函数需要我们传入三个参数(使用OSM数据的就只用两个baseLayer可忽略)     分别为：

viewerName(你所声明的viewer的名字)

viewerDiv(所挂载的Div容器的id)

baseLayer[](getTdT()的type和coor)

4.使用编写的函数完成地球加载（完整代码）

<template>
  <div id="viewerDiv"></div>
</template>

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted, getCurrentInstance } from "vue";
import { createBaseViewer } from "../utils/createBaseViewer";

let viewer: Cesium.Viewer;

function createViewer() {
  viewer = createBaseViewer(viewer, "viewerDiv", ["vec", "w"]);
}

onMounted(() => {
  createViewer();
});
</script>

<style scoped>
#viewerDiv {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

页面效果（背景发生变化是我自己设置的，默认是黑色没有影响）

这样我们就能在Vue文件中通过简洁的代码实现上述效果，后续我也会通过这样的方式创建初始viewer(如果我不偷懒更新的话) 

---

总结

本篇内容并不难，更多是避免编写重复且繁杂的代码，学习Cesium一个简洁且有效的起步能让自己的心情舒畅不少。