cesium开发之如何在vue项目中使用cesium使用离线地图资源

云计算

本文链接：https://beian.lu0.com/news/content/42002.html

　　第一步：创建vue项目并下载最新版本的Cesium

　　注意最好下载最新的版本（当前是1.91），以确保可以流畅使用官方API。博主有过因为使用旧版本Cesium导致无法调用API的情况。

1	`npm cesium`

　　第二步：在node_modules文件夹中补充离线资源

　　在项目根目录的node_modules文件夹中，找到cesium文件夹，

　　根据以下2个路径：node_modules\cesium\Build\Cesium\Assets\Textures和node_modules\cesium\Source\Assets\Textures找到用于存放离线地图的文件夹。

　　在这个文件夹下，补充离线地图数据（这个资源需要大家自己在网络上找）。

　　第三步：使用cesium生成地球

　　1.在vue文件中创建html结构

1	`<divid=container></div>`

　　2.利用cesium构造函数初始化地球

　　别忘了在data中定义空对象viewer

this.viewer = newCesium.Viewer(container, {

geocoder: false,

timeline: false,

fullscreenButton: false,

animation: false,

shouldAnimate: true,

});

　　第四步：使用离线地图资源替换网络地图资源

　　在构造函数中补充以下2个属性：

this.viewer = newCesium.Viewer(container, {

imageryProvider: newCesium.TileMapServiceImageryProvider({

url: Cesium.buildModuleUrl(Assets/Textures/MyEarthII),

}),

baseLayerPicker: false

});

　　最后附上cesium官网对imageryProvider用法的解释：

　　The imagery provider to use. This value is only valid if baseLayerPicker is set to false.
　　

　　用于提供地图图像。仅当baseLayerPicker为false时有效。

　　百度地图的瓦块切片规则与大多数地图不同，其中心点位于地理坐标的0,0点，多数地图的切片是以地图左上角为瓦块切片的起点。

　　Cesium中默认的切片地图（UrlTemplateImageryProvider）包括经纬度模式和投影（墨卡托）模式都是以左上角切片为基准。所以当我们加载百度地图瓦块地图。