cesium入门学习五(2025年版本)-------------cesium加载离线地图-CSDN博客

本文链接：https://blog.csdn.net/Jinyizhi2233/article/details/144984190

学习衔接：

cesium入门学习一-CSDN博客https://blog.csdn.net/Jinyizhi2233/article/details/144713925

cesium入门学习二-CSDN博客https://blog.csdn.net/Jinyizhi2233/article/details/144723617

cesium入门学习三_cesium 点击事件-CSDN博客https://blog.csdn.net/Jinyizhi2233/article/details/144743308

cesium入门学习四-CSDN博客https://blog.csdn.net/Jinyizhi2233/article/details/144761268

1、资源

离线地图TMS格式，层级6层

地图来源：一般在bigemap上面下载，提供学习衔接

Cesium离线部署影像+地形：从0到1_cesium 离线地图-CSDN博客

2.如何加载地图

首先是路径问题：

我在nginx的路径是我index.html的路径

文件路径：

地图路径：

下一级目录：

如何看地图文件有没有配置成功，路径有没有问题：

访问端口下对应的文件：

我的端口是8881

我访问的网址是：

http://127.0.0.1:8881/map/arcgis_blue_tms/1/1/0.jpg

得到的图片显示：

显示图片就代表配置成功。

3.效果及代码

显示效果：

js代码：

//第18个程序：加载离线地图
// 初始化 Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: false, // 禁用默认的 Bing Maps 图层
  baseLayerPicker: false // 禁用图层选择器
});
// 配置 TMS 影像提供器
const tmsImageryProvider = new Cesium.UrlTemplateImageryProvider({
  url: 'http://127.0.0.1:8881/map/arcgis_blue_tms/{z}/{x}/{reverseY}.jpg', // TMS 瓦片路径模板
  tilingScheme: new Cesium.WebMercatorTilingScheme(), // TMS 通常使用 Web Mercator 投影
  minimumLevel: 1, // 数据的最小级别
  maximumLevel: 6, // 数据的最大级别
  credit: 'Local TMS Map' // 数据来源描述，可选
});
// // 将 TMS 图层添加到 Viewer
 viewer.imageryLayers.addImageryProvider(tmsImageryProvider);