前言
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知识,敬请关注。