Cesium基础-加载地图服务

原创 已于 2022-08-31 16:23:06 修改 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#数据库 #java #前端

于 2022-08-29 17:57:13 首次发布

最近工作中遇到一个问题：本地发布了wgs-1984坐标系的TMS局部地图服务（在上层叠加），和一份google标准的TMS全球底图服务（在下层）。使用UrlTemplateImageryProvider加载两幅地图时，发现不能叠在一起。现象就是：google的地图可以加载，局部高清地图无法加载。

终于在大佬的指导下，找到了原因：google标准的瓦片组织方式与普通TMS服务瓦片的组织方式相反。普通TMS瓦片，原点在左下角，即沿Y轴自下向上切；而google标准瓦片，原点在左上角，即沿Y轴自上而下切。

TMS标准瓦片

 google标准瓦片

因此二者叠加时，需要将一种一副地图的Y轴进行翻转。

翻阅了Cesium帮助文档，UrlTemplateImageryProvider的接口说明中，明确写了，可以更改链接中的y为reverseY进行翻转。

至此，你以为问题就解决了吗？

No，更诡异的问题来了：仍然没有效果。

于是，进一步查资料，

最低0.47元/天 解锁文章
GIS开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts、TMS和XYZ介绍
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-10 1万+
OpenLayer、Leaflet、Maplibre-gl和Cesiumjs（3d）OpenLayer 对各种地图服务支持较好，比如各种vms,vmts等，动态效果较差。Leaflet 对vue支持较好，与前端交互方便，对地图服务支持不好Maplibre-gl:继承自Mapbox-2d的开源分支，Mapbox商业化后Maplibre-gl项目从Mapbox-2d的开源分支开始继续维护更新，号称地图服务中动态效果最好的库，插件较多，个人感觉像是地图引擎里的游戏引擎，各种动态效果极好。
cesium 加载TMS格式瓦片
qq_42181155的博客
09-15 1927
tms瓦片平铺
Cesium 源码解析 地球加载过程（一）
tianyapai的专栏
10-25 2733
Cesium
cesium126，221116，加载本地地图 TMS：先用 cesiumLab制作地图。分析 Cesium World Terrain 这一基本地图的结构。水系地图也可如此加载，没有区别
最新发布
zhangzhangkeji的博客
10-05 133
（42）（43）
《Cesium 进阶知识点》 - 离线瓦片数据(生成和开发)
前端技术
09-26 1432
一、生成数据 这里使用“太乐地图下载器 V4.3” 1、选择“打开地图下载工具”。 2、以高德街道地图为例。选择“主菜单” - “高德地图” - “高德街道地图”。 3、做上角选择“快速下载” - “选择行政区划” - “按行政区划下载地图”。 4、打开“新建下载任务”对话框。选择要下载的级数。注意“存储目录”，最好不要选在C盘。其它都为默认设置。 5、在“主菜单” - “我的下载”中查看下载情况。选中菜单栏中的“导出”功能。 6、打开“导出”对话框。存储格式选“瓦片：..
vue3初始化cesium，加载自定义TMS瓦片地图
m0_73259340的博客
05-15 999
自定义TMS瓦片"tms地址", {});geoServerurl: 'geoserver服务地址', // geoserver服务地址layers: '工作区名：图层名', // 工作区名：图层名},});
cesium加载osm和tms
AllBluefm的专栏
03-25 1063
【代码】cesium加载osm和tms。
【cesium-1】cesium地形、地图加载
WXG1011的博客
12-06 3672
cesium基础篇
Cesium加载地图-高德影像
zslsh44的专栏
01-26 1152
vue3 vite cesium加载高德地图
使用原生JS在Cesium中加载天地图矢量、影像底图
blucod的博客
06-17 1733
摘要：本文介绍了如何在Cesium中加载天地图矢量底图和影像底图的方法。首先需要申请天地图密钥，创建浏览器端应用获取Key。然后通过WebMapTileServiceImageryProvider接口实现地图加载，提供完整的HTML代码示例（需替换自己的天地图Key）。代码支持切换矢量/影像两种底图类型，并设置了默认视角和基础三维地球界面。文中还展示了两种底图的显示效果截图及放大效果对比。
three-cesium-examples 200多个案例源代码
11-12
这些案例代码不仅包括了创建3D物体、动态加载场景、应用物理效果等基础内容，还可能涉及到了如何使用Cesium的地形、影像层、3D Tiles，以及如何实现时间动态数据的展示等高级特性。每个案例都可能带有详细的注释和...
cesium-加载geoserver发布的tms服务
孙霸天的专栏
03-11 2547
cesium-加载geoserver发布的tms服务 效果 核心代码 let smart = new Cesium.UrlTemplateImageryProvider({ url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png", rectangle : Cesium.Recta
cesium加载wms wmts tms服务和加载xyz切片
qq_42074266的博客
08-19 2675
tip:如果tms不是标准的服务的话,可以在y的前面加个负号试试,因为加载xyz切片有些区别主要是cesium只能加载xyz服务 而xyz和tms服务的区别在于一个起点在左上角 一个在左下角,所以他们的转换就是在y坐标加负号(个人理解)
Cesium加载TMS切片
u011365716的博客
10-12 8023
今天刚好有时间看了这个问题，关于Cesium加载TMS切片。要想实现这个功能，首先要明确使用 ImageryProvider ArcGisMapServerImageryProvider BingMapsImageryProvider OpenStreetMapImageryProvider TileMapServiceImageryProvider GoogleEarthEnterpriseImageryProvider GoogleEarthEn
cesium 加载TMS影像（已经切片）
weixin_33724059的博客
06-20 6569
TMS影像数据格式 加载影像的代码： var layers = viewer.scene.imageryLayers; var blackMarble = layers.addImageryProvider( new Cesium.createTileMapServiceImageryProvider({ url : url ...
cesium加载wms、wmts、tms、wfs服务
03-13 4959
引入cesium，参考：https://blog.youkuaiyun.com/qq_40323256/article/details/108475669 cesium加载wms服务 该示例中geoserver发布的地图服务地址如下：http://localhost:8090/geoserver/keshan/wms?service=WMS&version=1.1.0&request=GetMap&layers=keshan%3Asichuan&bbox=97.350096...
Cesium加载地图服务
baidu_34785556的博客
08-30 3897
Cesium引擎webgis开发
geotrellis使用（三十五）Cesium加载geotrellis TMS瓦片
weixin_30648963的博客
11-27 582
前言 做任何事情都不是想象中的那么简单。好久没有更新技术博客了，跟最近瞎忙有很大关系，虽说是瞎忙也抽空研究了些技术。 主要是前端渲染，像原生的WebGL和Cesium。WebGL写了几篇博客，自我感觉还可以。Cesium是一个封装好的WEB端3D Earth框架，有了WebGL的基础之后切换到Cesium按理说一切应该是顺理成章，简单的测试了几个功能之后发现确实非常好，简单的几行代码就可以实现Go...
cesium加载cesiumLab切片TMS格式以及WMTS格式，并解决栅格黑色背景问题
挣钱花388的博客
12-05 1794
cesium加载cesiumLab切片TMS格式以及WMTS格式，亲测有效，不同于geoserver服务器的数据，那么多参数要填写，切片又慢的要死， cesiumLab切片简单，时间又快，而且该工具对于影像支持是全免费的，其他工具多多少少限制了部分功能，该篇文章从数据发布到cesium代码加载以及效果截图一一列举！！并解决栅格黑色背景如何处理的细节！准备好dom正射数据，我得是投影的坐标系影像，看下图可见范围，就知道什么坐标系一目了然将该tif格式的数据右键导出，并在NoData处设置为0（默认256），如
Cesium如何加载百度地图服务？
08-08
在 Cesium 中加载百度地图服务，主要通过集成百度地图的图层数据并进行坐标系适配来实现。百度地图使用的是 BD09 坐标系，该坐标系是在 GCJ-02（火星坐标系）基础上的二次加密版本，而 Cesium 默认使用 WGS84 坐标系，因此在集成过程中需要考虑坐标偏差问题[^2]。 ### 实现步骤 1. **引入必要的库** 需要引入 Cesium 库以及用于 BD09 与 WGS84 坐标转换的第三方纠偏库，例如 `coordtransform`。纠偏库用于处理百度地图坐标与 Cesium 使用的标准地理坐标之间的转换。 2. **设置 Cesium Viewer** 初始化 Cesium 的 Viewer，并设置合适的场景模式，如 `SceneMode.SCENE3D` 或 `SceneMode.MORPHING`，以便支持 3D 地球或 2D/3D 过渡效果。 3. **创建自定义影像图层（WebMapServiceImageryProvider）** 通过 `WebMapServiceImageryProvider` 创建自定义图层，将百度地图的服务地址作为图层数据源。例如，百度地图的 WMS 服务地址通常以 `http://online06.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20220301` 格式提供，其中 `{x}`、`{y}`、`{z}` 分别代表瓦片的行列及缩放级别[^3]。 4. **应用坐标转换逻辑** 在加载图层时，需要对坐标进行转换。通过第三方库将 BD09 坐标转换为 WGS84 坐标，确保地图位置准确显示。例如，使用 `coordtransform.bd09towgs84` 方法进行坐标转换。 5. **添加图层到 Cesium Viewer** 使用 `viewer.imageryLayers.addImageryProvider()` 方法将自定义图层添加至 Cesium 场景中，即可在 3D 地球上看到百度地图的数据。 ### 示例代码 ```javascript // 引入 Cesium 和坐标转换库 import * as Cesium from 'cesium/Cesium'; import { bd09towgs84 } from 'coordtransform'; // 初始化 Viewer const viewer = new Cesium.Viewer('cesiumContainer'); // 百度地图瓦片服务地址 const getBaiduTileUrl = (imageryProvider, x, y, level) => { const url = `http://online06.map.bdimg.com/tile/?qt=tile&x=${x}&y=${y}&z=${level}&styles=pl&scaler=1&udt=20220301`; return url; }; // 创建自定义图层 const baiduImageryProvider = new Cesium.WebMapServiceImageryProvider({ getTileUrl: getBaiduTileUrl, }); // 添加图层 viewer.imageryLayers.addImageryProvider(baiduImageryProvider); // 示例：将 BD09 坐标转换为 WGS84 const [lng, lat] = bd09towgs84(116.404, 39.915); viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(lng - 0.1, lat - 0.05, lng + 0.1, lat + 0.05) }); ``` ### 注意事项 - **纠偏处理**：是否进行坐标纠偏取决于具体业务需求。若地图展示精度要求较高，则建议使用纠偏库进行坐标转换[^2]。 - **性能优化**：加载百度地图时，注意控制图层的加载范围和缩放级别，避免因瓦片加载过多影响性能。 - **图层管理**：Cesium 提供了图层管理接口，如 `raiseToTop`、`lowerToBottom` 等，可用于调整图层的显示顺序[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值