（四）Cesium切换底图部件

a974313302

已于 2024-04-15 19:32:16 修改

阅读量377

点赞数 1

分类专栏： cesium+vue3学习笔记文章标签： javascript 开发语言 ecmascript

于 2024-04-04 21:30:08 首次发布

本文链接：https://blog.youkuaiyun.com/a974313302/article/details/137383091

版权

文章介绍了如何在Vue项目中使用Cesium库加载并切换不同的地图服务，如ArcGIS、高德、天地图和OSM。提到在使用ArcGIS时遇到报错，但未详述具体错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件：ChangeMap.js

import * as Cesium from 'cesium'
import { useCesiumStore } from '@/stores/useCesiumStore.js'
import { toRaw } from 'vue'

export function changeMap(mapName) {
    const viewer = toRaw(useCesiumStore().viewer); // Get the viewer instance
    viewer.imageryLayers.removeAll(); // Remove all imagery layers    
    let imgFrom
    let layer = viewer.imageryLayers
    if (mapName === 'ArcGISMap') { //ArcGIS地图
        Cesium.ArcGisMapService.defaultAccessToken = '你的ArcGis key'
        const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE)
        layer.add( Cesium.ImageryLayer.fromProviderAsync(arcGisImagery))

//第二种写法,参考官网API：https://cesium.com/learn/cesiumjs/ref-doc/ArcGisMapServerImageryProvider.html
        //  imgFrom =  Cesium.ArcGisMapServerImageryProvider.fromUrl(
        //     "https://ibasemaps-api.