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

Javascript 单击一行并打开弹出窗口OpenLayers 3,javascript,openlayers-3,Javascript,Openlayers 3,我正在将一个GPX文件加载到我的OL3代码中。现在,我想用一些额外的信息来说明GPX使之成为可点击的。现在我找不到一种方法来点击为路线画的线。我可以使用什么样的侦听器 我不想点击整个地图,只想点击线条 我尝试将click/singleclick附加到vector,但没有效果 有什么办法吗 我的代码: var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var style = { 'LineStrin

我正在将一个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
    })
});

尝试在地图上添加单击,并在处理程序中检查单击的特征。例如:

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: ...
      })
编辑

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

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: ...
      })

Clickevent似乎有效。现在来看第2步:我能不能以某种方式将自定义数据添加到向量中,我可以在该函数中获取这些数据?没关系。通过矢量样式方法中的jQuery添加数据修复:@CaptainCarl添加了如何在功能内部传递额外信息,比jQuery方法更快、更简单……这是。除了我没有手动制作这个特性,因为它是我加载的GPX文件。有什么建议吗?@CaptainCarl我已经不在我的办公桌上了,所以我无法测试它,但是你试过循环这些功能并添加它们吗?类似于mySource.forEachFeaturefunction_feature{addProperties here…};