快捷導(dǎo)航

cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源

更新時(shí)間：2023年04月29日 11:25:06 作者：下一次就是永遠(yuǎn)

這篇文章主要介紹了cesium開發(fā)之如何在vue項(xiàng)目中使用cesium,使用離線地圖資源問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue使用cesium,使用離線地圖資源

第一步：創(chuàng)建vue項(xiàng)目并下載最新版本的Cesium

注意最好下載最新的版本（當(dāng)前是1.91），以確?？梢粤鲿呈褂霉俜紸PI。博主有過因?yàn)槭褂门f版本Cesium導(dǎo)致無法調(diào)用API的情況。

npm cesium

第二步：在node_modules文件夾中補(bǔ)充離線資源

在項(xiàng)目根目錄的node_modules文件夾中，找到cesium文件夾，

根據(jù)以下2個(gè)路徑：node_modules\cesium\Build\Cesium\Assets\Textures和node_modules\cesium\Source\Assets\Textures找到用于存放離線地圖的文件夾。

在這個(gè)文件夾下，補(bǔ)充離線地圖數(shù)據(jù)（這個(gè)資源需要大家自己在網(wǎng)絡(luò)上找）。

離線地圖資源

第三步：使用cesium生成地球

1.在vue文件中創(chuàng)建html結(jié)構(gòu)

<div id="container"></div>

2.利用cesium構(gòu)造函數(shù)初始化地球

別忘了在data中定義空對(duì)象viewer

this.viewer = new Cesium.Viewer("container", {
      geocoder: false,
      timeline: false,
      fullscreenButton: false,
      animation: false,
      shouldAnimate: true,
    });

第四步：使用離線地圖資源替換網(wǎng)絡(luò)地圖資源

在構(gòu)造函數(shù)中補(bǔ)充以下2個(gè)屬性：

this.viewer = new Cesium.Viewer("container", {
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: Cesium.buildModuleUrl("Assets/Textures/MyEarthII"),
      }),
      baseLayerPicker: false
    });

最后附上cesium官網(wǎng)對(duì)imageryProvider用法的解釋：

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

用于提供地圖圖像。僅當(dāng)baseLayerPicker為false時(shí)有效。

cesium添加百度地圖

百度地圖的瓦塊切片規(guī)則與大多數(shù)地圖不同，其中心點(diǎn)位于地理坐標(biāo)的0,0點(diǎn)，多數(shù)地圖的切片是以地圖左上角為瓦塊切片的起點(diǎn)。

Cesium中默認(rèn)的切片地圖（UrlTemplateImageryProvider）包括經(jīng)緯度模式和投影（墨卡托）模式都是以左上角切片為基準(zhǔn)。所以當(dāng)我們加載百度地圖瓦塊地圖時(shí)，需要自定義地圖影像地圖類。

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);
};

調(diào)用時(shí)，傳入url參數(shù)即可，url服務(wù)可以使在線服務(wù)，也可以是代理服務(wù)（按百度地圖切片索引規(guī)則）。例如：

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,
? ? ...
}

這時(shí)就可以在Cesium中正常加載百度地圖了。