做优化的网站电话seo关键词排名优化哪好
文章目录
- 前言
- 实现方法
- App.vue
前言
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知识，敬请关注。