Cesium 加载 Geoserver WMS 图层以及条件查询和切换图层样式
- 图层样式核心代码
- 完整代码：
- 在线示例
Cesium 加载 Geoserver WMS 图层，在实际项目中常常会遇到，需要对图层进行过滤，这里介绍一下过滤方法。
Cesium Geoserver 图层条件过滤与 Openlayers 略有不同，不过原理是一样的。
也是利用 Geoserver 的 CQL_FILTER 实现功能。
本文包括图层样式核心代码、完整代码以及在线示例。
图层样式核心代码
Geoserver 图层样式核心代码：
// 图层参数
const parameters = {
transparent: true,
format: "image/png",
srs: "EPSG:4326",
// 图层样式
styles: style || "",
}
CQL_FILTER && (parameters.cql_filter = "NAME='密云区' or NAME like '%大兴%' or DAIMA = 110109");
// 添加 geoserver 发布的 wms 数据
layer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url: "http://openlayers.vip/geoserver/cite/wms",
// 必填
layers: "cite:2000",
parameters: parameters
}));
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8"/>
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Cesium WMTS WMS FILTER</title>
<script src="./Cesium.js"></script>
<script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script>
<style>
@import url(./Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<br/>
<button id="geoserverFunc" onClick="geoserverFunc()">geoserver</button>
<button id="geoserverFilter" onClick="geoserverFunc(true)">geoserverFilter</button>
<button id="geoserverStyle" onClick="geoserverFunc(undefined,'polygon')">geoserverFilter</button>
<button id="restoreFunc" onClick="geoserverFunc()">restoreFunc</button>
<button id="clearFunc" onClick="clearFunc()">清空</button>
<div id="cesiumContainer"></div>
<script>
// 这个 tk 只能在本域名下使用
var token = '2b7cbf61123cbe4e9ec6267a87e7442f';
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate: true,
selectionIndicator: true,
animation: false, //动画
homeButton: false, //home键
geocoder: false, //地址编码
baseLayerPicker: false, //图层选择控件
timeline: false, //时间轴
fullscreenButton: false, //全屏显示
infoBox: false, //点击要素之后浮窗
sceneModePicker: false, //投影方式 三维/二维
navigationInstructionsInitiallyVisible: false, //导航指令
navigationHelpButton: false, //帮助信息
selectionIndicator: false, // 选择
imageryProvider: new window.Cesium.WebMapTileServiceImageryProvider({
//影像底图
url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + token,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
show: true
})
});
viewer.imageryLayers.addImageryProvider(new window.Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + token,
subdomains: subdomains,
layer: "tdtCiaLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}));
// // 叠加国界服务
var iboMap = new window.Cesium.UrlTemplateImageryProvider({
url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
tilingScheme: new window.Cesium.WebMercatorTilingScheme(),
maximumLevel: 10
});
viewer.imageryLayers.addImageryProvider(iboMap);
// 加载 geoserver 图层
let layer;
// 添加图层
function geoserverFunc(CQL_FILTER, style) {
clearFunc();
const parameters = {
transparent: true,
format: "image/png",
srs: "EPSG:4326",
// 非必填
styles: style || "",
}
CQL_FILTER && (parameters.cql_filter = "NAME='密云区' or NAME like '%大兴%' or DAIMA = 110109");
// 添加geoserver发布的wms数据
layer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url: "http://openlayers.vip/geoserver/cite/wms",
// 必填
layers: "cite:2000",
parameters: parameters
}));
flyToRectangle();
}
// 清空
function clearFunc() {
layer && viewer.imageryLayers.remove(layer) , layer = undefined;
}
/**
* @description: 飞行定位到一个矩形
* @return {*}
*/
function flyToRectangle(RectangleCD) {
// 添加定位信息
RectangleCD = RectangleCD || [
Cesium.Cartesian3.fromDegrees(
115.41380999600005,
39.44197808500007,
0
),
Cesium.Cartesian3.fromDegrees(
117.49920000500002,
41.05928408300005,
0
),
];
var rec = Cesium.Rectangle.fromCartesianArray(RectangleCD);
var boundingSphere = Cesium.BoundingSphere.fromRectangle3D(rec);
viewer.camera.flyToBoundingSphere(boundingSphere, {
duration: 2,
complete: function () {
},
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90),
range: 0.0,
},
});
}
</script>
</body>
</html>
在线示例
Cesium 在线示例：Cesium 加载 Geoserver WMS 图层
