Cesium切换底图及在服务中缓存地图至本地

最近做一个把cesium要显示的地图缓存到本地的功能,因为大师说好多地图网站对地图的访问是有次数限制的,我又有点写够了前端,主动请缨来写这块的服务(虽然他坚持要用nodejs不让我用java),没做过的功能以及没写过几次的nodejs,做之前在网上搜来搜去相关的内容找到的不多,特在这记录一下实现功能过程中的几个关键点,以便以后再看,以下均为个人理解(或有些胡编乱造),欢迎指正。
1.cesium切换地图
把对应的provider加到addImageryProvider()里面:

    let imagerylayers = this.cesiumActionService.getViewer().imageryLayers;
    switch (type) {
      case 'gaode'://高德地图
        this.provider = new Cesium.UrlTemplateImageryProvider({
          url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
        })
        break;
      case 'skyearth': //天地图
        this.provider = new Cesium.UrlTemplateImageryProvider({
        url: 'https://t2.tianditu.gov.cn/DataServer?T=ter_w&X={x}&Y={y}&L={z}&
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要基于天地图服务加载Cesium底图实现底图切换,你可以使用Cesium官方提供的`ImageryLayer`类来实现。 首先,你需要获取天地图影像图层服务地址,例如: ```javascript var tiandituUrl = 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&'; var tiandituToken = 'tk=your_token'; ``` 然后,你可以使用`ImageryLayer`类来加载天地图影像图层,并将其添加到Cesium的场景。代码如下: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); var tiandituLayer = new Cesium.ImageryLayer( new Cesium.WebMapTileServiceImageryProvider({ url: tiandituUrl + tiandituToken, layer: 'img', style: 'default', format: 'tiles', tileMatrixSetID: 'w', maximumLevel: 18, credit: new Cesium.Credit('天地图影像服务'), }) ); viewer.scene.imageryLayers.add(tiandituLayer); ``` 这样,你就可以在Cesium加载天地图影像图层了。如果你想切换底图,只需要移除当前的影像图层,然后添加新的影像图层即可。例如,以下代码实现了在点击按钮时切换底图: ```javascript var button = document.getElementById('switchButton'); var isTianditu = true; button.onclick = function() { if (isTianditu) { viewer.scene.imageryLayers.remove(tiandituLayer); var bingLayer = new Cesium.ImageryLayer( new Cesium.BingMapsImageryProvider({ url: 'https://dev.virtualearth.net', key: 'your_bing_maps_key', mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS, }) ); viewer.scene.imageryLayers.add(bingLayer); isTianditu = false; } else { viewer.scene.imageryLayers.remove(bingLayer); viewer.scene.imageryLayers.add(tiandituLayer); isTianditu = true; } }; ``` 这里的代码实现了在点击按钮时切换底图,如果当前是天地图,则切换到Bing Maps;如果当前是Bing Maps,则切换回天地图
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值