时间戳

首页 > 解决方案 > Openlayers：feature.get 返回属性路径

javascript - Openlayers：feature.get 返回属性路径

问题描述

我有一个带有点图层的 openlayers 地图，单击某个要素会打开一个弹出窗口。在弹出窗口中，我显示了一个可点击的链接，该链接应该指向存储在图层属性表中的 url。

但是，如果我单击该图层，则会打开一个指向“C:/Users/user/.../URL”之类的路径的链接。URL 是我想要的，但浏览器也会打开保存项目的路径。

我的代码：

map.on('click', function(event) {
var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
    if (layer === knoten) {
        return feature;
    }
});
if (feature != null) {
    var pixel = event.pixel;
    var coord = map.getCoordinateFromPixel(pixel);
    popup.setPosition(coord);
    $(elementPopup).attr('data-content', '<b>1: </b>' + '&ensp;' + feature.get('ERHEB_NR') +
        '</br><b>2: </b>' + '&emsp;&emsp;&nbsp;&nbsp;' + '<a id="link" target="_blank" rel="noopener noreferrer">Link</a>');
    $(elementPopup).popover({'placement': 'top', 'html': true});
    $(elementPopup).popover('show');

    document.getElementById('link').href = feature.get('KATASTER')
}
else {
    $(elementPopup).popover({'html': true});
    $(elementPopup).popover('hide');
}
});

如果我替换'<a id="link" target="_blank" rel="noopener noreferrer">Link</a>'了feature.get('KATASTER')正确的链接（但因为它不在语句内，所以它是不可点击的）。

标签： javascriptopenlayers

解决方案

用该选项初始化弹出框content，而不是只更新链接呢？

map.on('click', function(event) {
    var feature = map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
        if (layer === knoten) {
            return feature;
        }
    });
    // Always hide the popover
    $(elementPopup).popover('hide');
    if (feature != null) {
        var pixel = event.pixel;
        var coord = map.getCoordinateFromPixel(pixel);
        popup.setPosition(coord);

        $(elementPopup).popover({
           placement: 'top',
           animation: false,
           html: true,
           trigger: 'focus',
           title: "",
           content: '<b>1: </b>' + '&ensp;' + feature.get('ERHEB_NR') +
    '</br><b>2: </b>' + '&emsp;&emsp;&nbsp;&nbsp;' + '<a id="link" target="_blank" href="'+feature.get('KATASTER')+'" rel="noopener noreferrer">Link</a>'
        });
});

推荐阅读