openlayer实现图层点击响应功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pdw521/article/details/79231934

方法：

//地图Hover事件监听

function ListMapHoverkFunc()
{
    var selectHover = new ol.interaction.Select({
        condition: ol.events.condition.pointerMove
    });
    map.addInteraction(selectHover);
}




//地图点击事件监听
function ListMapClickFunc()
{
    var selectClick = new ol.interaction.Select({
        condition: ol.events.condition.click
    });
    //鼠标点击地图叠加要素监听函数
    map.addInteraction(selectClick);


    map.on('click', function (evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
            return feature;
        });


        if (feature != undefined && feature.get("is_Gq")=="true") {
            alert("名称：" + feature.get("name")+"编码："+feature.get("id"));
        }

    });

}

图层数据：

var cg;
function getCgLyr() {
    var geojsonObject = {
        "type": "FeatureCollection", "features": [
        {
        "type": "Feature", "geometry": { "type": "LineString", "coordinates": [[13573970.118557936, 3633242.5444948766],...,[13239428.843400298, 3787373.647233305]] },
        "properties": { "name": "cg", "queryargs": "taihu_js", "id": "F01", "is_Gq": "true" }
        }
        ]
    };


    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });


    changjiang = new ol.layer.Vector({
        source: vectorSource
    });


    return changjiang;
}