最開始使用webpack進(jìn)行cesium 集成, 出現(xiàn)了問題一大堆，最后只好選擇傳統(tǒng)的方法直接引入了，具體操作如下

一、安裝cesium

首選創(chuàng)建一個(gè)測(cè)試項(xiàng)目 vue create vue-join-cesium

然后直接cd 到項(xiàng)目目錄 ，使用npm 直接拉取cesium

$ npm install cesium --save

安裝成功后會(huì)在 node_modules 下 看見一個(gè)cesium的目錄

二、項(xiàng)目引用

1、切換到 node_modules/cesium/Build/ 目錄

2、將Cesium拷貝到項(xiàng)目中的 public 目錄下

3、在index.html引入 js 與css

4、修改HelloWorld.vue

export default {

data () {

return {

viewer :'',

tileset: '',

}

},

mounted (){

//103.37324413479338, 29.544684360197113

var initialLon = 103.37324413479338;

var lat = 29.544684360197113;

var height = 10.0;

// // 創(chuàng)建viewer實(shí)例

this.viewer = new Cesium.Viewer('cesiumContainer', {

// 需要進(jìn)行可視化的數(shù)據(jù)源的集合

animation: false, // 是否顯示動(dòng)畫控件

shouldAnimate: true,

homeButton: false, // 是否顯示Home按鈕

fullscreenButton: false, // 是否顯示全屏按鈕

baseLayerPicker: true, // 是否顯示圖層選擇控件

geocoder: false, // 是否顯示地名查找控件

timeline: false, // 是否顯示時(shí)間線控件

sceneModePicker: true, // 是否顯示投影方式控件

navigationHelpButton: false, // 是否顯示幫助信息控件

infoBox: false, // 是否顯示點(diǎn)擊要素之后顯示的信息

requestRenderMode: true, // 啟用請(qǐng)求渲染模式

scene3DOnly: false, // 每個(gè)幾何實(shí)例將只能以3D渲染以節(jié)省GPU內(nèi)存

sceneMode: 3, // 初始場(chǎng)景模式 1 2D模式 2 2D循環(huán)模式 3 3D模式 Cesium.SceneMode

fullscreenElement: document.body, // 全屏?xí)r渲染的HTML元素 暫時(shí)沒發(fā)現(xiàn)用處

})

// 去除版權(quán)信息

this.viewer._cesiumWidget._creditContainer.style.display = 'none'

// 將經(jīng)緯度轉(zhuǎn)換為世界坐標(biāo)

var target = Cesium.Cartesian3.fromDegrees(initialLon, lat, height);

var offset = new Cesium.Cartesian3(-70.06, -68.64, 6.0908)

this.viewer .scene.camera.lookAt(target, offset);

}

}

.test-cesium{

width: 100%;

height: 100%;

}

5、修改 package.json

如果使用了eslint 會(huì)提示 Cesium 未定義，需要修改 package.json，設(shè)置no-undef

6、現(xiàn)在運(yùn)行看看效果

三、使用Geoserve 發(fā)布地圖服務(wù)

上面雖然加載cesium成功了，但是我們最終是為了加載一個(gè)本地的切片，所以還需要借助Geoserve

然后點(diǎn)擊 geoserver-2.3.2.exe 進(jìn)行安裝

安裝成功后，在如下目錄啟動(dòng)Geoserver

然后瀏覽器 輸入http://localhost:28080/geoserver/web ，輸入安裝時(shí)的用戶名和密碼登錄

有關(guān)shpe 文件的發(fā)布請(qǐng)參考 https://blog.csdn.net/sharetm/article/details/54931096 ，這里主要講一下發(fā)布 arcgis 切片

將上面 云盤 下載的 geowebcache.rar 解壓到 webapps目錄下

然后在 geowebcache 目錄下創(chuàng)建一個(gè) arcgis 用來緩存 arcgis相關(guān)切片

同時(shí)找到 web.xml

打開 web.xml 在 下增加如下代碼

GEOWEBCACHE_CACHE_DIR

D:\develop\GeoServer 2.3.2\webapps\geowebcache\arcgis

然后重啟 geoserver 會(huì)發(fā)現(xiàn) 剛才創(chuàng)建的 arcgis 下多了好幾個(gè)文件

然后打開這 geowebcache.xml 文件 在 ... 之間新增 arcgis 切片的目錄如下

.... 省略其他的

fsRoads

D:\YLKJPro\testSource\leshan_ArcGis\conf.xml

D:\YLKJPro\testSource\leshan_ArcGis\_alllayers

false

fsRoads為服務(wù)名，GeoWebCache服務(wù)頁(yè)面中可看到改名字，這里隨便起的。conf.xml就是ArcGIS Server發(fā)布服務(wù)設(shè)置緩存后生成的配置文件，該目錄就是瓦片所在目錄，是不是很眼熟？

然后錄入 localhost:28080/geowebcache/home 會(huì)看將如下頁(yè)面，

再點(diǎn)擊 紅箭頭的地方， 會(huì)進(jìn)入第二個(gè)頁(yè)面，看如下紅箭頭的地方就是fsRoads 這里配置的

然后我們點(diǎn)擊紅框的 [png] 會(huì)進(jìn)入如下的頁(yè)面，這個(gè)就是我們服務(wù)發(fā)布的地址了

切記 不能直接拷貝這個(gè)網(wǎng)頁(yè)上的url作為 cesium 調(diào)用服務(wù)的地址

如：

var layers = this.viewer.scene.imageryLayers;

let arcgis_layer = new Cesium.WebMapTileServiceImageryProvider({

url: 'http://localhost:28080/geowebcache/demo/fsRoads',

layer : 'EPSG:4326_fsRoads',

style : 'default',

tileMatrixSetID : 'fsRoads',

format : 'image/png'

});

layers.addImageryProvider(arcgis_layer);

這樣不管怎么搞都訪問不到滴，

其實(shí)真實(shí)的服務(wù)地址在 wmts-getcapabilities.xml 中，根據(jù)如下步驟下載 該xml文件打開，在腳底就是所需服務(wù)地址(當(dāng)初因?yàn)椴幻靼走@個(gè)，自己搞了好幾個(gè)小時(shí)都沒對(duì)，)

根據(jù)如上圖我們獲得了服務(wù)地址和參數(shù)，所以將調(diào)用方法修改如下

var layers = this.viewer.scene.imageryLayers;

let arcgis_layer = new Cesium.WebMapServiceImageryProvider({

url: "http://localhost:28080/geowebcache/service/wms",

layers: 'EPSG:4326_fsRoads',

parameters: {

'LAYERS': 'fsRoads',

'FORMAT': 'image/png',

'SRS': 'EPSG:4326',

'VERSION': '1.1.1'

}

});

layers.addImageryProvider(arcgis_layer);

這里還需要注意 跨域 問題 ,根據(jù)下面的操作解決跨域問題

四、 解決cesium加載資源不允許跨越問題

1、將cors-filter-2.4.jar和java-property-utils-1.9.1.jar，兩個(gè)jar包文件放入geoserver目錄下webapps\geoserver\web-inf\lib中。

2、打開geoserver目錄下webapps\geoserver\web-inf中的web.xml

3、添加過濾器代碼：

CORS

com.thetransactioncompany.cors.CORSFilter

4、添加過濾器路由代碼：

CORS

/*

5、添加完畢后，重啟geoserver

6、如果目錄中存在maven，需要在pom.xml中，添加

com.thetransactioncompany

cors-filter

[ version ]

注意 geowebcache 也需要進(jìn)行如上幾步配置 如圖

五、最終效果呈現(xiàn)

另外使用 tomcat + GeoServer War包 和 GeoWebCache War包 來發(fā)布 服務(wù)其實(shí)步驟差不多，在官網(wǎng)下載war 放到webapps中重新運(yùn)行tomcat，然后根據(jù)如上配置步驟配置即可；也可以參考https://blog.csdn.net/lynchee/article/details/87978099

官網(wǎng)地址

geoserver war http://geoserver.org/release/2.14.2/

geowebcache war https://sourceforge.net/projects/geowebcache/files/geowebcache/1.16.1/

總結(jié)

以上是生活随笔為你收集整理的arcgis xml 下载 切片_vue/cli3整合Cesium，加载离线arcgis 切片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。