Openlayers功能选择区域是偏移的

时间:2017-08-09 12:46:12

标签: javascript openlayers

我有一个非常奇怪的问题,选择框在标记越靠近地图底部的位置越来越远。

如果标记位于地图的最顶部,则选择框位于标记的顶部,但如果标记位于地图的下方,则必须在标记下方进一步单击以进行选择。

还有其他人经历过这个吗?我正在使用Openlayers 4.1.1。以下是一些可能相关的代码块(如果可以帮助的话,我非常乐意分享更多代码!):

    var imageStyleFunction = function (feature, resolution) {
        if (feature.iconSrc) {
            var anchorX = feature.anchorX ? feature.anchorX : 0.5;
            var anchorY = feature.anchorY ? feature.anchorY : 0.5;
            return [new ol.style.Style({
                image: new ol.style.Icon({
                    src: feature.iconSrc,
                    anchor: [anchorX, anchorY]
                })
            })];
        }
    };

...

    markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: imageStyleFunction
    });

...

    selectionInteraction = new ol.interaction.Select({
        condition: ol.events.condition.click,
        //hitTolerance: 20,
        style: imageStyleFunction
    });

    selectionInteraction.on('select', function (e) {
        var userLocationFeature = _.find(e.target.getFeatures().getArray(),
        function (feature) {
            return feature.markerType === "userLocation";
        });

        if (userLocationFeature) {
            store.commit("setSelectedUserLocation", userLocationFeature);
        } else {
            store.commit("setSelectedUserLocation", null);
            selectionInteraction.getFeatures().clear();
        }
    });

...

function createMarker(location, iconFile, markerType, markerId) {
    var markerLayerSource = markerLayer.getSource();
    var markerFeature = new ol.Feature({
        geometry: new ol.geom.Point(transformLonLat(location.longitude, location.latitude))
    });
    markerFeature.iconSrc = app.config.map.iconPath + iconFile;
    if (markerType) {
        markerFeature.markerType = markerType;
    }

    if (markerId) {
        markerFeature.markerId = markerId;
    }

    markerLayerSource.addFeature(markerFeature);
}

1 个答案:

答案 0 :(得分:0)

通过调用map.updateSize()来解决Mick自己的解决方案。我还没有对它进行更密切的调查,但我认为它与我在离子应用程序初始化期间的尺寸变化有关。它至少可以快速解决更难的问题。