Cesium(十一) 底图瓦片颜色切换、自定义底图瓦片颜色 终极解决方案

在GIS可视化开发中，地图底图的视觉风格对用户体验至关重要。默认的卫星图或矢量图往往色调单一，难以融入不同的应用主题。如果能允许用户实时调整底图的色调，甚至像滤镜一样切换风格，将极大提升应用的个性化和交互性。

本文介绍一个基于Cesium的通用底图色调自定义方案，通过扩展ImageryProvider，在瓦片加载过程中实时修改像素颜色，实现对任意标准瓦片地图服务的颜色映射。该方案已在天地图、高德地图等多个数据源上验证，并且与Vue 3完美集成，提供了简洁直观的控制界面。

技术栈与适用场景

• Cesium：核心地图引擎，支持三维地球与瓦片服务。

• Vue 3：构建响应式交互界面，利用组合式API管理状态。

• 任意WMTS/TMS瓦片服务：只需提供URL模板，即可应用相同的色调映射逻辑。

适用场景包括：

• 需要根据主题切换地图色调的GIS应用

• 个性化地图定制工具

• 夜间模式、护眼模式等视觉增强

• 多源地图融合展示

设计思路：从“固定样式”到“实时滤镜”

常规的地图瓦片加载流程是：请求瓦片 -> 下载图片 -> 直接渲染。要实现动态调色，我们需要在渲染前拦截图像数据，对其像素进行修改。

Cesium的UrlTemplateImageryProvider提供了基于URL模板加载瓦片的能力。我们可以继承该类，重写requestImage方法，在原始瓦片加载完成后，根据当前颜色模式（普通或自定义）决定是否处理像素，最后返回修改后的图像。

这种设计具有以下优点：

• 非侵入性：不破坏Cesium原有的图层管理和渲染管线。

• 按需处理：仅在需要时（如切换颜色）对瓦片进行像素操作，避免不必要的计算。

• 可扩展性：支持任意地图源，只要提供正确的URL模板和投影参数。

核心实现：ColorizedImageryProvider

以下是自定义瓦片提供器的核心代码，实现了灰度转换+目标色染色的功能。

javascript

class ColorizedImageryProvider extends Cesium.UrlTemplateImageryProvider { constructor(options) { super(options); this.colorMode = options.colorMode || 'normal'; // 'normal' 或 'custom' this.customColorRGB = options.customColorRGB || { r: 58, g: 134, b: 255 }; } requestImage(x, y, level, request) { const promise = super.requestImage(x, y, level, request); if (!promise) return undefined; return promise .then(async (image) => { if (!image) return image; return await this.processImage(image); }) .catch((error) => { console.warn('瓦片加载失败，使用原图', error); return null; }); } async processImage(image) { if (this.colorMode === 'normal') return image; if (this.colorMode === 'custom') { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext('2d'); context.drawImage(image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const { r: tr, g: tg, b: tb } = this.customColorRGB; for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; // 计算灰度值 const gray = r * 0.299 + g * 0.587 + b * 0.114; // 应用目标色调，保留亮度层次 data[i] = Math.min(255, gray * (tr / 255) * 1.2); data[i + 1] = Math.min(255, gray * (tg / 255) * 1.2); data[i + 2] = Math.min(255, gray * (tb / 255) * 1.2); } context.putImageData(imageData, 0, 0); // 转换为ImageBitmap提升性能 return await createImageBitmap(canvas); } return image; } updateColorMode(mode, customRGB = null) { this.colorMode = mode; if (customRGB) this.customColorRGB = customRGB; } }

关键点解析

• 灰度转换公式：采用标准亮度公式0.299R + 0.587G + 0.114B，保证染色后图像明暗自然。

• 亮度增强系数：乘以1.2使颜色更加鲜艳，避免过暗。

• 性能优化：使用createImageBitmap将Canvas转为ImageBitmap，这是Cesium纹理上传的高效格式。

• 动态模式切换：通过updateColorMode方法，可以在运行时改变颜色模式，无需重新创建Provider。

图层管理与刷新

为了支持实时切换颜色，我们需要在颜色模式或目标色改变后，让地图重新加载瓦片并应用新的处理逻辑。一种简单有效的方法是移除旧图层，重新添加：

javascript

const refreshSatelliteLayer = () => { if (!currentViewer || !colorizedImageryProvider) return; const oldLayer = satelliteLayer; if (oldLayer) currentViewer.imageryLayers.remove(oldLayer); satelliteLayer = currentViewer.imageryLayers.addImageryProvider(colorizedImageryProvider); satelliteLayer.zIndex = 0; // 确保标注图层保持在顶层 if (labelLayer) currentViewer.imageryLayers.raiseToTop(labelLayer); };

对于带有独立标注的地图源（如天地图的cia_w），我们可以单独添加标注图层，并保持其zIndex高于底图，这样即使底图染色，文字和图标依然清晰。

通用性扩展：如何适配任意地图源

上述ColorizedImageryProvider完全基于URL模板，因此可以轻松应用于任何支持WMTS/TMS标准的地图服务。只需在初始化时传入不同的URL模板和相关参数即可。

以下是一些常见地图服务的配置示例：

使用方法示例：

javascript

const provider = new ColorizedImageryProvider({ url: 'https://webrd{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', subdomains: ['01', '02', '03', '04'], maximumLevel: 18, colorMode: 'normal' });

如果地图源使用了不同的投影（如WGS84经纬度直投），可以通过tilingScheme参数指定：

javascript

const provider = new ColorizedImageryProvider({ url: '...', tilingScheme: new Cesium.GeographicTilingScheme(), // ... });

与Vue 3的集成

在Vue组件中，利用响应式数据管理颜色模式和目标色，并通过updateMapStyle函数同步到底图提供器。

vue

<script setup> import { ref, onMounted, onUnmounted } from 'vue'; const mapStyleMode = ref('normal'); const customColorHex = ref('#3a86ff'); let colorizedImageryProvider = null; let satelliteLayer = null; let labelLayer = null; let currentViewer = null; const setMapStyle = (mode) => { mapStyleMode.value = mode; updateMapStyle(); }; const onCustomColorChange = () => { if (mapStyleMode.value !== 'custom') mapStyleMode.value = 'custom'; updateMapStyle(); }; const updateMapStyle = () => { if (!colorizedImageryProvider) return; if (mapStyleMode.value === 'normal') { colorizedImageryProvider.updateColorMode('normal'); } else if (mapStyleMode.value === 'custom') { const hex = customColorHex.value.slice(1); const customRGB = { r: parseInt(hex.substring(0,2),16), g: parseInt(hex.substring(2,4),16), b: parseInt(hex.substring(4,6),16) }; colorizedImageryProvider.updateColorMode('custom', customRGB); } refreshSatelliteLayer(); }; // 初始化地图、创建图层等逻辑... </script>

控制面板采用半透玻璃态设计，按钮与颜色选择器样式现代，交互流畅。

性能考量与优化

• 像素处理异步化：所有图像处理在requestImage的Promise链中完成，不阻塞主线程。

• 缓存复用：浏览器缓存会保留原始瓦片，但颜色模式切换后需要重新处理。由于我们只是修改像素，无需重新请求网络，因此性能损耗主要在于Canvas操作。对于高频切换，可以考虑增加节流或使用Web Worker。

• GPU加速方向：未来可以探索使用Cesium的着色器直接在GPU中完成颜色映射，实现零开销的实时调色。

总结

本文通过扩展Cesium的UrlTemplateImageryProvider，实现了一个通用的地图底图色调自定义方案。该方案具有以下特点：

• 多源兼容：支持任何标准瓦片地图服务，只需修改URL模板。

• 实时交互：用户可自由选择颜色，即时预览效果。

• 轻量高效：基于Canvas的像素处理，性能可满足一般应用需求。

• 易于集成：Vue 3组件封装良好，可快速嵌入现有项目。

通过这套方案，开发者可以轻松为地图应用增添个性化色彩，无论是制作夜间模式、品牌主题，还是提供丰富的视觉体验，都有了坚实的技术基础。

附注：使用天地图等商业服务时，请务必遵守其使用条款，并申请有效的访问密钥。

希望本文对您在Cesium开发中探索地图视觉定制有所帮助。欢迎留言交流！

完整代码：

<template> <div class="app-container"> <div class="top-left-controls"> <div class="map-style-group"> <button @click="setMapStyle('normal')" :class="['style-btn', mapStyleMode === 'normal' ? 'active' : '']"> <span>普通底图</span> </button> <div class="color-picker-wrapper"> <label class="color-label">底图色调:</label> <input type="color" v-model="customColorHex" class="color-input" @input="onCustomColorChange" /> </div> </div> </div> <div ref="cesiumContainer" class="cesium-container"></div> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue'; import { TD_MAP_KEY } from '../config.js'; const cesiumContainer = ref(null); const mapStyleMode = ref('normal'); const customColorHex = ref('#3a86ff'); let colorizedImageryProvider = null; let satelliteLayer = null; let labelLayer = null; let currentViewer = null; /** * 支持实时颜色映射的瓦片提供器 * 仅保留普通模式和自定义色调模式，暗黑模式已移除 */ class ColorizedImageryProvider extends Cesium.UrlTemplateImageryProvider { constructor(options) { super(options); this._tilingScheme = new Cesium.WebMercatorTilingScheme(); this.colorMode = options.colorMode || 'normal'; this.customColorRGB = options.customColorRGB || { r: 58, g: 134, b: 255 }; } get tilingScheme() { return this._tilingScheme; } requestImage(x, y, level, request) { const promise = super.requestImage(x, y, level, request); if (!promise) { return undefined; } return promise .then(async (image) => { if (!image) return image; return await this.processImage(image); }) .catch((error) => { console.warn('瓦片加载失败，使用原图', error); return null; }); } async processImage(image) { // 普通模式直接返回原图 if (this.colorMode === 'normal') { return image; } // 自定义色调模式：根据目标RGB对灰度进行染色 if (this.colorMode === 'custom') { const canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; const context = canvas.getContext('2d'); context.drawImage(image, 0, 0); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; const { r: tr, g: tg, b: tb } = this.customColorRGB; for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; // 计算灰度值 const gray = r * 0.299 + g * 0.587 + b * 0.114; // 应用目标色调，保留一定亮度层次 data[i] = Math.min(255, gray * (tr / 255) * 1.2); data[i + 1] = Math.min(255, gray * (tg / 255) * 1.2); data[i + 2] = Math.min(255, gray * (tb / 255) * 1.2); } context.putImageData(imageData, 0, 0); return await createImageBitmap(canvas); } return image; } updateColorMode(mode, customRGB = null) { this.colorMode = mode; if (customRGB) { this.customColorRGB = customRGB; } } } /** * 创建天地图标注图层（置于影像图层之上） */ const createLabelLayer = (viewer) => { const layer = viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: `https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${TD_MAP_KEY}`, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], credit: '天地图', maximumLevel: 18, minimumLevel: 0, maximumScreenSpaceError: 0, disableDepthTestAgainstTerrain: true })); layer.zIndex = 1; return layer; }; /** * 刷新影像图层（由于修改色调后需要重新生成瓦片，通过移除再添加的方式强制刷新） */ const refreshSatelliteLayer = () => { if (!currentViewer || !colorizedImageryProvider) return; const oldLayer = satelliteLayer; if (oldLayer) { currentViewer.imageryLayers.remove(oldLayer); } satelliteLayer = currentViewer.imageryLayers.addImageryProvider(colorizedImageryProvider); satelliteLayer.zIndex = 0; // 确保标注图层在影像之上 if (labelLayer) { currentViewer.imageryLayers.raiseToTop(labelLayer); } }; /** * 初始化地图图层 */ const initMapLayers = (viewer) => { currentViewer = viewer; colorizedImageryProvider = new ColorizedImageryProvider({ url: `https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${TD_MAP_KEY}`, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], colorMode: 'normal', customColorRGB: { r: 58, g: 134, b: 255 }, credit: '天地图(色调可调)', maximumLevel: 18, minimumLevel: 0 }); satelliteLayer = viewer.imageryLayers.addImageryProvider(colorizedImageryProvider); satelliteLayer.zIndex = 0; labelLayer = createLabelLayer(viewer); }; /** * 根据当前模式更新地图样式（普通或自定义） */ const updateMapStyle = () => { if (!colorizedImageryProvider) return; if (mapStyleMode.value === 'normal') { colorizedImageryProvider.updateColorMode('normal'); } else if (mapStyleMode.value === 'custom') { const hex = customColorHex.value.slice(1); const customRGB = { r: parseInt(hex.substring(0, 2), 16), g: parseInt(hex.substring(2, 4), 16), b: parseInt(hex.substring(4, 6), 16) }; colorizedImageryProvider.updateColorMode('custom', customRGB); } refreshSatelliteLayer(); }; /** * 颜色选择器变化事件：自动切换到自定义模式并应用所选颜色 */ const onCustomColorChange = () => { // 如果当前是普通模式，自动切换到自定义模式 if (mapStyleMode.value !== 'custom') { mapStyleMode.value = 'custom'; } updateMapStyle(); }; /** * 设置地图样式（普通或自定义） */ const setMapStyle = (mode) => { mapStyleMode.value = mode; updateMapStyle(); }; /** * 将相机定位到中国区域（默认视角） */ const flyToChina = (viewer) => { if (!viewer) return; // 定位中国主体区域 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(102.655488, 33.138425, 20060657), orientation: { heading: Cesium.Math.toRadians(359.86), pitch: Cesium.Math.toRadians(-87.01), roll: Cesium.Math.toRadians(359.94) }, duration: 5 }); }; /** * 初始化Cesium视图 */ const initCesium = () => { try { if (!cesiumContainer.value) { console.error('Cesium容器DOM元素不存在'); return; } // 销毁已有实例 if (window.cesiumViewer) { window.cesiumViewer.destroy(); window.cesiumViewer = null; } const newViewer = new Cesium.Viewer(cesiumContainer.value, { timeline: false, animation: false, homeButton: false, sceneModePicker: false, navigationHelpButton: false, baseLayerPicker: false, infoBox: false, selectionIndicator: false, navigationInstructionsInitiallyVisible: false, fullscreenButton: false, geocoder: false, imageryProvider: false, shouldAnimate: true, }); window.cesiumViewer = newViewer; // 初始化自定义图层 initMapLayers(newViewer); // 默认定位到中国 flyToChina(newViewer); } catch (error) { console.error('Cesium 初始化失败：', error); } }; const destroyCesium = () => { if (window.cesiumViewer) { window.cesiumViewer.destroy(); window.cesiumViewer = null; } }; onMounted(() => { if (cesiumContainer.value) { initCesium(); } }); onUnmounted(() => { destroyCesium(); }); </script> <style scoped> .app-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; font-family: 'Segoe UI', 'Poppins', 'Roboto', sans-serif; } .cesium-container { width: 100vw; height: 100vh; overflow: hidden; } .top-left-controls { position: absolute; z-index: 1000; left: 20px; top: 20px; } .map-style-group { display: flex; gap: 12px; align-items: center; background: rgba(15, 25, 45, 0.4); backdrop-filter: blur(8px); padding: 8px 20px; border-radius: 60px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); width: fit-content; } .style-btn { padding: 6px 20px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); background: transparent; border: none; border-radius: 40px; cursor: pointer; transition: all 0.25s ease; font-family: inherit; backdrop-filter: blur(2px); } .style-btn:hover { background: rgba(64, 128, 255, 0.25); color: white; transform: translateY(-1px); } .style-btn.active { background: rgba(64, 128, 255, 0.5); color: white; box-shadow: 0 0 8px rgba(64, 128, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); } .color-picker-wrapper { display: flex; align-items: center; gap: 8px; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.25); } .color-label { font-size: 12px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; } .color-input { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; background: transparent; padding: 0; outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } .color-input::-webkit-color-swatch-wrapper { padding: 0; } .color-input::-webkit-color-swatch { border: none; border-radius: 50%; } .color-input:hover { transform: scale(1.05); } </style>