Cesium小记之加载暗黑色地图&&蓝色透明模型

一效果图“
二、demo

import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import MeasureTool from '../src/js/MeasureTools'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '',
  mounted () {
    var viewer = new Cesium.Viewer('cesiumContainer', {

      baseLayerPicker: false // 是否显示图层选择器
    })
    var layer = new Cesium.MapboxImageryProvider({
      mapId: 'mapbox.dark',
      accessToken: 'mapbox的token'
    })
    viewer.scene.globe.enableLighting = false
    viewer.imageryLayers.addImageryProvider(layer)
    // 加载三维模型灰模
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: 'http://localhost:9002/api/folder/edc012f6fdc94baca5b2a838f8b558fd/tileset.json'
    }))
    viewer.scene.primitives.add(tileset)
    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
    tileset.readyPromise.then(function (tileset) {
      viewer.scene.primitives.add(tileset)
      viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0))
    }).otherwise(function (error) {
      console.log(error)
    })
    tileset.style = new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
          ['${floor} >= 8', 'rgba(0, 149, 251, 0.3)'],
          ['${floor} >= 7', 'rgb(0, 149, 251, 0.3)'],
          ['${floor} >= 6', 'rgb(0, 149, 251, 0.3)'],
          ['${floor} >= 5', 'rgb(0, 149, 251, 0.3)'],
          ['${floor} >= 4', 'rgb(0, 149, 251, 0.3)'],
          ['${floor} >= 3', 'rgb(0, 149, 251, 0.3)'],
          ['${floor} >= 2', 'rgb(0, 149, 251, 0.3)'],
          ['true', 'rgb(0, 149, 251, 0.3)']]
      }
    })

    // 测量距离
    MeasureTool.measureLineSpace(viewer, null)
    console.log(viewer)
    console.log(__dirname)
  }
})

参考：https://www.cnblogs.com/naaoveGIS/p/10918411.html