最開始使用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
<template>
<div class="test-cesium">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
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);
}
}
</script>
<style>
.test-cesium{
width: 100%;
height: 100%;
}
</style>
5、修改 package.json
如果使用了eslint 会提示 Cesium 未定义,需要修改 package.json,设置no-undef
6、现在运行看看效果
三、使用Geoserve 发布地图服务
上面虽然加载cesium成功了,但是我们最终是为了加载一个本地的切片,所以还需要借助Geoserve
Geoserve官网下载 http://geoserver.org/download/
也可以到云盘下载 https://pan.baidu.com/s/1fe6ADFmML6sr3qrMztkVJQ 提取码 xl3h
然后点击 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
在 下增加如下代码
<context-param>
<param-name>GEOWEBCACHE_CACHE_DIR</param-name>
<!-- 下面需 修改为自己上一步创建的真实目录 -->
<param-value>D:\develop\GeoServer 2.3.2\webapps\geowebcache\arcgis</param-value>
</context-param>
然后重启 geoserver 会发现 刚才创建的 arcgis 下多了好几个文件
然后打开这 geowebcache.xml
文件 在 <layers>...</layers>
之间新增 arcgis 切片的目录如下
<layers>
.... 省略其他的
<arcgisLayer>
<name>fsRoads</name>
<tilingScheme>D:\YLKJPro\testSource\leshan_ArcGis\conf.xml</tilingScheme>
<tileCachePath>D:\YLKJPro\testSource\leshan_ArcGis\_alllayers</tileCachePath>
<hexZoom>false</hexZoom>
</arcgisLayer>
</layers>
fsRoads为服务名,GeoWebCache服务页面中可看到改名字,这里随便起的。conf.xml就是ArcGIS Server发布服务设置缓存后生成的配置文件,该目录就是瓦片所在目录,是不是很眼熟?
测试的瓦片 云盘 https://pan.baidu.com/s/1qFDS60Xsfy_b7si9hGZ4vA 提取码 minb
然后录入 localhost:28080/geowebcache/home
会看将如下页面
再点击 红箭头的地方, 会进入第二个页面,看如下红箭头的地方就是<name>fsRoads</name>
这里配置的
然后我们点击红框的 [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、添加过滤器代码:
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
4、添加过滤器路由代码:
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
5、添加完毕后,重启geoserver
6、如果目录中存在maven,需要在pom.xml中,添加
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>[ version ]</version>
</dependency>
注意 geowebcache
也需要进行如上几步配置 如图
五、最终效果呈现
需要项目原码可以访问 https://github.com/dengxiaoning/vueCli3-join-cesium-arcgis-images
另外使用 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/