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

学习衔接：

cesium入门学习一-CSDN博客

cesium入门学习二-CSDN博客

cesium入门学习三_cesium 点击事件-CSDN博客

cesium入门学习四-CSDN博客

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);

4.运行中出现的问题

        由于cesium版本的问题，我是默认使用的bing地图，所以我必须禁用bing地图，才能显示离线的地图。

        由于我多次打开nginx，不知道后台开了很多个nginx，导致了单独访问瓦片数据可以显示出jpg的图片，但是球一直显示不出来，整体就显示为一个蓝色的球，也没有报错。

       注意：可以在任务管理器查看，以免多开nginx导致图像渲染不出来。

       我的cesium版本是1.123.1是从github直接下载然后自行编译的，所以离线显示地图显示的代码会有些不一样。