Cesium对WMS地图服务进行查询并弹框展示信息

本文链接：https://blog.csdn.net/u014556081/article/details/132863020

一、简介

Cesium加载WMS地图服务，然后调用接口GetFeatureInfo对要素信息进行查询

二、测试接口


{
    type: "Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon",
    coordinates: 数组
}
查询点
http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
&QUERY_LAYERS=tiger%3Apoi&STYLES&LAYERS=tiger%3Apoi&exceptions=application%2Fvnd.ogc.se_inimage
&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&WIDTH=101&HEIGHT=101
&BBOX=-74.01160955429077%2C40.70826172828674%2C-74.00944232940674%2C40.710428953170776


{
	"type": "FeatureCollection",
	"features": [{
		"type": "Feature",
		"id": "poi.1",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.0104611, 40.70758763]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "museam",
			"THUMBNAIL": "pics/22037827-Ti.jpg",
			"MAINPAGE": "pics/22037827-L.jpg"
		}
	}, {
		"type": "Feature",
		"id": "poi.2",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.01083751, 40.70754684]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "stock",
			"THUMBNAIL": "pics/22037829-Ti.jpg",
			"MAINPAGE": "pics/22037829-L.jpg"
		}
	}, {
		"type": "Feature",
		"id": "poi.3",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.01053024, 40.70938712]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "art",
			"THUMBNAIL": "pics/22037856-Ti.jpg",
			"MAINPAGE": "pics/22037856-L.jpg"
		}
	}, {
		"type": "Feature",
		"id": "poi.4",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.00857344, 40.71194565]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "lox",
			"THUMBNAIL": "pics/22037884-Ti.jpg",
			"MAINPAGE": "pics/22037884-L.jpg"
		}
	}, {
		"type": "Feature",
		"id": "poi.5",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.01183158, 40.70852996]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "church",
			"THUMBNAIL": "pics/22037839-Ti.jpg",
			"MAINPAGE": "pics/22037839-L.jpg"
		}
	}, {
		"type": "Feature",
		"id": "poi.6",
		"geometry": {
			"type": "Point",
			"coordinates": [-74.00153046, 40.71988512]
		},
		"geometry_name": "the_geom",
		"properties": {
			"NAME": "fire",
			"THUMBNAIL": "pics/28640984-Ti.jpg",
			"MAINPAGE": "pics/28640984-L.jpg"
		}
	}],
	"totalFeatures": 6,
	"numberMatched": 6,
	"numberReturned": 6,
	"timeStamp": "2023-09-12T03:31:50.145Z",
	"crs": {
		"type": "name",
		"properties": {
			"name": "urn:ogc:def:crs:EPSG::4326"
		}
	}
}


查询线
http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
&QUERY_LAYERS=tiger%3Atiger_roads&STYLES&LAYERS=tiger%3Atiger_roads&exceptions=application%2Fvnd.ogc.se_inimage
&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&WIDTH=101&HEIGHT=101
&BBOX=-73.95326614379883%2C40.78451156616211%2C-73.9185905456543%2C40.81918716430664

{
	"type": "FeatureCollection",
	"features": [{
		"type": "Feature",
		"id": "tiger_roads.2060",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.937885, 40.803733],
					[-73.936415, 40.803118]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 124th St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.2061",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.938409, 40.803092],
					[-73.93683, 40.802478]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 123rd St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.2068",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.93729, 40.801837],
					[-73.935041, 40.800874]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 122nd St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.2069",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.93683, 40.802478],
					[-73.934561, 40.801515]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 123rd St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.2070",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.937748, 40.801196],
					[-73.935478, 40.80025]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 121st St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.2100",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.936415, 40.803118],
					[-73.934145, 40.802073]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "E 124th St"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.5134",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.93683, 40.802478],
					[-73.936415, 40.803118]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "3rd Ave"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.5135",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.93729, 40.801837],
					[-73.93683, 40.802478]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "3rd Ave"
		}
	}, {
		"type": "Feature",
		"id": "tiger_roads.5140",
		"geometry": {
			"type": "MultiLineString",
			"coordinates": [
				[
					[-73.935041, 40.800874],
					[-73.934561, 40.801515]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {
			"CFCC": "A41",
			"NAME": "2nd Ave"
		}
	}],
	"totalFeatures": "unknown",
	"numberReturned": 9,
	"timeStamp": "2023-09-12T05:38:36.569Z",
	"crs": {
		"type": "name",
		"properties": {
			"name": "urn:ogc:def:crs:EPSG::4326"
		}
	}
}

查询面
http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
&QUERY_LAYERS=tiger%3Agiant_polygon&STYLES&LAYERS=tiger%3Agiant_polygon&exceptions=application%2Fvnd.ogc.se_inimage
&INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&WIDTH=101&HEIGHT=101&BBOX=-74.8828125%2C-64.3359375%2C-3.8671875%2C6.6796875
{
	"type": "FeatureCollection",
	"features": [{
		"type": "Feature",
		"id": "giant_polygon.1",
		"geometry": {
			"type": "MultiPolygon",
			"coordinates": [
				[
					[
						[-180, -90],
						[-180, 90],
						[180, 90],
						[180, -90],
						[-180, -90]
					]
				]
			]
		},
		"geometry_name": "the_geom",
		"properties": {}
	}],
	"totalFeatures": "unknown",
	"numberReturned": 1,
	"timeStamp": "2023-09-12T03:01:33.391Z",
	"crs": {
		"type": "name",
		"properties": {
			"name": "urn:ogc:def:crs:EPSG::4326"
		}
	}
}

三、示例源码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/common.css">
    <title>
        WMS地图服务点击查询【面图层】
    </title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css">
</head>

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

</html>

<script>
    var app = new Vue({
        el: '#cesiumContainer',
        mounted() {
            // let viewer = ANOVGIS.CesiumView.init("cesiumContainer");
            window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
                // imageryProvider: undefined
            });

            // 底图
            viewer.imageryLayers.addImageryProvider(
                ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.TDT, {
                    style: "img",
                    key: globalConfig.tdtKey
                }));
            // wms服务
            var layer = ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.WMS, {
                rectangle: Cesium.Rectangle.fromDegrees(116.1955337524414, 39.75703811645508, 116.62583923339844, 40.03786087036133),
                url: 'http://172.16.223.165:8080/geoserver/twins/wms?',
                layers: "	twins:architecture",
                parameters: {
                    transparent: true,
                    format: "image/png",
                },
                highlight: {
                    material: 'rgba(255,255,0,0.6)',
                    height: 0.01
                }
            })
            layer.bindPopup({
                viewer: viewer,
                showTitle: true,
                useDefaultHtmlTemplate: true,//用默认模板
            });
            layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                let infoData = {
                    title: e.feature.data.properties.name || '未查到建筑名称',
                    fieldsMap: [
                        {
                            nameC: '建筑层高：',
                            value: e.feature.data.properties.floor
                        }]
                }
                layer.popup.show(e.position, infoData);
                console.log(e);
            })
            var layer1 = viewer.imageryLayers.addImageryProvider(layer);
            viewer.flyTo(layer1)
        }
    });
</script>