开源GIS（七）——openlayers中单击获取要素（深度好文）

目录

 

 

一、引言

 

二、前台方法

 

1、interaction中select方法

 

2、map中forEachFeatureAtPixel方法

 

三、gis server方法

 

1、wms中getfeatureinfo

 

2、wfs中getfeature

 

四、后台方法

 

五、空间数据库方法

 

六、总结

 

---

 

一、引言

 

以前在做arcgis js开发的时候，就开始纠结单击获取要素使用哪种方法，当时是因为arcgis server正好提供了arcgis定制的服务IdentifyTask，所以当时用了arcgis server查询的。

总结一下查询方法有如下几种：

这四种各有优缺点，下面详细介绍前两种方法，后面两种方法涉及到的知识比较多，不方便展开，仅提供思路==

 

二、前台方法

 

1、interaction中select方法

 

针对矢量数据源，openlayers中提供了select交互类方面鼠标选择。

    /*overlay*/
    // Popup showing the position the user clicked
    var popup = new ol.Overlay({
        element: document.getElementById('popup'),
        autoPan:true,
        autoPanMargin:100,
        positioning:'center-right'
    });
    map.addOverlay(popup);

    /*select*/
    var selectSingleClick = new ol.interaction.Select();
    map.addInteraction(selectSingleClick);
    /*前端第一种*/
    selectSingleClick.on('select', function(e) {
        var features=e.target.getFeatures().getArray();
        var element = popup.getElement();
        if (features.length>0)
        {
            var feature=features[0];
            var type=feature.getGeometry().getType();
            var property=feature.getProperties();
            var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());
            var hdms="点名："+property["Text"];
            hdms=hdms+"<br/>";
            hdms = hdms+"图层名：:"+property["Layer"];
            hdms=hdms+"<br/>";
            hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];

            $(element).popover('destroy');
            popup.setPosition(coordinate);
            // the keys are quoted to prevent renaming in ADVANCED mode.
            $(element).popover({
                'placement': 'top',
                'animation': false,
                'html': true,
                'content': hdms
            });