矢量圖層的可選點有偏移量

我有一個帶GeoJSON源的矢量圖層，由點和一個LineString組成。當我點擊一個點時，我想打開一個帶有附加信息的彈出窗口。矢量圖層的可選點有偏移量

下面是一些代碼：

var style = { 
    'Point': [new ol.style.Style({ 
    image: new ol.style.Circle({ 
     fill: new ol.style.Fill({ 
     color: 'rgb(255,0,0)' 
     }), 
     radius: 5, 
     stroke: new ol.style.Stroke({ 
     color: '#000000', 
     width: 1 
     }), 
    }) 
    })], 
    'LineString': [new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#ff0000', 
     width: 3 
    }) 
    })], 
    'MultiLineString': [new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#0000ff', 
     width: 3 
    }) 
    })] 
}; 


var map = new ol.Map({ 
    target: 'map-ol-canvas', 
    interactions: ol.interaction.defaults({mouseWheelZoom: false}), 
    layers: [new ol.layer.Tile({ source: new ol.source.OSM() })], 
    view: new ol.View({ 
    zoom: 8, 
    maxZoom: 16 
    }) 
}); 
map.getView().fit(extent, map.getSize()); 

var trackSource = new ol.source.Vector({ 
    url: '/test.geojson', 
    format: new ol.format.GeoJSON() 
}); 

var track = new ol.layer.Vector({ 
    source: trackSource, 
    style: function(feature, resolution) { 
    return style[feature.getGeometry().getType()]; 
    } 
}); 
map.addLayer(track); 

var select = new ol.interaction.Select({ 
    filter: function (feature, layer) { 
    return feature.getGeometry().getType() === 'Point'; 
    } 
}); 
map.addInteraction(select); 

// When user clicks on a waypoint, show a tooltip. 
function onMouseClick(browserEvent) { 
    var coordinate = browserEvent.coordinate; 
    var pixel = map.getPixelFromCoordinate(coordinate); 
    map.forEachFeatureAtPixel(pixel, function(feature) { 
    if (feature.getGeometry().getType() === 'Point') { 
     console.log(feature.get('date')); 
    } 
    }); 
} 
map.on('click', onMouseClick);

問題：

當我直接點擊一個點沒有任何反應。當我點擊下面的幾個像素並向右或向左點擊（取決於縮放級別！）時，點將被選中，並觸發console.log。

我可以通過使用Firebox WebDeveloper插件並激活「禁用所有樣式」來解決此問題。但是，當我手動刪除所有的CSS一個接一個的行爲永遠不會消失。首先，我認爲這可能是一些繼承的填充或邊距，但目前我認爲畫布不應該受到任何CSS的影響。

關於什麼可能是錯誤的任何想法？

親切的問候，羊雜

來源

2015-09-18 haggis

爲什麼你需要'ol.interaction.Select'和'filter'？你已經在'onMouseClick'裏面檢查了。 –

這只是爲了查看兩個交互中是否出現偏移量。它確實;） – haggis

你有沒有嘗試將snaptoPixel選項設置爲false？ http://openlayers.org/en/v3.9.0/apidoc/ol.style.Circle.html – oterral

我遇到了同樣的問題。它似乎鏈接到從特定模式導航到頁面（我正在使用ajax散列頁面）。頁腳不會加載，在我與地圖上的第一個功能交互之後，會發生以下情況：

地圖跳轉，縱橫交錯/稍有塗片
頁腳顯示在我的網頁上
垂直滾動條出現

似乎問題並沒有當我從鏈接出現另一頁。

來源

2016-04-08 21:40:11 vdidxho

我有同樣的problem.Here是一些建議可以幫助你：

檢查地圖的容器的尺寸（可能是一個DIV）。
檢查地圖的大小（openlayers的地圖對象）。
比較這兩個大小來確認兩個大小是否相等。

如果不是，您可以使用map.setSize([width,height])來調整地圖的大小。

來源

2016-12-23 03:39:10 firework

ps：map的大小意味着openlayers地圖對象，而不是mapDiv的大小。 – firework

map.updateSize（）有訣竅！ – Skarafaz

矢量圖層的可選點有偏移量

回答

相關問題