Cesium 调用Geoserver WMS服务及Geoserver服务发布

本文介绍如何使用GeoServer发布地图服务,并通过Cesium进行离线地图展示。包括GeoServer安装配置、GeoPackage地图文件制作、服务发布流程及Cesium调用WMS服务的代码实现。

走了非常非常非常多的弯路,谨以此文,献给后来之人。

 

  • GeoServer服务发布

下载GeoServer安装版安装,同时安装geopackage扩展,以备使用。

 

使用XX地图下载器下载地图,导出成GeoPackage地图文件。

 

打开GeoServer服务界面

 

点击左侧工作区 ->添加新的工作区 ->输入一个名字URL可以随意起,点击提交(作者使用的名字是Cesium)

 

点击左侧数据存储->新建数据源,会发现两个GeoPackage,此处根据下载的地图类型选择即可

工作区选择刚刚新建的工作区,数据源名称可以随便起,连接参数点击浏览选择刚才导出的GeoPackage文件

发布成功后弹出如下窗口,点击发布

点击左侧 -> Layer Perview 找的刚才发布的图层,点击 OpenLayers 

出现如下效果:

 

 

 

说明你的Geoserver服务发布成功了。完成了第一步

Cesium调用WMS服务

打开Cesium工作区,添加如下代码。

 

 

<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var provider = new Cesium.WebMapServiceImageryProvider({
              url: 'http://localhost:8082/geoserver/cesium/wms',
              layers: 'cesium:taile',
              parameters: {
              	   service : 'WMS',
                  format: 'image/png',
                  transparent: true,
              }
          });
     viewer.imageryLayers.addImageryProvider(provider);
  </script>

 

上述代码中Url为

至此Cesium离线地图服务完成

注意:最后访问时使用谷歌浏览器跨域方式访问,否则会出现WMS服务无响应的情况。

 

 2.12Geoserver及扩展包下载:http://download.youkuaiyun.com/download/kill5921/10225615

 

 

调用 GeoServer WMS 服务时实现图层透明显示,主要通过在 WMS 请求参数中设置 `TRANSPARENT` 参数为 `TRUE` 来实现。该参数用于控制地图背景是否透明,通常在叠加多个图层时非常有用,可以确保底图或其他图层的内容不会被遮挡[^2]。 ### 设置图层透明显示的 WMS 请求参数 以下是一个示例的 WMS 请求 URL,展示了如何设置图层透明显示: ``` http://localhost:8080/geoserver/topp/wms? service=WMS& version=1.1.0& request=GetMap& layers=topp:states& styles=& transparent=TRUE& format=image/png& crs=EPSG:4326& bbox=-180,-90,180,90& width=800& height=600 ``` 在上述请求中: - `transparent=TRUE` 表示启用图层透明显示。 - `format=image/png` 指定返回的图像格式为 PNG,PNG 格式支持透明通道,因此是推荐的格式。 - `bbox`、`width` 和 `height` 定义了地图的范围和分辨率。 - `layers` 指定了要请求的图层名称。 - `crs` 指定坐标参考系统,通常使用 `EPSG:4326` 或 `EPSG:3857`。 ### 在 OpenLayers 中加载透明 WMS 图层 如果使用 OpenLayers 加载 GeoServerWMS 服务并启用图层透明显示,可以通过以下代码实现: ```javascript const geoserverLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://localhost:8080/geoserver/topp/wms', params: { 'LAYERS': 'topp:states', 'VERSION': '1.1.0', 'TRANSPARENT': 'TRUE' } }) }); const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), // 底图 geoserverLayer // 透明 WMS 图层 ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); ``` 在上述代码中: - `params` 中的 `'TRANSPARENT': 'TRUE'` 启用了图层透明显示。 - 使用 `ol.source.TileWMS` 创建了一个 WMS 图层。 - 将 WMS 图层与 OpenLayers 的底图(如 OpenStreetMap)叠加显示。 ### 在 Cesium 中加载透明 WMS 图层 Cesium 支持加载 WMS 图层,并且可以通过设置 `customTags` 来实现图层透明显示。以下是一个示例代码: ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); const wmsSource = new Cesium.WebMapServiceImageryProvider({ url: 'http://localhost:8080/geoserver/topp/wms', customTags: { transparent: true }, getCustomUrl: function(imageryProvider, x, y, level) { return '?SERVICE=WMS&VERSION=1.1.0&REQUEST=GetMap&LAYERS=topp:states&STYLES=&FORMAT=image/png&TRANSPARENT=TRUE&SRS=EPSG:4326&BBOX={west},{south},{east},{north}&WIDTH=256&HEIGHT=256'; } }); viewer.imageryLayers.addImageryProvider(wmsSource); ``` 在上述代码中: - `customTags` 中的 `transparent: true` 启用了图层透明显示。 - `getCustomUrl` 函数用于生成自定义的 WMS 请求 URL,并在其中设置 `TRANSPARENT=TRUE` 参数。 ### 注意事项 - **图像格式**:确保使用支持透明的图像格式(如 PNG),否则透明设置可能无效。 - **图层叠加**:透明图层通常用于叠加在其他图层之上,因此需要确保底图或其他图层的数据可见。 - **坐标参考系统**:确保 WMS 请求中的坐标参考系统(如 `EPSG:4326`)与地图的坐标系统一致。
评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值