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

Question

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

我不想点击整张地图，只想点击那条线。

我试过将 click/singleclick 附加到 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.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: ...
      })

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

Click a line and open popup OpenLayers 3

javascript

openlayers-3