1. GeoServer 发布 WMS
进入工作区
点击新建工作区
填写工作区的配置信息
点击提交后自动跳转到所有工作区界面,可以看到创建的工作区
点击 Stores (数据存储)
添加新的 Stores
选择 Stores 的数据类型
点击后进入 GeoTIFF 数据配置界面,配置完成之后,点击 Save
点击 Save 之后跳转到 创建图层界面,点击 Publish
点击 publish 之后进入图层编辑界面,设置图层参数,重点是参考系坐标和范围,一般是4326(WGS84)
往下滚动页面填写参数信息,添加完成之后点击 save
<figcaption style="margin-top: 0.66667em; padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">这里的 input transparent color 颜色选择为 000000,然后 .tif 文件发布以后就没有黑色的底边了</figcaption>
save 之后,会自动跳转到 layers 界面,在左侧菜单栏找到图层雨来,然后在所有图层中找到刚才新建的图层,在select One中点击 OpenLayer,如果弹出地图说明发布正确
点击后显示图像
地图显示失败的原因一般都是图层的参考系设置错误,4326 坐标系设置成了其他坐标系,或者范围与数据真实范围不一致
2. GeoServer 跨域
由于发布的 Cesium 服务与 GeoServer 一般非同源。因此 Cesium 要访问 GeoServer,需要 GeoServer 支持跨域。GeoServer默认未开启这一功能,开启的话需要找到 GeoServer安装目录下的 geoserver/WEB-INF/web.xml 文件,然后将下面两部分代码取消注释,配置完成之后,重启 tomcat
(使用 war 包发布的 geoserver 开启跨源请求好像有问题,所以我又安装了 GeoServer 14.2 的 windows 安装版)
<filter>
<filter-name>cross-origin</filter-name>
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
<init-param>
<param-name>chainPreflight</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>allowedOrigins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>allowedMethods</param-name>
<param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowedHeaders</param-name>
<param-value>*</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>cross-origin</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3. Cesium 获取 GeoServer 发布的地图
var viewer = new Cesium.Viewer("cesiumContainer", {
});
var imageryProvider = new Cesium.WebMapServiceImageryProvider({
// 这里是你的 geoserver服务点击查看图层的 url
url: 'http://localhost:8089/geoserver/cesiumMapTest/wms',
// 这里是自定义的图层名称
layers: 'geotiff_coverage',
parameters: {
service: 'WMS',
format: 'image/png',
transparent: true
}
});
var wms = new WebMapServiceImageryProvider({
url: 'http://192.168.3.200:8082/geoserver/qx/wms',
layers: 'qx:yx_wgs84',
parameters: {
service: 'WMS',
format: 'image/jpeg',
transparent: true,
styles:'',
srs:'EPSG:4326',//,
BBOX: '106.1143684387207,26.852130889892578,106.24139785766602,26.983966827392578'
}
});
// 图层添加
viewer.imageryLayers.addImageryProvider(imageryProvider);
// 跳转到指定坐标
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(112.070, 31.353, 500.0)
});
然后浏览器访问本地 Cesium 服务,就可以看到发布的数据了