一、简介
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
http://icenter.geovis.online/geoserverplus/icenter/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=icenter:%E4%BC%81%E4%B8%9A_%E7%82%B9-PNG-4326-%E6%8D%A2%E8%A1%8C&maxFeatures=50&outputFormat=application%2Fjson
http://172.16.223.165:8080/geoserver/twins/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=twins%3Apoi&maxFeatures=50&outputFormat=application%2Fjson&srsName=EPSG:4326
{
"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>
