cesium 自定义底图样式

有些业务需求需要更改底图的样式，比如可视化大屏，cesium 针对图层提供了一些参数来改变底图样式。

1. 底图样式参数

当我们向cesium场景中添加底图时，会返回一个ImageryLayer 类，该类中一些参数可以用来修改底图样式。

参数名称	类型	默认值	描述信息
alpha	Number | function	1.0	透明度，取值范围：0.0-1.0。
brightness	Number | function	1.0	图层亮度值。值为1.0表示使用原图；值大于1.0时图像将变亮；值小于1.0时图像将变暗。
contrast	Number | function	1.0	图层对比度。值为1.0表示使用原图；值大于1.0表示增加对比度；值小于1.0表示降低对比度。
hue	Number | function	0.0	图层色调。值为0.0表示使用原图。
saturation	Number | function	1.0	图层饱和度。值为1.0表示使用原图；值大于1.0表示增加饱和度；值小于1.0表示降低饱和度。
gamma	Number | function	1.0	图层伽马校正。值为1.0表示使用原图。
nightAlpha	number | function	1.0	当 enableLighting 为 true 时 ，在地球的夜晚区域的透明度，取值范围：0.0-1.0。
dayAlpha	number | function	1.0	当 enableLighting 为 true 时，在地球的白天区域的透明度，取值范围：0.0-1.0。

2. 引入第三方UI库

lil-gui 是 three.js社区中非常流行的 UI 库，因为语法简单，上手快，获得广大开发者的喜爱。它的主要作用是获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率

2.1 安装

npm i lil-gui

2.2 引用

import GUI from 'lil-gui'; 
const gui = new GUI();

3 完整示例代码

MapWorks.js

import GUI from 'lil-gui'; 

// 初始视图定位在中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
//天地图key
const key = '39673271636382067f0b0937ab9a9677'
const gui = new GUI();
const params = {
  alpha: 1.0,
  nightAlpha: 1.0,
  dayAlpha: 1.0,
  brightness: 1.0,
  contrast: 0.5,
  hue: 0.5,
  saturation: 0.5,
  gamma: 0.5
}

let viewer = null;
let tileLayer = null

function initMap(container) {
  viewer = new Cesium.Viewer(container, {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false, 
    scene3DOnly: true,
    orderIndependentTranslucency: false,
    contextOptions: {
      webgl: {
        alpha: true
      }
    }
  })
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  viewer.scene.fxaa = true
  viewer.scene.postProcessStages.fxaa.enabled = true
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    viewer.resolutionScale = window.devicePixelRatio
  }
  // 移除默认影像
  removeAll()
  // 地形深度测试
  viewer.scene.globe.depthTestAgainstTerrain = true
  // 背景色
  viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0)
  // 太阳光照
  viewer.scene.globe.enableLighting = true;

  //gui面板
  initGui()
}

function initGui() {
  let layerFolder = gui.addFolder('底图参数')
  layerFolder.add(params, 'alpha', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.alpha = params.alpha
  })
  layerFolder.add(params, 'nightAlpha', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.nightAlpha = params.nightAlpha
  })
  layerFolder.add(params, 'dayAlpha', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.dayAlpha = params.dayAlpha
  })
  layerFolder.add(params, 'brightness', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.brightness = params.brightness
  })
  layerFolder.add(params, 'contrast', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.contrast = params.contrast
  })
  layerFolder.add(params, 'hue', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.hue = params.hue
  })
  layerFolder.add(params, 'saturation', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.saturation = params.saturation
  })
  layerFolder.add(params, 'gamma', 0, 1).step(0.01).onChange(function (value) {
    tileLayer.gamma = params.gamma
  })
}

function addTdtLayer(options) {
  let url = `https://t{s}.tianditu.gov.cn/DataServer?T=${options.type}&x={x}&y={y}&l={z}&tk=${key}`
  const layerProvider = new Cesium.UrlTemplateImageryProvider({
    url: url,
    subdomains: ['0','1','2','3','4','5','6','7'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
  });
  tileLayer = viewer.imageryLayers.addImageryProvider(layerProvider);
  tileLayer.alpha = params.alpha
  tileLayer.nightAlpha = params.nightAlpha
  tileLayer.dayAlpha = params.dayAlpha
  tileLayer.brightness = params.brightness
  tileLayer.contrast = params.contrast
  tileLayer.hue = params.hue
  tileLayer.saturation = params.saturation
  tileLayer.gamma = params.gamma
}


function removeAll() {
  viewer.imageryLayers.removeAll();
}

function destroy() {
  viewer.entities.removeAll();
  viewer.imageryLayers.removeAll();
  viewer.destroy();
}

function setView(coords,hpr) {
  viewer.scene.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], coords[2]),
    orientation: {
      heading: Cesium.Math.toRadians(hpr.heading),
      pitch: Cesium.Math.toRadians(hpr.pitch),
      roll: Cesium.Math.toRadians(hpr.roll),
    }
  });
}


export {
  initMap,
  addTdtLayer,
  setView,
  destroy
}

 ParamsLayer.vue

<!--
 * @Description: 
 * @Author: maizi
 * @Date: 2023-04-07 17:03:50
 * @LastEditTime: 2023-04-07 17:21:58
 * @LastEditors: maizi
-->

<template>
  <div id="container">
  </div>
</template>

<script>
import * as MapWorks from './js/MapWorks'
export default {
  name: 'ParamsLayer',
  mounted() {
    this.init();
  },
  methods:{
    init(){
      let container = document.getElementById("container");
      MapWorks.initMap(container)
      MapWorks.addTdtLayer({
        type: 'vec_w'
      })
    }
  },
  beforeDestroy(){
    //实例被销毁前调用，页面关闭、路由跳转、v-if和改变key值
    MapWorks.destroy();
  }
}
</script>

<style lang="scss" scoped>
#container{
  width: 100%;
  height: 100%;
  background: rgba(7, 12, 19, 1);
  overflow: hidden;
  background-size: 40px 40px, 40px 40px;
  background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 0);
}

</style>

4 运行结果