Cesium直接访问瓦片地图

概述

使用GeoServer对地图数据进行切片，执行过程就非常耗时；并且地图数据和切片都要占用存储空间，因此这种方式并不实用。推荐直接下载瓦片地图(切片后的地图文件)，然后部署到tomcat中。本文将介绍使用 Bigemap 直接下载切瓦片地图，并部署至tomcat中，然后使用Cesium进行访问。

确定坐标系

下载瓦片地图之前，首先要明确欲下载的瓦片地图使用的坐标系；一般情况下瓦片地图会使用如下两种坐标系：

1>. EPSG:4326 (WGS84)：是目前最流行的地理坐标系统。在国际上，每个坐标系统都会被分配一个 EPSG 代码，EPSG:4326 就是 WGS84 的代码。GPS是基于WGS84的，所以通常我们得到的坐标数据都是WGS84的。一般我们在存储数据时，仍然按WGS84存储。

2>. EPSG:3857 (Pseudo-Mercator)：(又名Pseudo-Mercator，球形墨卡托或Web墨卡托）投影坐标系，这是Google Maps，Microsoft Bing Maps和大多数ESRI ArcGIS Online使用的切片方案。

注意：使用BigMap下载的谷歌无偏移瓦片地图使用的是EPSG:4326坐标，有偏移地图使用的是EPSG:3857坐标系。若不知道欲下载的地图是哪种坐标系，可以拨打BigMap客服电话进行咨询。

无偏移：是指可以和实际测量的经纬度坐标完全重合，而不会发生偏差。

有偏移：是指地图经过加偏算法对地图的图像和经纬度进行重新排列，是一种强制混淆地图的做法，经过加偏后的地图不但经纬度错误，地图也是扭曲的，不可能通过纠偏改变，只能减少误差。

有偏移误差一般为几百米到几公里。有偏移（国内俗称：火星坐标），只有下载 无偏移 的数据才能在实际应用中发挥作用，包括定位、测绘、测量、设计、规划、套合CAD图纸等等。

使用BigMap下载瓦片地图

a. 瓦片地图有很多种，例如：谷歌瓦片、ArcGis、TMS等，推荐下载谷歌瓦片。

b. 地图资源有百度地图、高德地图、谷歌地图等；每一种瓦片地图使用坐标系都不尽相同；例如谷歌无偏移地图使用EPSG:4326切片方案，有偏移地图使用的是EPSG:3857切片方案。

c. 切片文件的格式也有多种，例如：.png(推荐)、.jpeg等；

d. 瓦片地图由许许多多小图片组成，因此只须将瓦片地图部署至Tcomat或Nginx等任意支持静态资源的服务器上，即可进行访问。

使用Cesium加载瓦片地图

Cesium目前仅支持EPSG:3857和EPSG:4326的两种投影坐标，且默认使用EPSG:3857加载瓦片地图；

使用Cesium加载谷歌有偏移地图

谷歌有偏移地图使用的坐标是EPSG:3857，Cesium默认使用的也是EPSG:3857坐标，因此无须配置即可完美匹配：

// 加载谷歌瓦片(EPSG:3857)
var googleLayer = new Cesium.UrlTemplateImageryProvider({
   url:"http://tomcat.sidoc.cn/陕西省_瓦片地图(Bigmap)/陕西省_卫图_瓦片_谷歌/瓦片_谷歌/{z}/{x}/{y}.jpg",
   tilingScheme: new Cesium.WebMercatorTilingScheme(),
   fileExtension: 'jpg',
   minimumLevel: 0,
   maximumLevel: 11,
});
viewer.imageryLayers.addImageryProvider(googleLayer);

使用Cesium加载谷歌无偏移地图

谷歌无偏移地图使用的坐标是EPSG:4326；因此在使用Cesium加载时要设置对应的坐标系：

// 加载谷歌瓦片(EPSG:4326)
var googleLayer = new Cesium.UrlTemplateImageryProvider({
   url:"http://tomcat.sidoc.cn/陕西省_瓦片地图(Bigmap)/陕西省_卫图_瓦片_谷歌/瓦片_谷歌/{z}/{x}/{y}.jpg",
   tilingScheme: new Cesium.WebMercatorTilingScheme(),
   fileExtension: 'jpg',
   tileMatrixSetID:"EPSG:4326",
   tilingScheme: new Cesium.GeographicTilingScheme(), // 调用EPSG4326坐标系时，切片方案必须为GeographicTilingScheme；
   minimumLevel: 0,
   maximumLevel: 11,
});
viewer.imageryLayers.addImageryProvider(googleLayer);