javascript - 单击一行并打开弹出窗口 OpenLayers 3

Question

我正在将 GPX 文件加载到我的 OL3 代码中。现在，我希望 GPX 可以通过一些额外的信息来点击整行。现在我终其一生都无法找到一种方法来单击为路线绘制的线。我可以使用什么监听器？

我不想点击整个 map ，而只想点击这条线。

我试过将点击/单击附加到 vector 但无济于事。

关于如何做到这一点有什么想法吗？

我的代码:

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var style = {

    'LineString': new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#000',
            width: 3
        })
    }),
    'MultiLineString': new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#000',
            width: 3
        })
    })
};

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'kust.gpx',
        format: new ol.format.GPX()
    }),
    style: function(feature) {
        return style[feature.getGeometry().getType()];
    }
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

Answer 1

尝试在 map 上添加点击，并在处理程序中检查您点击的要素。例如:

map.on('click', displayFeatureInfo); 

function displayFeatureInfo( evt ){
    //get pixel position of click event
    var pixel = evt.pixel;
    var features = [];
    //loop through all features under this pixel coordinate
    //and save them in array
    map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        features.push(feature)
    });

    //the top most feature
    var target = features[0];

    //...rest of code
    target.get('customProp')


}

编辑

您可以通过向传递的对象插入额外的属性来为您的功能添加一些额外的功能。例如:

var myFeature = new ol.Feature({
        geometry: ..., 
        labelPoint: ..,
        name:...,
        customProp1: ...,
        anothercustomProp: ...
      })