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

一、安裝cesium

首選創建一個測試項目 vue create vue-join-cesium

然后直接cd 到項目目錄 ，使用npm 直接拉取cesium

$ npm install cesium --save

安裝成功后會在 node_modules 下 看見一個cesium的目錄

二、項目引用

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

2、將Cesium拷貝到項目中的 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;

// // 創建viewer實例

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

// 需要進行可視化的數據源的集合

animation: false, // 是否顯示動畫控件

shouldAnimate: true,

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

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

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

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

timeline: false, // 是否顯示時間線控件

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

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

infoBox: false, // 是否顯示點擊要素之后顯示的信息

requestRenderMode: true, // 啟用請求渲染模式

scene3DOnly: false, // 每個幾何實例將只能以3D渲染以節省GPU內存

sceneMode: 3, // 初始場景模式 1 2D模式 2 2D循環模式 3 3D模式 Cesium.SceneMode

fullscreenElement: document.body, // 全屏時渲染的HTML元素 暫時沒發現用處

})

// 去除版權信息

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

// 將經緯度轉換為世界坐標

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 會提示 Cesium 未定義，需要修改 package.json，設置no-undef

6、現在運行看看效果

三、使用Geoserve 發布地圖服務

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

然后點擊 geoserver-2.3.2.exe 進行安裝

安裝成功后，在如下目錄啟動Geoserver

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

有關shpe 文件的發布請參考 https://blog.csdn.net/sharetm/article/details/54931096 ，這里主要講一下發布 arcgis 切片

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

然后在 geowebcache 目錄下創建一個 arcgis 用來緩存 arcgis相關切片

同時找到 web.xml

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

GEOWEBCACHE_CACHE_DIR

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

然后重啟 geoserver 會發現 剛才創建的 arcgis 下多了好幾個文件

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

.... 省略其他的

fsRoads

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

D:\YLKJPro\testSource\leshan_ArcGis\_alllayers

false

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

然后錄入 localhost:28080/geowebcache/home 會看將如下頁面，

再點擊 紅箭頭的地方， 會進入第二個頁面，看如下紅箭頭的地方就是fsRoads 這里配置的

然后我們點擊紅框的 [png] 會進入如下的頁面，這個就是我們服務發布的地址了

切記 不能直接拷貝這個網頁上的url作為 cesium 調用服務的地址

如：

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

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

其實真實的服務地址在 wmts-getcapabilities.xml 中，根據如下步驟下載 該xml文件打開，在腳底就是所需服務地址(當初因為不明白這個，自己搞了好幾個小時都沒對，)

根據如上圖我們獲得了服務地址和參數，所以將調用方法修改如下

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

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

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

1、將cors-filter-2.4.jar和java-property-utils-1.9.1.jar，兩個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 也需要進行如上幾步配置 如圖

五、最終效果呈現

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

官網地址

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。