cesium开发之如何在vue项目中使用cesium,使用离线地图资源
作者：下一次就是永远
这篇文章主要介绍了cesium开发之如何在vue项目中使用cesium,使用离线地图资源问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用cesium,使用离线地图资源
第一步：创建vue项目并下载最新版本的Cesium
注意最好下载最新的版本（当前是1.91），以确保可以流畅使用官方API。博主有过因为使用旧版本Cesium导致无法调用API的情况。
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结构
<div id="container"></div>
2.利用cesium构造函数初始化地球
别忘了在data中定义空对象viewer
this.viewer = new Cesium.Viewer("container", {
geocoder: false,
timeline: false,
fullscreenButton: false,
animation: false,
shouldAnimate: true,
});
第四步：使用离线地图资源替换网络地图资源
在构造函数中补充以下2个属性：
this.viewer = new Cesium.Viewer("container", {
imageryProvider: new Cesium.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时有效。
cesium添加百度地图
百度地图的瓦块切片规则与大多数地图不同，其中心点位于地理坐标的0,0点，多数地图的切片是以地图左上角为瓦块切片的起点。
Cesium中默认的切片地图（UrlTemplateImageryProvider）包括经纬度模式和投影（墨卡托）模式都是以左上角切片为基准。所以当我们加载百度地图瓦块地图时，需要自定义地图影像地图类。
BaiduImageryProvider = function(options) {
this._errorEvent = new Cesium.Event();
this._tileWidth = 256;
this._tileHeight = 256;
this._maximumLevel = 18;
this._minimumLevel = 1;
let southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
let northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
this._tilingScheme = new Cesium.WebMercatorTilingScheme({
rectangleSouthwestInMeters: southwestInMeters,
rectangleNortheastInMeters: northeastInMeters
});
this._rectangle = this._tilingScheme.rectangle;
this._resource = Cesium.Resource.createIfNeeded(options.url);
this._tileDiscardPolicy = undefined;
this._credit = undefined;
this._readyPromise = undefined;
};
Object.defineProperties(Cesium.gm.BaiduImageryProvider.prototype, {
url: {
get: function () {
return this._resource.url;
}
},
proxy: {
get: function () {
return this._resource.proxy;
}
},
tileWidth: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
}
return this._tileWidth;
}
},
tileHeight: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
}
return this._tileHeight;
}
},
maximumLevel: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
}
return this._maximumLevel;
}
},
minimumLevel: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
}
return this._minimumLevel;
}
},
tilingScheme: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
}
return this._tilingScheme;
}
},
tileDiscardPolicy: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
}
return this._tileDiscardPolicy;
}
},
rectangle: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
}
return this._rectangle;
}
},
errorEvent: {
get: function () {
return this._errorEvent;
}
},
ready: {
get: function () {
return this._resource;
}
},
readyPromise: {
get: function () {
return this._readyPromise;
}
},
credit: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
}
return this._credit;
}
},
});
BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
let xTileCount = this._tilingScheme.getNumberOfXTilesAtLevel(level);
let yTileCount = this._tilingScheme.getNumberOfYTilesAtLevel(level);
let url = this.url
.replace("{x}", x - xTileCount / 2)
.replace("{y}", yTileCount / 2 - y - 1)
.replace("{z}", level)
.replace("{s}", Math.floor(10 * Math.random()));
console.log("zxy:" + level + ", " + x + ", " + y + "; " + url);
return Cesium.ImageryProvider.loadImage(this, url);
};调用时，传入url参数即可，url服务可以使在线服务，也可以是代理服务（按百度地图切片索引规则）。例如：
let baiduImageryProvider = new BaiduImageryProvider({
url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1"
});
let viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: baiduImageryProvider,
...
}这时就可以在Cesium中正常加载百度地图了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。