arcgis xml 下载 切片_vue/cli3整合Cesium,加载离线arcgis 切片
最開始使用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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 合肥装修一个KTV包间需要多少钱?请大家
- 下一篇: 业务层战略制定的思路和方法_智能商业时代