openlayer+ geoserver 单击获取要素

在OpenLayers中，可以通过单击地图来获取要素。下面是一个简单的示例代码：

// 创建一个地图对象
var map = new ol.Map({
  target: 'map',
  layers: [
    // 添加一个OSM图层
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

// 创建一个WFS源
var wfsSource = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function(extent) {
    return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=workspace:layername&' +
        'outputFormat=application/json&srsname=EPSG:3857&' +
        'bbox=' + extent.join(',') + ',EPSG:3857';
  },
  strategy: ol.loadingstrategy.bbox
});

// 创建一个矢量图层
var vectorLayer = new ol.layer.Vector({
  source: wfsSource
});

// 将矢量图层添加到地图中
map.addLayer(vectorLayer);

// 监听地图的单击事件
map.on('click', function(evt) {
  map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    // 处理点击事件，获取要素信息
    console.log(feature.getProperties());
  });
});

上述代码中，我们首先创建了一个地图对象，并添加了一个OSM图层。然后，我们创建了一个WFS源，并指定了WFS服务的地址和参数。接下来，我们创建了一个矢量图层，并将WFS源添加到该图层中。最后，我们监听地图的单击事件，并在事件处理函数中使用`forEachFeatureAtPixel`方法来获取点击位置的要素信息。

请注意，上述代码中的`workspace:layername`需要替换为实际的工作空间和图层名称，`http://localhost:8080/geoserver/wfs`需要替换为实际的GeoServer的WFS服务地址。