cesium 实战系列之全局图层管控

发布时间：2026/8/12 18:21:26

cesium 实战系列之全局图层管控
众所周知图层控制可以说是地图开发中的一个比较头疼的问题但凡是做过地图开发的人员都会遇到类似的问题当图层类型很丰富时图层数量很多一个叠加一个图层加载顺序做着做着就越来越乱这个时候一个有效的图层控制方法就很关键废话不多说直接开干。在前文已经提到初始化加载三维地图的操作这里就不过多赘述了如有需要可翻看之前的文章。1、创建一个layerControl.js的文件是图层控制的关键然后在index.html中引入即可内容如下Cesium.layerControl function (imageryLayers) { this.layers [] this.baseLayers [] this.middleLayers [] this.topLayers [] this.imageryLayers imageryLayers } Cesium.layerControl.prototype.getLayerByName function (name) { //传入图层名返回图层 let layer this.layers.find((item) { return item.name name }) return layer } Cesium.layerControl.prototype.addBaseLayer function (name, imageryProvider, alpha 1, index) { //添加底图图层 图层名、图层源、透明度、层级 if (!this.getLayerByName(name)) { let defaultLength 0 if (index index this.baseLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, index) layer.name name layer.belong baseLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.baseLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, this.baseLayers.length) layer.name name layer.belong baseLayers layer.alpha alpha this.layers.splice(defaultLength this.baseLayers.length, 0, layer) this.baseLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.addMiddleLayer function (name, imageryProvider, alpha 1, index) { //添加中层图层 if (!this.getLayerByName(name)) { let defaultLength this.baseLayers.length if (index index this.middleLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength index)) layer.name name layer.belong middleLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.middleLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength this.middleLayers.length)) layer.name name layer.belong middleLayers layer.alpha alpha this.layers.splice(defaultLength this.middleLayers.length, 0, layer) this.middleLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.addTopLayer function (name, imageryProvider, alpha 1, index) { //添加顶层图层 if (!this.getLayerByName(name)) { let defaultLength this.baseLayers.length this.middleLayers.length if (index index this.topLayers.length) { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength index)) layer.name name layer.belong topLayers layer.alpha alpha this.layers.splice(defaultLength index, 0, layer) this.topLayers.splice(index, 0, layer) return layer } else { let layer this.imageryLayers.addImageryProvider(imageryProvider, (defaultLength this.topLayers.length)) layer.name name layer.belong topLayers layer.alpha alpha this.layers.push(layer) this.topLayers.push(layer) return layer } } else { console.log(name exists) } } Cesium.layerControl.prototype.raise function (name) { //上移图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong let index this[belong].indexOf(layer) if (index this[belong].length - 1) { this.imageryLayers.raise(layer) exchangeArrIndex(this.layers, index, index 1) exchangeArrIndex(this[belong], index, index 1) } else { console.log(name can not raise anymore.) } } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.lower function (name) { //下移图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong let index this[belong].indexOf(layer) if (index 0) { this.imageryLayers.lower(layer) exchangeArrIndex(this.layers, index, index - 1) exchangeArrIndex(this[belong], index, index - 1) } else { console.log(name can not lower anymore.) } } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.deleteLayer function (name) { //删除图层 let layer this.getLayerByName(name) if (layer) { let belong layer.belong this.imageryLayers.remove(layer) this.layers.remove(layer) this[belong].remove(layer) } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.exchangeLayer function (name, imageryProvider, alpha 1) { //更换图层源 let oldLayer this.getLayerByName(name) if (oldLayer) { let belong oldLayer.belong let layers_index this.layers.indexOf(oldLayer) let belong_index this[belong].indexOf(oldLayer) let splitDirection oldLayer.splitDirection this.imageryLayers.remove(oldLayer) let newLayer this.imageryLayers.addImageryProvider(imageryProvider, layers_index) newLayer.name name newLayer.belong belong newLayer.alpha alpha newLayer.splitDirection splitDirection this.layers.splice(layers_index, 1, newLayer) this[belong].splice(belong_index, 1, newLayer) } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.changeLayerName function (oldName, newName) { //更换图层名 let layer this.getLayerByName(oldName) if (layer) { layer.name newName } else { console.log(oldName is not founded.) } } Cesium.layerControl.prototype.removeAllBaseLayers function () { if (this.baseLayers.length 0) { for (let i this.baseLayers.length - 1; i 0; i--) { this.deleteLayer(this.baseLayers[i].name) } } } Cesium.layerControl.prototype.removeAllMiddleLayers function () { if (this.middleLayers.length 0) { for (let i this.middleLayers.length - 1; i 0; i--) { this.deleteLayer(this.middleLayers[i].name) } } } Cesium.layerControl.prototype.removeAllTopLayers function () { if (this.topLayers.length 0) { for (let i this.topLayers.length - 1; i 0; i--) { this.deleteLayer(this.topLayers[i].name) } } } Cesium.layerControl.prototype.show function (name) { let layer this.getLayerByName(name) if (layer) { layer.show true; } else { console.log(name is not founded.) } } Cesium.layerControl.prototype.hide function (name) { let layer this.getLayerByName(name) if (layer) { layer.show false; } else { console.log(name is not founded.) } }2、在cesium初始化的时候调用layerControl//初始化图层控制器 layerControl new Cesium.layerControl(viewer.imageryLayers)3、在页面中利用layerControl加载图层以前文初始化cesium时加载的天地图为例//添加天地图底图 var tianditu_token 申请的天地图token var TDT_IMG_C http://{s}.tianditu.gov.cn/img_c/wmts?servicewmtsrequestGetTileversion1.0.0 LAYERimgtileMatrixSetcTileMatrix{TileMatrix}TileRow{TileRow}TileCol{TileCol} styledefaultformattilestk tianditu_token layerControl.addBaseLayer(baseLayer, new Cesium.WebMapTileServiceImageryProvider({ url: TDT_IMG_C, layer: tdtImg_c, style: default, format: tiles, tileMatrixSetID: c, subdomains: [t0, t1, t2, t3, t4, t5, t6, t7], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ], maximumLevel: 50, show: false }))4、到这里有些veteran已经知道该怎么做了但是对于novice而言还是有些发懵啥啥啥咋就完事了那么接下来我举几个案例让思路更清晰一些。1比如你要加载底图如天地图或其他高清影像一般底图都是天地图你就调用layerControl.addBaseLayer(baseLayer,正常的cesium图层,1)备注这里的baseLayer是自定义图层名称你也可以改成其他的2然后你要在底图上叠加另一个图层如什么坡度、坡向、幅度、叶绿素等等这种图层一般都是在中层展示的就可以调用layerControl.addMiddleLayer(dataLayer,业务图层,1)3添加顶部图层如边界图层bourder你就可以调用layerControl.addTopLayer(bourderLayer,正常的cesium图层,1)那么有小伙伴可能就会问了正常的图层什么是正常的图层既然你诚心诚意的发问了我就大发慈悲的告诉你。。。有点跑题了不好意思。那什么是正常的图层呢就是tile图层或wms图层上述的天地图就是tile类型的cesium tile图层加载方式new Cesium.WebMapTileServiceImageryProvider({ url:process.env.VUE_APP_BASE_URL /mapsj/tile? z{TileMatrix}x{TileCol}y{TileRow} layer 图层名称 styles图层样式 cql_filter筛选条件 })cesium wms图层加载方式new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxxx, //样式 }, }),4你说我想切换图层该怎么调用呢切换图层你就调用layerControl.exchangeLayer比如你想切换业务图层一般都是切换这个图层底图很少动那么就可以这样写layerControl.exchangeLayer(dataLayer, new Cesium.WebMapTileServiceImageryProvider({ url: url, }), 1 );一般在加载新图层之前都要查一下这个图层有没有加载如果有加载则替换掉该图层如果没有加载就新增这个图层那么就可以这样写if (layerControl.getLayerByName(tracksLayer)) { layerControl.exchangeLayer( tracksLayer, new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxx, //样式 }, }), 1 ); } else { layerControl.addTopLayer( tracksLayer, new Cesium.WebMapServiceImageryProvider({ url: process.env.VUE_APP_BASE_URL /map/wms, layers: xxxx, //图层名称 parameters: { format: image/png, transparent: true, srs: EPSG:4326, tiled: true, styles: xxxxxx, //样式 }, }), 1, ); }5方法中同样提供了删除api删除单一图层deleteLayer、删除全部底图图层removeAllBaseLayers、删除全部中间图层removeAllMiddleLayers、删除全部顶部图层removeAllTopLayers效果如图

相关新闻

XShell批量发送命令：多服务器运维效率提升实战指南

XShell批量发送命令：多服务器运维效率提升实战指南

1. 为什么你需要批量发送命令？如果你是一名运维工程师、系统管理员，或者需要同时管理多台服务器、网络设备的开发者，那么下面这个场景你一定不陌生：公司有几十台甚至上百台线上服务器，突然需要紧急更新一个系统配置&am…

2026/8/12 18:20:26 阅读更多 →
深度图与视差图伪彩色可视化：原理、实现与工程实践

深度图与视差图伪彩色可视化：原理、实现与工程实践

1. 项目概述：从灰度到色彩的视觉跃迁 在计算机视觉和三维感知领域，深度图和视差图是我们理解场景几何结构最直接的“地图”。但当你面对一张只有灰度变化的图像时，是不是经常感到头疼？密密麻麻的灰度值，哪个点离得近&a…

2026/8/12 18:20:26 阅读更多 →
如何在线解压 ZIP、RAR 等格式文件？无需下载软件直接在线使用

如何在线解压 ZIP、RAR 等格式文件？无需下载软件直接在线使用

一、前言：为什么需要在线解压？ 在日常工作和学习中，我们经常会收到或下载到 ZIP 格式的压缩文件。有时，我们可能身处没有安装解压软件（如 WinRAR、7-Zip）的设备上，或者不想在公共电脑上安装软件…

2026/8/12 18:20:26 阅读更多 →

最新新闻

2026一站式建站平台哪里好？真的有零基础建站平台吗？

2026一站式建站平台哪里好？真的有零基础建站平台吗？

2026一站式建站平台哪里好？真的有零基础建站平台吗？很多人会问：完全不懂代码、没有设计基础，真的能自己建网站吗？答案是肯定的。中国信通院2026年发布的《中国低代码平台发展白皮书》指出，国内低代码技术渗…

2026/8/12 19:45:15 阅读更多 →
【非标自动化】2、认识元器件（电机保护器）

【非标自动化】2、认识元器件（电机保护器）

电机保护器电机保护器不是某一种固定结构的元件，而是一类用于监测电机运行状态，并在电机出现过载、缺相、堵转、短路或其他异常时切断控制回路、发出报警的保护装置。在非标自动化设备中，常见的“电机保护器”主要包括两类：电动机…

2026/8/12 19:45:15 阅读更多 →
2026模板小程序开发服务商哪家更新快？运维有保障才是真的好！

2026模板小程序开发服务商哪家更新快？运维有保障才是真的好！

2026模板小程序开发服务商哪家更新快？运维有保障才是真的好！ 小程序早已不是新鲜事物。据行业数据显示，截至2025年底，全国依托小程序开展线上经营的中小企业数量已达2870万家，同比增长34.2%，小程序电商GMV…

2026/8/12 19:45:15 阅读更多 →
【非标自动化】2、认识元器件（固态继电器）

【非标自动化】2、认识元器件（固态继电器）

固态继电器固态继电器，英文为 Solid State Relay，简称 SSR，是一种没有机械触点、通过半导体器件实现电路通断的电子开关。可以先用一句话理解：PLC给固态继电器一个小电流控制信号，固态继电器再接通或断开较大电压、较大…

2026/8/12 19:45:14 阅读更多 →
浏览器音乐解锁完整指南：3分钟解锁加密音乐文件

浏览器音乐解锁完整指南：3分钟解锁加密音乐文件

浏览器音乐解锁完整指南：3分钟解锁加密音乐文件 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库： 1. https://github.com/unlock-music/unlock-music ；2. https://git.unlock-music.dev/um/web 项目地址: https://git…

2026/8/12 19:45:14 阅读更多 →
LangGraph智能体开发实战：Python与TypeScript/Node.js选型指南

LangGraph智能体开发实战：Python与TypeScript/Node.js选型指南

1. 从单体工具到智能体：为什么现在是Agent的时代？ 如果你最近在技术社区里泡着，大概率会频繁听到“Agent”这个词。它不再是科幻电影里那个无所不能的虚拟助手，而是正在成为我们构建下一代应用时，手里最趁手的一把新锤…

2026/8/12 19:44:14 阅读更多 →

日新闻

Ubuntu 22.04安装与使用tree命令：高效管理Linux目录结构

Ubuntu 22.04安装与使用tree命令：高效管理Linux目录结构

1. 为什么需要一个“目录树”工具？在Linux世界里，尤其是Ubuntu这样的发行版，命令行是很多人的主战场。我们每天都要和文件、目录打交道。ls命令是查看目录内容的首选，它简洁、高效，能列出文件名、权限、大小等关键信息…

2026/8/12 9:33:34 阅读更多 →
博思AI智能体：意图识别、思考链与性能优化的工程实践

博思AI智能体：意图识别、思考链与性能优化的工程实践

在AI应用从“能用”走向“好用”的进程中，系统的响应速度、决策透明度与高并发稳定性是决定用户体验的关键。博思AI智能体近期完成了一次重要的专项优化，聚焦于意图识别、思考链展示与全链路压测三大核心领域，将系统从功能实现推向了工程卓越…

2026/8/12 9:33:34 阅读更多 →
子代理架构：AI智能体任务分解与协同执行的核心原理与实践

子代理架构：AI智能体任务分解与协同执行的核心原理与实践

1. 项目概述：为什么我们需要“子代理”？最近在折腾各种AI应用和自动化流程时，我越来越频繁地遇到一个瓶颈：单个AI智能体（Agent）的能力边界。无论是处理复杂的多步骤任务，还是需要同时调用多个专…

2026/8/12 9:33:34 阅读更多 →

周新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/12 1:11:09 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/12 1:11:09 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/12 1:11:08 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/11 17:09:45 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/12 1:11:10 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/11 17:09:45 阅读更多 →