鼠标点击WMS服务的某个要素，高亮显示

环境：Cesium 1.79.1，Geoserver 2.13.1

发布WMS地图服务

1646707707(1).png

Cesium调用WMS地图服务，并获取点击的要素信息

<template>
    <div>
        <div id="cesiumContainer"></div>
    </div>
</template>

<script>
// 鼠标点击WMS地图服务的要素时的回调函数
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