openlayers3 怎么获取当前被选中要素？

Posted 2023-05-08

参考技术A 《WebGIS之OpenLayers全面解析》是第一本全面介绍Openlayers3的中文专业书籍，于2016年7月由电子工业出版社出版，并已登录淘宝、京东、当当等网络商城。
书籍内容简介：
OpenLayers作为业内使用最为广泛的地图引擎之一，已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能，可以实现与各个不同的WebGIS平台产品相结合，开发出各具特色的WebGIS应用系统。 本书主要内容涵盖：WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能，最后给出了OpenLayers之项目实战――水利信息在线分析服务系统。Openlayers功能全且具有强大的可扩展性，使用javascript语言，支持html5新特性，不依赖任何浏览器插件，是目前GIS领域使用最为广泛的开源WebGIS开发库。本书一共由9个章节内容组成，提供近百个程序实例，基本涵盖了WebGIS开发中的全部功能，可使读者迅速入门并掌握WebGIS和Openlayers开发，提高基础知识学习效率和系统开发效率。读者只需要将书中的示例稍加改动，便可快速的将其移植到具体的WebGIS应用中。本书具体内容安排如下：
第一章 概述：介绍了什么是WebGIS，并对目前常见的开源WebGIS软件进行了介绍。
第二章 WebGIS开发基础：对WebGIS开发涉及到的各种基础开发知识进行了讲解，指导读者快速入门WebGIS。
第三章 Openlayers开发基础：对Openlayers Javascript开发库的框架设计、API组成和开发调试方式进行了讲解，指导读者快速了解Openlayers。
第四章 Openlayers快速入门：对Openlayers中提供的常用的10个控件的二次开发进行了讲解，指导读者快速开发出一个简单的网络地图应用。
第五章 Openlayers之多源数据展示篇：通过丰富的示例讲解了Openlayers中如何显示来自各种网络地图服务商提供的地图数据，指导读者实现各种网络地图、KML、GPX、GeoJSON等开放数据源的叠加显示。
第六章 Openlayers之图形绘制篇：本章重点讲解了WebGIS应用中常用的点、线、矩形、多边形、圆等浏览器客户端的图形绘制功能，指导读者开发出各种鼠标交互图形绘制功能。
第七章 Openlayers之OGC篇：对Openlayers中如何加载WMS、WMTS、WFS、WCS图层进行了示例讲解，指导读者快速掌握OGC服务数据的对接。
第八章 Openlayers之高级功能篇：对Openlayers中投影、热区、聚合标注、热点图、统计图、标绘等高级功能进行了示例讲解，指导读者快速高效地开发高级WebGIS功能。
第九章 Openlayers之项目实战：结合一个具体的项目需求进行开发实战，配以详细的程序示例，讲解如何将Openlayers中的常用功能应用到项目实践中，指导读者基于前面章节中的Openlayers开发知识进行WebGIS系统开发。
本书可用于开设GIS专业的各大院校作为网络GIS课程的教材和教辅参考书，本书迎合WebGIS客户端开发技术的趋势和读者需求，适时推出本书，可作为学习WebGIS和Openlayers的入门及高级应用教材，也可供GIS领域科研工作者、高校师生及IT技术人员作为技术参考书。本回答被提问者和网友采纳

在点击时从多个Geoserver图层获取要素属性 - 打开图层3

我正在尝试从地图上的多个图层中获取属性，使用OpenLayers 3和Geoserver提供的图层。

我找到了这个片段，但它使用的是旧版本的Open Layers，我没有发现任何与Open Layers 3相同的方式

http://dev.openlayers.org/examples/getfeatureinfo-popup.html

答案

这似乎有效..第一个答案的简单变化 - 如果存在重叠的特征，这将从多个层和每个层中的多个要素中检索和显示属性

var layerlist = [wmsLayer, wmsLayer2];
var info = [];

map.on('singleclick', function(evt) {
  info = [];

for (i=0; i<layerlist.length; i++)
  getInfo(evt, layerlist[i]);
});

function getInfo(evt, layer) {
  var resolution = map.getView().getResolution();
  var coordinate = evt.coordinate;
  var pixel = evt.pixel;
  var thislayer = layer.getSource().getParams().LAYERS;


  var url = layer.getSource().getGetFeatureInfoUrl(evt.coordinate,
    resolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });

if (url) {
      var parser = new ol.format.GeoJSON();
        var lookup = {};
       $.ajax({url: url,
          dataType: 'json',
          success:function(response) {
            var result = parser.readFeatures(response);
            if ((result.length > 0) && (wmsLayer.getVisible()==true)) {
              for (var i = 0, ii = result.length; i < ii; ++i) {
               var text = result[i].get("id");
               var param_name; 
               // to populate different field values from different layers in info popup
               if (thislayer == 'thisname' ){

                 param_name = result[i].get("param1");
               } else {
                 param_name = result[i].get("param2");
               }

                    info.push( param_name); 
              }
                content.innerHTML  = '<p><strong>ID: </strong>' + info.join(', ');


           overlay.setPosition(coordinate);
        }
      }
    });
  }

另一答案

OpenLayers示例WMS GetFeatureInfo (Layers)正好显示了这一点。

<script>
  var wmsSource = new ol.source.TileWMS({
    url: 'https://ahocevar.com/geoserver/wms',
 // Add as many layers as you like here!! 
    params: {'LAYERS': 'ne:ne', 'TILED': true},
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
  });

  var wmsLayer = new ol.layer.Tile({
    source: wmsSource
  });

  var view = new ol.View({
    center: [0, 0],
    zoom: 1
  });

  var map = new ol.Map({
    layers: [wmsLayer],
    target: 'map',
    view: view
  });

  map.on('singleclick', function(evt) {
    document.getElementById('info').innerHTML = '';
    var viewResolution = /** @type {number} */ (view.getResolution());
// Here all the layers in the wmsSource will be added to the URL
    var url = wmsSource.getGetFeatureInfoUrl(
        evt.coordinate, viewResolution, 'EPSG:3857',
        {'INFO_FORMAT': 'text/html'});
    if (url) {
      document.getElementById('info').innerHTML =
          '<iframe seamless src="' + url + '"></iframe>';
    }
  });