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

    一、简介

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

    二、测试接口

    1.  
    2. {
    3.     type: "Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon",
    4.     coordinates: 数组
    5. }
    6. 查询点
    7. http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
    8. &QUERY_LAYERS=tiger%3Apoi&STYLES&LAYERS=tiger%3Apoi&exceptions=application%2Fvnd.ogc.se_inimage
    9. &INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&WIDTH=101&HEIGHT=101
    10. &BBOX=-74.01160955429077%2C40.70826172828674%2C-74.00944232940674%2C40.710428953170776
    11.  
    12.  
    13. {
    14. 	"type": "FeatureCollection",
    15. 	"features": [{
    16. 		"type": "Feature",
    17. 		"id": "poi.1",
    18. 		"geometry": {
    19. 			"type": "Point",
    20. 			"coordinates": [-74.0104611, 40.70758763]
    21. 		},
    22. 		"geometry_name": "the_geom",
    23. 		"properties": {
    24. 			"NAME": "museam",
    25. 			"THUMBNAIL": "pics/22037827-Ti.jpg",
    26. 			"MAINPAGE": "pics/22037827-L.jpg"
    27. 		}
    28. 	}, {
    29. 		"type": "Feature",
    30. 		"id": "poi.2",
    31. 		"geometry": {
    32. 			"type": "Point",
    33. 			"coordinates": [-74.01083751, 40.70754684]
    34. 		},
    35. 		"geometry_name": "the_geom",
    36. 		"properties": {
    37. 			"NAME": "stock",
    38. 			"THUMBNAIL": "pics/22037829-Ti.jpg",
    39. 			"MAINPAGE": "pics/22037829-L.jpg"
    40. 		}
    41. 	}, {
    42. 		"type": "Feature",
    43. 		"id": "poi.3",
    44. 		"geometry": {
    45. 			"type": "Point",
    46. 			"coordinates": [-74.01053024, 40.70938712]
    47. 		},
    48. 		"geometry_name": "the_geom",
    49. 		"properties": {
    50. 			"NAME": "art",
    51. 			"THUMBNAIL": "pics/22037856-Ti.jpg",
    52. 			"MAINPAGE": "pics/22037856-L.jpg"
    53. 		}
    54. 	}, {
    55. 		"type": "Feature",
    56. 		"id": "poi.4",
    57. 		"geometry": {
    58. 			"type": "Point",
    59. 			"coordinates": [-74.00857344, 40.71194565]
    60. 		},
    61. 		"geometry_name": "the_geom",
    62. 		"properties": {
    63. 			"NAME": "lox",
    64. 			"THUMBNAIL": "pics/22037884-Ti.jpg",
    65. 			"MAINPAGE": "pics/22037884-L.jpg"
    66. 		}
    67. 	}, {
    68. 		"type": "Feature",
    69. 		"id": "poi.5",
    70. 		"geometry": {
    71. 			"type": "Point",
    72. 			"coordinates": [-74.01183158, 40.70852996]
    73. 		},
    74. 		"geometry_name": "the_geom",
    75. 		"properties": {
    76. 			"NAME": "church",
    77. 			"THUMBNAIL": "pics/22037839-Ti.jpg",
    78. 			"MAINPAGE": "pics/22037839-L.jpg"
    79. 		}
    80. 	}, {
    81. 		"type": "Feature",
    82. 		"id": "poi.6",
    83. 		"geometry": {
    84. 			"type": "Point",
    85. 			"coordinates": [-74.00153046, 40.71988512]
    86. 		},
    87. 		"geometry_name": "the_geom",
    88. 		"properties": {
    89. 			"NAME": "fire",
    90. 			"THUMBNAIL": "pics/28640984-Ti.jpg",
    91. 			"MAINPAGE": "pics/28640984-L.jpg"
    92. 		}
    93. 	}],
    94. 	"totalFeatures": 6,
    95. 	"numberMatched": 6,
    96. 	"numberReturned": 6,
    97. 	"timeStamp": "2023-09-12T03:31:50.145Z",
    98. 	"crs": {
    99. 		"type": "name",
    100. 		"properties": {
    101. 			"name": "urn:ogc:def:crs:EPSG::4326"
    102. 		}
    103. 	}
    104. }
    105.  
    106.  
    107. 查询线
    108. http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
    109. &QUERY_LAYERS=tiger%3Atiger_roads&STYLES&LAYERS=tiger%3Atiger_roads&exceptions=application%2Fvnd.ogc.se_inimage
    110. &INFO_FORMAT=application%2Fjson&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A4326&WIDTH=101&HEIGHT=101
    111. &BBOX=-73.95326614379883%2C40.78451156616211%2C-73.9185905456543%2C40.81918716430664
    112.  
    113. {
    114. 	"type": "FeatureCollection",
    115. 	"features": [{
    116. 		"type": "Feature",
    117. 		"id": "tiger_roads.2060",
    118. 		"geometry": {
    119. 			"type": "MultiLineString",
    120. 			"coordinates": [
    121. 				[
    122. 					[-73.937885, 40.803733],
    123. 					[-73.936415, 40.803118]
    124. 				]
    125. 			]
    126. 		},
    127. 		"geometry_name": "the_geom",
    128. 		"properties": {
    129. 			"CFCC": "A41",
    130. 			"NAME": "E 124th St"
    131. 		}
    132. 	}, {
    133. 		"type": "Feature",
    134. 		"id": "tiger_roads.2061",
    135. 		"geometry": {
    136. 			"type": "MultiLineString",
    137. 			"coordinates": [
    138. 				[
    139. 					[-73.938409, 40.803092],
    140. 					[-73.93683, 40.802478]
    141. 				]
    142. 			]
    143. 		},
    144. 		"geometry_name": "the_geom",
    145. 		"properties": {
    146. 			"CFCC": "A41",
    147. 			"NAME": "E 123rd St"
    148. 		}
    149. 	}, {
    150. 		"type": "Feature",
    151. 		"id": "tiger_roads.2068",
    152. 		"geometry": {
    153. 			"type": "MultiLineString",
    154. 			"coordinates": [
    155. 				[
    156. 					[-73.93729, 40.801837],
    157. 					[-73.935041, 40.800874]
    158. 				]
    159. 			]
    160. 		},
    161. 		"geometry_name": "the_geom",
    162. 		"properties": {
    163. 			"CFCC": "A41",
    164. 			"NAME": "E 122nd St"
    165. 		}
    166. 	}, {
    167. 		"type": "Feature",
    168. 		"id": "tiger_roads.2069",
    169. 		"geometry": {
    170. 			"type": "MultiLineString",
    171. 			"coordinates": [
    172. 				[
    173. 					[-73.93683, 40.802478],
    174. 					[-73.934561, 40.801515]
    175. 				]
    176. 			]
    177. 		},
    178. 		"geometry_name": "the_geom",
    179. 		"properties": {
    180. 			"CFCC": "A41",
    181. 			"NAME": "E 123rd St"
    182. 		}
    183. 	}, {
    184. 		"type": "Feature",
    185. 		"id": "tiger_roads.2070",
    186. 		"geometry": {
    187. 			"type": "MultiLineString",
    188. 			"coordinates": [
    189. 				[
    190. 					[-73.937748, 40.801196],
    191. 					[-73.935478, 40.80025]
    192. 				]
    193. 			]
    194. 		},
    195. 		"geometry_name": "the_geom",
    196. 		"properties": {
    197. 			"CFCC": "A41",
    198. 			"NAME": "E 121st St"
    199. 		}
    200. 	}, {
    201. 		"type": "Feature",
    202. 		"id": "tiger_roads.2100",
    203. 		"geometry": {
    204. 			"type": "MultiLineString",
    205. 			"coordinates": [
    206. 				[
    207. 					[-73.936415, 40.803118],
    208. 					[-73.934145, 40.802073]
    209. 				]
    210. 			]
    211. 		},
    212. 		"geometry_name": "the_geom",
    213. 		"properties": {
    214. 			"CFCC": "A41",
    215. 			"NAME": "E 124th St"
    216. 		}
    217. 	}, {
    218. 		"type": "Feature",
    219. 		"id": "tiger_roads.5134",
    220. 		"geometry": {
    221. 			"type": "MultiLineString",
    222. 			"coordinates": [
    223. 				[
    224. 					[-73.93683, 40.802478],
    225. 					[-73.936415, 40.803118]
    226. 				]
    227. 			]
    228. 		},
    229. 		"geometry_name": "the_geom",
    230. 		"properties": {
    231. 			"CFCC": "A41",
    232. 			"NAME": "3rd Ave"
    233. 		}
    234. 	}, {
    235. 		"type": "Feature",
    236. 		"id": "tiger_roads.5135",
    237. 		"geometry": {
    238. 			"type": "MultiLineString",
    239. 			"coordinates": [
    240. 				[
    241. 					[-73.93729, 40.801837],
    242. 					[-73.93683, 40.802478]
    243. 				]
    244. 			]
    245. 		},
    246. 		"geometry_name": "the_geom",
    247. 		"properties": {
    248. 			"CFCC": "A41",
    249. 			"NAME": "3rd Ave"
    250. 		}
    251. 	}, {
    252. 		"type": "Feature",
    253. 		"id": "tiger_roads.5140",
    254. 		"geometry": {
    255. 			"type": "MultiLineString",
    256. 			"coordinates": [
    257. 				[
    258. 					[-73.935041, 40.800874],
    259. 					[-73.934561, 40.801515]
    260. 				]
    261. 			]
    262. 		},
    263. 		"geometry_name": "the_geom",
    264. 		"properties": {
    265. 			"CFCC": "A41",
    266. 			"NAME": "2nd Ave"
    267. 		}
    268. 	}],
    269. 	"totalFeatures": "unknown",
    270. 	"numberReturned": 9,
    271. 	"timeStamp": "2023-09-12T05:38:36.569Z",
    272. 	"crs": {
    273. 		"type": "name",
    274. 		"properties": {
    275. 			"name": "urn:ogc:def:crs:EPSG::4326"
    276. 		}
    277. 	}
    278. }
    279.  
    280. 查询面
    281. http://123.56.67.147:8080/geoserver_gis/tiger/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true
    282. &QUERY_LAYERS=tiger%3Agiant_polygon&STYLES&LAYERS=tiger%3Agiant_polygon&exceptions=application%2Fvnd.ogc.se_inimage
    283. &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
    284. {
    285. 	"type": "FeatureCollection",
    286. 	"features": [{
    287. 		"type": "Feature",
    288. 		"id": "giant_polygon.1",
    289. 		"geometry": {
    290. 			"type": "MultiPolygon",
    291. 			"coordinates": [
    292. 				[
    293. 					[
    294. 						[-180, -90],
    295. 						[-180, 90],
    296. 						[180, 90],
    297. 						[180, -90],
    298. 						[-180, -90]
    299. 					]
    300. 				]
    301. 			]
    302. 		},
    303. 		"geometry_name": "the_geom",
    304. 		"properties": {}
    305. 	}],
    306. 	"totalFeatures": "unknown",
    307. 	"numberReturned": 1,
    308. 	"timeStamp": "2023-09-12T03:01:33.391Z",
    309. 	"crs": {
    310. 		"type": "name",
    311. 		"properties": {
    312. 			"name": "urn:ogc:def:crs:EPSG::4326"
    313. 		}
    314. 	}
    315. }

    三、示例源码

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <link rel="stylesheet" href="./css/common.css">
    7.     <title>
    8.         WMS地图服务点击查询【面图层】
    9.     title>
    10.     <script src="./js/config.js">script>
    11.     <script src="./scripts/vue.min.js">script>
    12.     <script type="text/javascript" src="../anov-gis-sdk/index.js">script>
    13.     <link rel="stylesheet" href="../anov-gis-sdk/index.css">
    14. head>
    15.  
    16. <body>
    17.     <div id="cesiumContainer">
    18.     div>
    19. body>
    20.  
    21. html>
    22.  
    23. <script>
    24.     var app = new Vue({
    25.         el: '#cesiumContainer',
    26.         mounted() {
    27.             // let viewer = ANOVGIS.CesiumView.init("cesiumContainer");
    28.             window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
    29.                 // imageryProvider: undefined
    30.             });
    31.  
    32.             // 底图
    33.             viewer.imageryLayers.addImageryProvider(
    34.                 ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.TDT, {
    35.                     style: "img",
    36.                     key: globalConfig.tdtKey
    37.                 }));
    38.             // wms服务
    39.             var layer = ANOVGIS.ImageryLayerFactory.createImageryLayer(ANOVGIS.ImageryType.WMS, {
    40.                 rectangle: Cesium.Rectangle.fromDegrees(116.1955337524414, 39.75703811645508, 116.62583923339844, 40.03786087036133),
    41.                 url: 'http://172.16.223.165:8080/geoserver/twins/wms?',
    42.                 layers: "	twins:architecture",
    43.                 parameters: {
    44.                     transparent: true,
    45.                     format: "image/png",
    46.                 },
    47.                 highlight: {
    48.                     material: 'rgba(255,255,0,0.6)',
    49.                     height: 0.01
    50.                 }
    51.             })
    52.             layer.bindPopup({
    53.                 viewer: viewer,
    54.                 showTitle: true,
    55.                 useDefaultHtmlTemplate: true,//用默认模板
    56.             });
    57.             layer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
    58.                 let infoData = {
    59.                     title: e.feature.data.properties.name || '未查到建筑名称',
    60.                     fieldsMap: [
    61.                         {
    62.                             nameC: '建筑层高：',
    63.                             value: e.feature.data.properties.floor
    64.                         }]
    65.                 }
    66.                 layer.popup.show(e.position, infoData);
    67.                 console.log(e);
    68.             })
    69.             var layer1 = viewer.imageryLayers.addImageryProvider(layer);
    70.             viewer.flyTo(layer1)
    71.         }
    72.     });
    73. script>

  • 相关阅读:
    要努力，但也别焦虑
    网络安全（黑客）自学
    Python中套接字实现服务端和客户端3-3
    Java 设计模式——状态模式
    【无标题】
    操作系统实验一 Linux基本操作
    为什么需要 Buffer Pool?
    STL模板库笔记
    卡码网语言基础课 | 12. 位置互换
    Mybatis-plus 用法
  • 原文地址：https://blog.csdn.net/u014556081/article/details/132863020