【Cesium】八、Cesium 默认地图不显示,不加载默认Bing地图

文章目录

前言

Cesium 默认加载的地图是bing地图,个人认为请求bing地图会收到网络限制,导致地图资源下载很慢,所以设置默认不加载bing地图(后续我使用的是天地图)

参考文章:
cesium 不加载默认的底图 默认地图 Bing地图
cesium将默认底图设置为不显示

在这里插入图片描述

实现方法

怎么做才能不加载默认地图

第一种:

viewer.imageryLayers.get(0).show = false;

第二种:

viewer.imageryLayers.remove(viewer.imageryLayers.get(0))

看情况可以写成:

imageLayers.remove(imageLayers.get(0)); //移除默认影像图层

App.vue

提供App.vue 完整代码,仅供参考:

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import * as Cesium from "cesium";
const initFn = async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: true,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  });

  // 将 viewer 暴露到全局
  window.viewer = viewer;

  viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息
  // 不显示底图
  viewer.imageryLayers.get(0).show = false;

  const imageLayers = viewer.scene.imageryLayers;

  // 第一种 不加载默认地图
  viewer.imageryLayers.get(0).show = false;

  // 第二种
  // viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
  // imageLayers.remove(imageLayers.get(0)); //移除默认影像图层

  const TDTTK = "337bc7a038fe9d239af76ab013ff4594"; //填入你自己的天地图Key
  // 天地图影像
  const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdt",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });
  viewer.imageryLayers.addImageryProvider(tdtLayer);
  // 天地图注记
  const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdtAnno",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });
  viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
};

onMounted(() => {
  // Cesium 初始化
  initFn();
});
</script>
<style>
#app {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  text-align: center;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

后面我还会更新更多关于cesium知识,敬请关注。