vue中使用Cesium加載shp文件、wms服務(wù)、WMTS服務(wù)問題
如何在vue中使用Cesium加載shp文件或者說是wms服務(wù)
背景:企業(yè)項目在管理界面可以上傳shp數(shù)據(jù)文件集合,需要在用戶界面可視化展示
注意: Cesium是不能直接加載shp數(shù)文件的
所以需要后端將上傳的shp數(shù)據(jù)轉(zhuǎn)成WMS服務(wù),這樣Cesium就可以加載WMS服務(wù)來可視化shp數(shù)據(jù)了
注意后端接口必須返回以下關(guān)于WMS服務(wù)的參數(shù)
- 工作空間 share:xxxx,用于Cesium加載wms服務(wù)的圖層
- srs : 用于Cesium加載wms服務(wù)的srs屬性
- wms服務(wù)地址 : 類似 http://localhost:8080/geoServer/wms
- 四個坐標(biāo)xmin,ymin和xmax,ymax : 用于定位WMS地圖的位置
Vue初始化Cesium
前提: Vue使用Cesium處理npm,還需要在Webpack文件配置,詳情可看上期文章
// 初始化
<template>
? ?// 地圖容器?
? <div class="img-box" id="cesiumContainer"></div>
</template>
<script>
export default {
? props: ["fileUrl","srs","workspace","zb"],
? data() {
? ? return {
? ? ? viewer: {},
? ? ? Cesium: {},
? ? ? highlightColor: null,
? ? ? normalColor: null,
? ? ? wmsLayer : null // wms 地圖服務(wù)圖層
? ? };
? },
? methods: {
? ? // init : 初始化Cesium
? ? init() {
? ? ? const Cesium = this.cesium;
? ? ? this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
? ? ? this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
? ? ? this.viewer = new Cesium.Viewer("cesiumContainer", {
? ? ? ? //先行禁止infoBox彈出
? ? ? ? selectionIndicator: false,
? ? ? ? infoBox: false,
? ? ? ? //baseLayerPicker : false,
? ? ? ? geocoder: false,
? ? ? ? homeButton: false,
? ? ? ? sceneModePicker: false,
? ? ? ? fullscreenButton: false,
? ? ? ? navigationHelpButton: false,
? ? ? ? animation: false,
? ? ? ? timeline: false,
? ? ? ? fulllscreenButtond: false,
? ? ? ? vrButton: false,
?? ??? ?// getImageryProviderArr和getTerrainProviderViewModelsArr ?可根據(jù)項目需求進(jìn)行實現(xiàn)
? ? ? ? //獲取或設(shè)置可用于圖像選擇的ProviderViewModel實例數(shù)組。
? ? ? ? imageryProviderViewModels: this.getImageryProviderArr(),
? ? ? ? // //獲取或設(shè)置可用于地形選擇的ProviderViewModel實例數(shù)組。
? ? ? ? terrainProviderViewModels: this.getTerrainProviderViewModelsArr(),
? ? ? });
? ? ? this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隱藏版權(quán)
? ? },
? ? getImageryProviderArr() {
? ? ? const Cesium = this.cesium;
? ? ? return [
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱。
? ? ? ? ? name: "影像底圖",
? ? ? ? ? //顯示項目被隱藏的工具提示
? ? ? ? ? tooltip: "影像底圖",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/yxdt.png"),
? ? ? ? ? //一個函數(shù)或命令,用于創(chuàng)建一個或多個提供程序,這些提供程序?qū)⒃谶x擇此項目時添加到地球儀中。
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.ArcGisMapServerImageryProvider({
? ? ? ? ? ? ? url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱
? ? ? ? ? name: "電子地圖",
? ? ? ? ? //顯示項目被隱藏的工具提示
? ? ? ? ? tooltip: "電子地圖",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/sldt.png"),
? ? ? ? ? //一個函數(shù)或命令,用于創(chuàng)建一個或多個提供程序,這些提供程序?qū)⒃谶x擇此項目時添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.ArcGisMapServerImageryProvider({
? ? ? ? ? ? ? url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ];
? ? },
? ? getTerrainProviderViewModelsArr() {
? ? ? const Cesium = this.cesium;
? ? ? return [
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱
? ? ? ? ? name: "無地形",
? ? ? ? ? //顯示項目被隱藏的工具提示
? ? ? ? ? tooltip: "WGS84標(biāo)準(zhǔn)球體",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/WGS84.png"),
? ? ? ? ? //一個函數(shù)或命令,用于創(chuàng)建一個或多個提供程序,這些提供程序?qū)⒃谶x擇此項目時添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.EllipsoidTerrainProvider({
? ? ? ? ? ? ? ellipsoid: Cesium.Ellipsoid.WGS84,
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ? new Cesium.ProviderViewModel({
? ? ? ? ? //圖層的名稱
? ? ? ? ? name: "地形",
? ? ? ? ? //顯示項目被隱藏的工具提示
? ? ? ? ? tooltip: "STK在線地形",
? ? ? ? ? //代表圖層的圖標(biāo)
? ? ? ? ? iconUrl: require("@/assets/img/STK在線地形.png"),
? ? ? ? ? //一個函數(shù)或命令,用于創(chuàng)建一個或多個提供程序,這些提供程序?qū)⒃谶x擇此項目時添加到地球儀中
? ? ? ? ? creationFunction: function () {
? ? ? ? ? ? return new Cesium.CesiumTerrainProvider({
? ? ? ? ? ? ? url: Cesium.IonResource.fromAssetId(1),
? ? ? ? ? ? ? requestWaterMask: !0,
? ? ? ? ? ? ? requestVertexNormals: !0,
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? }),
? ? ? ];
? ? },
? },
};
</script>加載WMS服務(wù)
// 加載geoserver wms服務(wù)
addWMS(fileUrl) {
? ? // 刪除之前的wms 圖層?
? ? // 這塊移除圖層 需要指出圖層變量名
? ?this.viewer.imageryLayers.remove(this.wmsLayer);
? ?this.wmsLayer = null;
? const Cesium = this.cesium;
? if(this.zb.xmin) {
? ? var provider = new Cesium.WebMapServiceImageryProvider({
? ? ? ? url : fileUrl, // wms服務(wù)地址
? ? ? ? // layers 必須參數(shù),不寫會報錯;
? ? ? ? // layers寫的不對會報如下錯誤: An error occered in "WebMapServiceImageryProvider":
? ? ? ? // Failed to obtain image tile X : 425y ? ?(有的博客說這是跨域????)
?? ??? ?// 后端API接口返回
? ? ? ? layers: this.workspace, ?
? ? ? ? // 必須參數(shù)rectangle : 用來定位加載的WMS位置 ?后端API接口返回
? ? ? ? rectangle: Cesium.Rectangle.fromDegrees(
? ? ? ? ? +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax), ? // 必須有
? ? ? ? parameters: {
? ? ? ? ? ? service : 'WMS',
? ? ? ? ? ? format: 'image/png',
? ? ? ? ? ? transparent: true,
? ? ? ? ? ? // 后端API接口返回的
? ? ? ? ? ? srs: this.srs,
? ? ? ? } ?
? ? });
? ? // 加載WMS服務(wù)到viewer
? ? this.wmsLayer = this.viewer.imageryLayers.addImageryProvider(provider);
? ? // 飛入動畫
? ? this.viewer.flyTo(this.wmsLayer, {
? ? ? ? duration: 2
? ? });
? } else {
? ? this.$message.warning('該地圖服務(wù)沒有坐標(biāo)可以定位')
? }加載WMTS服務(wù)
對與url 屬性: 很多博客都說要進(jìn)行 如下拼接:
后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
其實不用拼接 只需要后端返回的/wtms路徑即可
// 加載geoserver wmts服務(wù)
addWMTS(fileUrl) {
? ? ? const Cesium = this.cesium;
? ? ? let provider = new Cesium.WebMapTileServiceImageryProvider({
? ? ? ? // ?對與url ?很多博客都說要進(jìn)行 如下拼接
? ? ? ? // 后端返回的wmts/rest/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png
?? ??? ?// 其實不用拼接 ?只需要后端返回的/wtms路徑即可
? ? ? ? url: fileUrl, //服務(wù)地址 服務(wù)地址只需要后端返回的 /WMTS ? 不需要給后面拼接任何東西, ?
? ? ? ? layer: this.workspace, //圖層名稱 : "pucheng:satellite"
? ? ? ? style: '',
? ? ? ? format: 'image/png',
? ? ? ? tileMatrixSetID: this.srs, ?// "EPSG:900913"
? ? ? ? // 地圖飛入 ?定位的坐標(biāo) ?后端返回的數(shù)據(jù)
? ? ? ? rectangle: Cesium.Rectangle.fromDegrees(
? ? ? ? ? ? +this.zb.xmin, +this.zb.ymin, +this.zb.xmax, +this.zb.ymax),
? ? ? ? // 必須加 ?不然地圖出不來
?? ??? ?//之所以要在這里提出這個tileMatrixLabels參數(shù),是因為GeoServer在緩沖切分瓦片時對每一個縮放級別的存儲目錄沒有使用相應(yīng)的數(shù)字,而使用了網(wǎng)格+級別的方式來命名,如“EPSG:9100913:10”表示的是使用“EPSG:9100913”網(wǎng)格切分的第10級瓦片。
? ? ? ? tileMatrixLabels : [`${this.srs}:0`,`${this.srs}:1`, `${this.srs}:2`,`${this.srs}:3`,`${this.srs}:4`,`${this.srs}:5`,`${this.srs}:6`,
? ? ? ? `${this.srs}:7`,`${this.srs}:8`,`${this.srs}:9`,`${this.srs}:10`,`${this.srs}:11`,`${this.srs}:12`,`${this.srs}:13`,`${this.srs}:14`,
? ? ? ? `${this.srs}:15`,`${this.srs}:16`,`${this.srs}:17`,`${this.srs}:18`,
? ? ? ? ],
? ? ? ? // 必須加 ?不然地圖出不來
? ? ? ? tilingScheme: new Cesium.GeographicTilingScheme({//此處很重要,很重要。。。
? ? ? ? ? numberOfLevelZeroTilesX: 2,
? ? ? ? ? numberOfLevelZeroTilesY: 1
? ? ? ? }),
? ? ? ? // tilematrixset: this.srs,
? ? ? ? // maximumLevel: 18,
? ? ? });
? ? ? let layer = this.viewer.imageryLayers.addImageryProvider(provider);
? ? ? //控制圖層顯示
? ? ? this.viewer.flyTo(layer, {
? ? ? ? ? duration: 2
? ? ? ? });
? ? },cesium加載shp格式的白模建筑
ceisum加載shp格式的建筑。有兩種思路,目前推薦第二種。
方法一
將shp格式轉(zhuǎn)換為geojson格式,然后采用cesium提供的接口加載到ceisum中。
嚴(yán)重缺陷:在面對大場景問題,即數(shù)據(jù)量較大時,非常容易卡死、崩潰
方法二
將shp轉(zhuǎn)換為3dtiles,然后加載到ceiusm中。
3dtiles是ceisum解決大場景問題專門提供的一種數(shù)據(jù)格式。
關(guān)鍵:轉(zhuǎn)換工具,我使用的是cesiumLab,比較好用,工具中需要加載dem,目測是用來與地形貼合的。
推薦方法:方法二。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 組件(component)教程之實現(xiàn)精美的日歷方法示例
組件是我們學(xué)習(xí)vue必須會的一部分,下面這篇文章主要給大家介紹了關(guān)于Vue 組件(component)教程之實現(xiàn)精美的日歷的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01

