5openlayers点击查询

1.前提

做webgis，一个重要功能就是点击查询，这里介绍如何使用点击查询wms图层。

2.实战

实现点击查询，可以通过openalayers获取到点击位置的坐标，传递给后端，让后端实现空间查询功能。如果是加载的是矢量瓦片图层，可以直接用前端就能获取到。这里通过WMS协议的GetFeatureInfo操作方法来实现。

export function regGetFeatureInfo(map,divId,wmsSource){	
	
	map.on('singleclick', function (evt) {
		 
	  document.getElementById(divId).innerHTML = '';
	  const viewResolution = /** @type {number} */ (map.getView().getResolution());
	  const url = wmsSource.getFeatureInfoUrl(
		evt.coordinate,
		viewResolution,
		'EPSG:4326',
		{'INFO_FORMAT': 'text/html'},
	  );
	  if (url) {
		fetch(url)
		  .then((response) => response.text())
		  .then((html) => {
			document.getElementById(divId).innerHTML = html;
		  });
	  }
	});
	
}

通过wms source的getFeatureInfoUrl方法能够构造出一个GetFeatureInfo的url，然后通过fetch方法执行查询，本例中返回的格式是text/html。通过WMS的GetCapabilities方法（http://localhost:8080/geoserver/topp/wms?service=WMS&request=GetCapabilities）可以看到Geoserver提供的WMS服务支持的返回格式有：

如果INFO_FORMAT是text/html，返回的结果是一段html代码，直接放入一个div中即可显示。

如果INFO_FORMAT是application/json，返回一个json内容。

...