cesium图层设置
引言：前面两篇文章介绍了cesium初始化及地形加载，这篇文章主要介绍cesium的图层管理，具体内容包括图层切换与实时调整图层显示效果。至于cesium图层是什么样的，可以去查cesium瓦片图。作者这里就不介绍了，有时间出一篇关于地形和瓦片图私有化部署的文章。
cesium图层切换
实现思路：cesium在初始化完成后，返回的是viewer实例，viewer实例有一个imageryLayers属性，具体API是Cesium.ImageryLayerCollection()，以数组的形式包含了当前加载所有地图信息，所以通过此属性直接拿到是一个地图资源的集合。通过向这个集合中添加地图实例，再实现单独控制每个地图的显隐。具体实现如下：
// layerChange.vue
<script setup>
import * as cesium from "cesium";
import { onMounted } from 'vue';
import { useCesium } from "@/hooks/useCesium";
let viewer = null
// 街道卫星图
const map1 = new cesium.UrlTemplateImageryProvider({
url: '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
})
// 高德矢量图
const map2 = new cesium.UrlTemplateImageryProvider({
url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
})
// 单张图片
const map3 = new cesium.SingleTileImageryProvider({
url: '/public/image/layers/world_b.jpg',
tileWidth: 256,
tileHeight: 256
})
// 图层切换，通过单个layer的show来切换图层
const changeLayer = (value) => {
viewer.imageryLayers._layers.forEach((layer, index) => {
index === value ? layer.show = true : layer.show = false
})
}
onMounted(() => {
const earth = document.querySelector("#earth");
viewer = useCesium(earth);
viewer.imageryLayers.addImageryProvider(map1)
viewer.imageryLayers.addImageryProvider(map2)
viewer.imageryLayers.addImageryProvider(map3)
console.log(viewer.imageryLayers);
viewer.imageryLayers._layers.forEach((layer, index) => {
index === 0 ? layer.show = true : layer.show = false
})
})
</script>
<template>
<div class="content">
<div class="earth" id="earth"></div>
<div class="ribbon">
<div class="flex js-left mb10">
<el-button type="primary" size="small" @click="changeLayer(0)">卫星图层</el-button>
<el-button type="primary" size="small" @click="changeLayer(1)">街道卫星图层</el-button>
<el-button type="primary" size="small" @click="changeLayer(2)">街道图层</el-button>
<el-button type="primary" size="small" @click="changeLayer(3)">底图设置</el-button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
position: relative;
.earth {
width: 100%;
height: 100%;
}
.ribbon {
width: 200px;
position: absolute;
left: 10px;
top: 10px;
z-index: 99;
}
}
</style>
API使用：
1. Cesium.UrlTemplateImageryProvider： 通过使用指定的 URL 模板请求图块来提供影像。具体解释为：是 Cesium 中用于加载自定义瓦片地图服务的核心类。它通过 URL 模板机制实现对各种标准（如 TMS、WMTS 等）或非标准瓦片服务的支持。返回一个影像提供者实例。官方API
// 简单用法
new Cesium.UrlTemplateImageryProvider({
url: 'http://example.com/{z}/{x}/{y}.jpg'
});
2.cesium.SingleTileImageryProvider()： 提供单个顶级影像图块。假定该单张图像采用地理投影（即 WGS84 / EPSG:4326），并且将使用地理分块方案进行渲染。具体解释为：是 Cesium 中用于加载单张静态图片作为全局影像图层的类。与瓦片地图服务不同，它通过单张图片覆盖整个指定区域，适用于小范围或不需要动态切片的场景。官方API
// 简单用法
const map3 = new cesium.SingleTileImageryProvider({
url: '图片途径',
tileWidth: 256, // 图块的宽度，以像素为单位。
tileHeight: 256, // 图块的高度，以像素为单位。
})
3.addImageryProvider()： 使用给定的影像提供者创建一个新图层，并将其添加到图层集合中。具体解释为： 是 Cesium 中用于向地球添加影像图层的核心方法，属于ImageryLayerCollection类。返回ImageryLayer对象，用于控制该图层的显示属性。
// 简单用法
const layer = viewer.imageryLayers.addImageryProvider(map1)
layer.alpha = 0.5; // 透明度（0-1）
layer.brightness = 1.2; // 亮度调整
layer.show = false; // 显隐控制
cesium图层调整
实现思路：图层调整是针对某一特定图层来调整图层的亮度、对比度、饱和度、色调和伽马值。主要应用于遥感影像的色彩校正，地理数据可视化等。ImageryLayer是cesium中影像图层的核心类，其实例主要用来调整图层的显示，比如上方说的亮度、透明度、裁剪等效果。那么通过监听数据变化来实时更新ImageryLayer实例中属性的值，从而实现对某一图层的显示效果进行调整。具体实现如下：
// layerAdjust.vue
<script setup>
import { onMounted, ref } from 'vue';
import { useCesium } from "@/hooks/useCesium";
let viewer = null
let imageryLayers = null
const sliders = ref([
{ name: 'brightness', value: 1, title: '图层亮度' },
{ name: 'contrast', value: 1, title: '图层反差' },
{ name: 'saturation', value: 1, title: '图层饱和度' },
{ name: 'hue', value: 0, title: '图层伽马' },
{ name: 'gamma', value: 1, title: '图层色调' },
])
// 设置影像图层参数的订阅逻辑
const updateLayerParameter = (item) => {
if (imageryLayers.length > 0) {
const layer = imageryLayers.get(0);
layer[item.name] = item.value;
}
};
const reset = () => {
sliders.value.forEach((item, index) => {
index === 3 ? item.value = 0 : item.value = 1
updateLayerParameter(item)
})
}
onMounted(() => {
const earth = document.querySelector("#earth");
viewer = useCesium(earth);
imageryLayers = viewer.imageryLayers
})
</script>
<template>
<div class="content">
<div class="earth" id="earth"></div>
<div class="ribbon">
<div class="flex js-left mb10">
<el-button type="primary" size="small" @click="reset">色调重置</el-button>
</div>
<div class="slider-demo-block">
<div class="flex ai-center js-between mr20" v-for="(item, index) in sliders" :key="index">
<span class="demonstration">
{{ item.title }}：
</span>
<el-slider class="f1" @input="updateLayerParameter(item)" :max="3" :step="0.01" v-model="item.value"
size="small" />
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
position: relative;
.earth {
width: 100%;
height: 100%;
}
.ribbon {
width: 200px;
position: absolute;
left: 10px;
top: 10px;
z-index: 99;
}
}
.slider-demo-block {
width: 100%;
display: flex;
justify-content: left;
align-items: center;
flex-wrap: wrap;
}
.slider-demo-block .el-slider {
margin-top: 0;
margin-left: 10px;
}
.el-slider {
width: 180px;
}
.demonstration {
font-size: 12px;
color: #daf9ff;
text-overflow: ellipsis;
text-align: left;
white-space: nowrap;
width: 70px;
}
</style>
效果图：
1. 图层切换
2. 图层调整
总结
至此，cesium的初始化、地形的加载、地图的切换调整功能都已完成。这篇文章主要实现了对地图资源的切换，其实还有其他的功能，比如图层的叠加、反选遮罩等功能亟待实现，后续再更新。下一篇聊聊地图和地形资源的私有化部署，敬请期待！（觉得对你有帮助的话请点赞+收藏，有问题下方留言。）
