cesium控制imageryLayers的显示

在做项目的时候遇到一个二三维切换的问题，需要切换地图的imageryLayers，初始化后viewer后改变viewer，控制imageryLayers的显示即可，根据imageryLayers的index来控制显示，按照imageryLayers写的顺序，第一个imageryLayers的index为0，依次类推，我写了四个imageryLayers，前二个为三维显示，后二个为二维显示，viewer.imageryLayers.get(0).show = true

data () {
    return {
      token: 'xxx'
    }
  },

三维imageryLayers

const imgLayer = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=${this.token}`,
        format: 'tiles',
        layer: 'img',
        style: 'default',
        tileMatrixSetID: 'w'
      })
      const ciaLayer = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${this.token}`,
        format: 'tiles',
        layer: 'cia',
        style: 'default',
        tileMatrixSetID: 'w'
      })
      viewer.imageryLayers.addImageryProvider(imgLayer)
      viewer.imageryLayers.addImageryProvider(ciaLayer)

   

二维imageryLayers

const vecLayer = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/vec_w/wmts?tk=${this.token}`,
        format: 'tiles',
        layer: 'vec',
        style: 'default',
        tileMatrixSetID: 'w'
      })
      const cvaLayer = new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/cva_w/wmts?tk=${this.token}`,
        format: 'tiles',
        layer: 'cva',
        style: 'default',
        tileMatrixSetID: 'w'
      })
      viewer.imageryLayers.addImageryProvider(vecLayer)
      viewer.imageryLayers.addImageryProvider(cvaLayer)

  

控制imageryLayers显示

watch: {//监听 根据点击是三维还是二维
    dimension(newVal, oldVal) {
      this.change(newVal)
    }
  },
change(newVal) {
      if (newVal === '三维') {
        viewer.scene.mode = Cesium.SceneMode.SCENE3D // 三维地球
        viewer.imageryLayers.get(0).show = true
        viewer.imageryLayers.get(1).show = true
        viewer.imageryLayers.get(2).show = false
        viewer.imageryLayers.get(3).show = false
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(this.longitude, this.latitude, 5000),
          orientation: {
            heading: 4.8249240760982985,
            pitch: -1.0817541592196616,
            roll: 6.277516434744362
          }
        })
      } else {
        viewer.scene.mode = Cesium.SceneMode.SCENE2D // 二维平面
        viewer.imageryLayers.get(0).show = false
        viewer.imageryLayers.get(1).show = false
        viewer.imageryLayers.get(2).show = true
        viewer.imageryLayers.get(3).show = true
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(106.696302, 26.520131, 5000),
          orientation: {
            heading: 4.8249240760982985,
            pitch: -1.0817541592196616,
            roll: 6.277516434744362
          }
        })
      }
    },

cesium的get方法

在cesium API—搜索viewer—找到imageryLayers

 点到ImageryLayerCollection，可以看到get方法获取图层信息

 点到imageryLayers可以看到他的show属性，通过控制图层的show来实现二三维的切换问题，如果是三维 0 ， 1的show为true，2 ， 3的show为false，如果是二维2 ， 3的show为true，0 ， 1的show为false