環(huán)境：Cesium 1.79.1，Geoserver 2.13.1
發(fā)布WMS地圖服務
1646707707(1).png
Cesium調(diào)用WMS地圖服務，并獲取點擊的要素信息
<template>
<div>
<div id="cesiumContainer"></div>
</div>
</template>
<script>
// 鼠標點擊WMS地圖服務的要素時的回調(diào)函數(shù)
let cb = function(result){
// 獲取要素信息
console.log(result);
}
export default {
name: "Ogc",
data() {
return {
};
},
mounted() {
let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
window.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false,
shouldAnimate: true,
baseLayerPicker: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
infoBox: false,
navigationInstructionsInitiallyVisible: false,
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:
"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
}),
});
this.addWmsMap();
},
methods: {
addWmsMap(){
let gfif = new Cesium.GetFeatureInfoFormat('json', 'application/json', cb);
let provider = new Cesium.WebMapServiceImageryProvider({
url : 'http://localhost:8085/geoserver/test/wms',
layers : 'test:bianjie',
getFeatureInfoFormats: [gfif],
});
viewer.imageryLayers.addImageryProvider(provider);
},
},
};
</script>
<style scoped>
#cesiumContainer {
position: absolute;
width: 100%;
height: 100%;
}
.tool{
position: absolute;
left: 10px;
top: 10px;
z-index: 101;
}
</style>
獲取的要素信息
6c853b3e5b41a8e2c440d255094432b.png
