cesium离线地图

1、本地图片

本地单张图片作为底图加载，只需要在对应的图片放到项目图片目录下，然后在对应的地图引入即可。

1）全球范围地图设置代码实现：

//加载图片方法
const addSingleImage = () => {
  const singleImageLayer = new Cesium.SingleTileImageryProvider({
    url: "../assets/tietu/world.jpg", //图片存放目录
    //若需要在指定范围内显示图片，设置rectangle范围即可，如下：
    //rectangle: Cesium.Rectangle.fromDegrees(105.584537, 16.194565,113.483778,22.4229610)
  })
  viewer.imageryLayers.addImageryProvider(singleImageLayer);
};
//初始化viewer后调用该方法添加图片
addSingleImage();
//如果需要作为初始底图，在进行viewer初始化时，将imageryProvider内容设置singleImageLayer即可

2、离线瓦片数据

离线瓦片数据在加载时需要先将对应文件夹放置到服务器上，本项目中是将文件夹放在tomcat下的webapps文件夹下。

1）代码实现：

const addLocalTiles = () => {
  const blue5L = new Cesium.UrlTemplateImageryProvider({
      //8080为tomcat端口号，y坐标是否需要翻转根据具体数据确定
      url: "http://localhost:8080/BlueMarble_5L/{z}/{x}/{reverseY}.jpg",
      tilingScheme: new Cesium.GeographicTilingScheme(),
      minimumLevel: 0,
      maximumLevel: 5,
  });
  viewer.imageryLayers.addImageryProvider(blue5L);
}
//初始化viewer后调用该方法添加图片
addLocalTiles();
//如果需要作为初始底图，在进行viewer初始化时，将imageryProvider内容设置blue5L即可

项目地址：github.com/DLFouge/vue…

欢迎指正与star