Question

我将GPX文件加载到我的OL3代码中。现在我想要全线，GPX可以通过一些额外的信息进行点击。现在我无法为我的生活找到一种方法来点击为路线绘制的线条。我可以使用什么样的听众？

我不想点击整个地图而只是点击该行。

我尝试将点击/单击添加到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

1 个答案: