cesium 实战003 -- 地图底图动态配置，前端实现切换时上面叠加的图层不会受到任何影响

小垃圾gg

已于 2024-03-22 17:29:02 修改

阅读量722

点赞数 8

分类专栏： Cesium vue 文章标签：前端经验分享笔记

于 2024-03-22 14:37:57 首次发布

本文链接：https://blog.csdn.net/weixin_47907069/article/details/136940079

版权

Cesium 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了如何在Cesium前端环境中实现地图底图的动态切换，包括使用WebMapTileServiceImageryProvider加载自定义底图，并通过ProviderViewModel管理不同的底图选项，确保切换时不影响其他叠加图层。

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

地图底图动态配置，前端实现切换时上面叠加的图层不会受到任何影响

在这里插入图片描述
这个是原来自带的底图，但往往实际工作中用到的底图需要加载项目中自己的底图，
大概的实现思路是
1、在创建前内置好底图

    //叠加天地图效果-电子
      let mapdt1 = new Cesium.WebMapTileServiceImageryProvider({
        url: "urlwmts",
        layer: "tdtBasicLayer",
        tileMatrixSetID: "default028mm",
        format: "image/png",
        tilingScheme: new Cesium.GeographicTilingScheme(),
        minimumLevel: 1,
        maximumLevel: 18,
        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
        show: true,
      })
      // //叠加天地图效果-遥感影像
      let mapdt2 = new Cesium.WebMapTileServiceImageryProvider({
        url: "urlwmts",
        layer: "tdtBasicLayer",
        tileMatrixSetID: "default028mm",
        format: "image/png",
        tilingScheme: new Cesium.GeographicTilingScheme(),
        minimumLevel: 1,
        maximumLevel: 18,
        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
        show: true,
      })
      //底图切换
      var img_tdt_yx = new Cesium.ProviderViewModel({
        name: "影像底图",
        tooltip: "影像底图",
        //显示切换的图标
        iconUrl: "/xgcsdn/bigscreen/1765184960887226369/WGS84.7365a508_1709867289911.7365a508.png",
        creationFunction: function () {
          var esri = mapdt2
          return esri
        },
      })
      var img_tdt_dz = new Cesium.ProviderViewModel({
        name: "电子底图",
        tooltip: "电子底图",
        iconUrl: "/xgcsdn/bigscreen/1765184960887226369/1690527190267_1709867257279.jpg",
        creationFunction: function () {
          var esri = mapdt1
          return esri
        },
      })

其中 iconUrl 是用控制图层的缩略图；
2、在创建地图的时候，设置默认显示的底图图层、底图数据

        this.webGlobe = new Cesium.Viewer(that.bmapId, {
          baseLayerPicker：true,
          imageryProvider: mapdt2,
          terrainProviderViewModels: [],
          imageryProviderViewModels: [img_tdt_dz, img_tdt_yx], //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
          selectedImageryProviderViewModel: img_tdt_yx, //当前地形图层的显示模型，仅baseLayerPicker设为true有意义
         
        })

其中 terrainProviderViewModels 是控制地形
效果如下：
在这里插入图片描述