cesium 修改默认地图选择器内容

最新推荐文章于 2024-04-08 10:17:09 发布
最新推荐文章于 2024-04-08 10:17:09 发布
阅读量3.4k 收藏 13
点赞数 4
分类专栏： cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36266612/article/details/109463303
版权

cesium默认的底图选择器中有很多底图实际用不到，但是这个选择器很好用，所以想着修改选择器中的内容，将其中的地图改为用的比较多的地图。
cesium地图选择器
当初始化viewer的时候，将baseLayerPicker设置为true；
cesium viewer api
同时将imageryProviderViewModels属性设置为自定义的地图集合；
示例：

      var imageryViewModels = [];
      var tiandituyx=new Cesium.ProviderViewModel({
          name:"天地图影像",
          tooltip:"天地图影像及中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
              var mapsources=[];
              var yx = new Cesium.WebMapTileServiceImageryProvider({
              url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
            var jd= new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
            mapsources.push(yx,jd);
            return mapsources;
          }
      });
      imageryViewModels.push(tiandituyx)

上述代码是天地图影像图层和天地图中文标注图层。
效果图

如果要设置默认图层，只需要将viewer里的selectedImageryProviderViewModel设置为想设置的默认图层即可，如果不设置，则默认显示第一个图层。在这里插入图片描述

完整代码：

<!doctype html>
<html>

<head>
    <title>修改默认的地图选择器内容</title>
    <script src="./Cesium/Cesium.js"></script>
    <meta charset="utf-8" />
    <style>
        @import url("./Cesium/bucket.css");
        @import url("./Cesium/Widgets/widgets.css");
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;

        }
    </style>
</head>

<body>
    <div id="cesiumContainer" style="width: 100%;height: 100%;"></div>
    <script>
      var imageryViewModels = [];
      var tiandituyx=new Cesium.ProviderViewModel({
          name:"天地图影像",
          tooltip:"天地图影像及中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
              var mapsources=[];
              var yx = new Cesium.WebMapTileServiceImageryProvider({
              url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
            var jd= new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
            mapsources.push(yx,jd);
            return mapsources;
          }
      });
      imageryViewModels.push(tiandituyx)
      var tianditujd=new Cesium.ProviderViewModel({
          name:"天地图街道",
          tooltip:"天地图街道数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return new Cesium.WebMapTileServiceImageryProvider({
              url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tdtVecBasicLayer",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "GoogleMapsCompatible",
              show: false
            })
          }
      });
      imageryViewModels.push(tianditujd)
      var tiandituzj=new Cesium.ProviderViewModel({
          name:"天地图中文标注",
          tooltip:"天地图中文标注数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return new Cesium.WebMapTileServiceImageryProvider({
              url:
                "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImgMarker",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImgMarker",
              show: true,
              maximumLevel: 16
            })
          }
      });
      imageryViewModels.push(tiandituzj)
      var tianditugjx=new Cesium.ProviderViewModel({
          name:"天地图国界线",
          tooltip:"天地图国界线数据",
          iconUrl:"./sampleData/images/tianditu.jpg",
          creationFunction: function() {
            return new Cesium.WebMapTileServiceImageryProvider({
              url:
                "https://t0.tianditu.gov.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=8b207a527da69c7a32f636801fa194d4",
              layer: "tiandituImg",
              style: "default",
              format: "image/jpeg",
              tileMatrixSetID: "tiandituImg",
              show: true,
              maximumLevel: 16
            })
          }
      });
      imageryViewModels.push(tianditugjx)
      var viewer=new Cesium.Viewer("cesiumContainer",{   
        baseLayerPicker : true,//是否显示图层选择器 
        imageryProviderViewModels:imageryViewModels,
        selectedImageryProviderViewModel:tianditujd
      })  
    </script>

</body>
</html>
李小喵Y
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
cesium加载百度地图
05-20
cesium加载百度地图方法
Cesium入门之六：Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)
九仞山的专栏
05-14 9030
详细介绍了Cesium加载影像图层的类、方法和步骤，举例说明加载ArcGIS地图、Bing地图、Mapbox地图、高德地图、腾讯地图、天地图等各类影像图的加载方法
cesium 不加载默认的底图 默认地图 Bing地图
最新发布
AllBluefm的专栏
04-08 396
【代码】cesium 不加载默认的底图 默认地图 Bing地图。
81.（cesium篇）cesium修改灰色背景（默认蓝色）.zip
06-16
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“81.（cesium篇）cesium修改灰色背景（默认蓝色）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 添加必应地图无需申请key
04-26
大家都知道，Cesium通过本身的工具就提供了bing必应地图的加载，但是，需要自己申请key，如果不想那么麻烦申请key，就可以通过下面的代码实现，官方沙箱实例就可以运行啊，需要的下载，有问题联系我
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏
04-10
Cesium 常用地图纠偏 百度、高德、Arcgis、腾讯地图纠偏 资源预览:http://dongnan185.com:8083/videos/jiupian.mp4 启动:npm i npm run serve
Cesium 中创建viewer 的参数详解
moyebaobei1的博客
05-13 3484
Cesium 需要创建viewer，构建基础的场景信息。创建viewer的过程，包含很多参数，可以调节viewer的样式，或者展现出来的功能。今天具体探索一下这些参数的含义。 首先看一下，创建viewer的时候有哪些可选的参数。 Name Type Description container Element | String The DOM element or ID that will contain the widget. options Object o
Cesium 修改默认地球贴图的两种方式
海亲王府
12-17 4310
Cesium 建立Cesium.Viewer的时候，默认的贴图（imageryProviderViewModels）为'BingMapsAerial'，但是因为“HTTP401: 已拒绝 - 请求的资源需要用户身份验证” 所以加载不了。 这个时候我们如果需要直接调用其他贴图，比如“NaturalEarth”。 一、可以通过修改Cesium文件夹...
【Cesium】地图初始化，添加地形、光照、底图、搜索等基本功能
Wangzx的博客
04-18 1114
Cesium地图初始化，添加地形、光照、底图、搜索等基本功能
cesium将默认底图设置为不显示
专注GIS开发
01-18 4495
cesium不显示底图
Cesium：入门教程（二）之数据源加载
Puzzle的博客
08-10 9287
前言 成功运行 helloworld 的例子后，下面对控件等进一步说明。 鼠标 左键单击和拖拽：沿着地球表面平移（调整相机位置） 右键单击和拖拽：相机放大缩小（调整相机距离） 滚轮 - 相机放大缩小（调整相机距离） 中间按下和拖拽 - 围绕地球表面旋转相机（调整相机方向） 控件 图源：https://www.jianshu.com/p/24ffa692aac3 ① Geocoder : 地理位置查询定位控件，默认使用bing地图............
Cesium支持加载百度地图源码可直接使用
04-13
很多小伙伴想要在Cesium里增加百度地图，现在源代码整理好了，需要的可以下载了，具体有什么问题可以私信我
slider.rar cesium加载天地图实现地图卷帘
07-21
cesium加载天地图地图，并实现地图卷帘功能
VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）
qq_52595269的博客
12-24 6164
VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）
Cesium加载影像地图
zhishiqu的博客
06-13 4949
cesium加载各种地图影像
032：cesium修改默认地图源，动态指定地图
大剑师兰特的GIS世界
03-24 800
第032个本示例的目的是介绍如何在vue+cesium中修改默认地图源，可以动态的指定地图。Cesium加载地图时默认时bing地图，但是由于地域限制，在国内显示不出来，为空白黑乎乎的，只有选择了地图才能将圆球体现出来。另外编号13，显示的是WGS84 Ellipsoid的地形图。
WebGL可视化地球和地图引擎：Cesium.js
热门推荐
GIS笔记
07-23 3万+
Cesium介绍Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化；跨平台；跨浏览器；实现真正的动态数据进行可视化。Cesium 基于 Apache 开源协议，支持
cesium 修改默认地球
qq_29384639的博客
01-13 1924
默认地球存储路径：Cesium\Assets\Textures\NaturalEarthII 下面有对应的图片，修改图片即可
加载默认地形_Cesium开发基础篇 | 02加载地形数据
weixin_35851654的博客
01-11 832
Cesium中的地形图层类前面我们主要学习了cesium内置接口如何操作影像数据，但是在一些应用场景中我们需要操作地形数据，例如模拟逼真的三维场景、与高程相关的一些空间分析和计算等。Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，但本身并不会参与其中的操作。基于此类，cesium为我...
cesium修改默认底图地址
10-22
要修改Cesium的默认底图地址，可以按照以下步骤进行操作： 1. 首先，打开Cesium的源代码文件夹，通常是“Cesium/Source”。 2. 在该文件夹中，找到“Widgets”文件夹，并打开它。 3. 在“Widgets”文件夹中，找到名为“Viewer”的文件，打开它。 4. 在打开的“Viewer”文件中，找到创建Cesium Viewer对象的代码行，通常是类似于“var viewer = new Cesium.Viewer(...)”的代码行。 5. 在创建Viewer对象的代码行后面，添加以下代码： ``` viewer.imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: '修改后的底图地址', credit: '提供商的名称或其他注释' }); ``` 在上述代码中，将`修改后的底图地址`替换为你想要设置的新的底图地址，将`提供商的名称或其他注释`替换为图像提供商的名称或其他注释。 6. 保存并关闭“Viewer”文件。 7. 重新编译Cesium源代码，确保修改生效。 完成上述步骤后，Cesium的默认底图地址将被修改为你所设置的新地址。重新运行你的Cesium应用程序时，它将加载你指定的新底图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值