10 Cesium—影像服务-3本地离线服务

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

影像服务 3

相关介绍请移步影像服务介绍，这里介绍学习使用 TileMapServiceImageryProvider 和 SingleTileImageryProvider 的使用。

TileMapServiceImageryProvider

有时候在无法连接外网的情况下，或者是局域网的场景，那就需要我们自己发布地图服务。地图服务发布最常用的是开源工具当属 GeoServer，但是我们这里就不讨论它了，这里我们只讨论 TileMapServiceImageryProvider 怎么用。TileMapServiceImageryProvider 可以通过自定义下载的瓦片数据，并加载到图层中。

这里借用了 Cesium 的示例用到的瓦片数据，进行展示。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

//url
//将源码中的Apps\Sandcastle\images中的cesium_maptiler拷贝到了我的测试项目中了
//放到我测试项目中的images文件夹中
//注意路径问题
var tmsProvider = new Cesium.TileMapServiceImageryProvider({
    url: "images/cesium_maptiler/Cesium_Logo_Color",
    fileExtension: "png"
});

viewer.imageryLayers.addImageryProvider(tmsProvider);

效果如下：

另外。

平时我们也可以自己准备瓦片数据，我这里通过地图下载器下载的高德影像的瓦片数据，除了有瓦片数据还得需要 tilemapresource.xml 文件进行数据支撑，一般情况下地图下载器都已经帮忙导出了对应的 xml 文件。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

//url
//这里将自已准备的瓦片数据放到的项目目录的gaode里了
//注意tilemapresource.xml文件应该和瓦片数据在一起
//我现在的示例环境也就是tilemapresource.xml文件应该在images/gaode/tiles目录下
var tmsProvider = new Cesium.TileMapServiceImageryProvider({
    url: "images/gaode/tiles",
    fileExtension: "png"
});

viewer.imageryLayers.addImageryProvider(tmsProvider);

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117.100353, 36.656301, 70000)
});

效果如下（好像暴露作者坐标）：

SingleTileImageryProvider

单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer");

//url导出了一张全世界的地图
var singleProvider = new Cesium.SingleTileImageryProvider({
    url: "images/myimage.png"
});

viewer.imageryLayers.addImageryProvider(singleProvider);

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：