如何在openlayers 3中的圖標周圍添加可點擊的邊距？

我使用openlayers 3來顯示帶有一些帶有小圖標的標記的地圖。當點擊其中一個瀏覽器時，瀏覽器切換到與該標記相關聯的另一個頁面。如何在openlayers 3中的圖標周圍添加可點擊的邊距？

的標記，目前實現的功能：

const style = new ol.style.Style({ 
    image: new ol.style.Icon({ 
     anchor: [0.5, 1.0], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'fraction', 
     src: img_url, 
    }) 
}); 

const feature = new ol.Feature({ 
    geometry: new ol.geom.Point([x, y]), 
}); 

feature.setStyle(style);

這裏是我的點擊處理程序：

map.on("click", e => { 
    map.forEachFeatureAtPixel(e.pixel, (feature) => { 
     window.location.href = "/s/" + feature.getId(); 
     return true; // stop after first feature 
    }); 
});

不幸的是，圖標非常小，因此很難打了基於觸摸的界面，例如上作爲iPad。

有沒有一種可以接受的讓目標變大的方法？我的想法如下：

爲每個標記創建一個額外的不可見標記並使其可點擊。
而不是隻使用事件的位置，我可以採樣周圍的一些像素，並使用附近的所有功能。

有沒有更好的方法來做到這一點？

來源

2016-06-15 Georg Schölly

我的建議是，你創建一個在你的圖標像一個無形的方形：

const style = [ 
    new ol.style.Style({ 
    image: new ol.style.Icon({ 
     anchor: [0.5, 1.0], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'fraction', 
     src: img_url, 
    }) 
    }), 
    new ol.style.Style({ 
    image: new ol.style.RegularShape({ 
     stroke: new ol.style.Stroke({ color: [0, 0, 0, 0] }), 
     points: 4, 
     radius: 50, // <--------- control its size 
     angle: Math.PI/4 
    }) 
    }) 
];

來源

2016-06-15 12:03:20

這種方法有一個小問題：如果不指定'fill'財產，控制檯說：*預期的顏色，卻發現「0」 *。這可能不是面向未來的。如果我提供一種顏色，我不能使它完全透明，因爲在那種情況下它不是可點擊的，所以我必須使它幾乎透明。 –

雖然我目前在版本3.8.1上停留，所以也許這在此期間已經改變。 –

@GeorgSchöllyAPI文檔說'fill'可以是'undefined'。我沒有看到3.8，3.12和最新的控制檯消息。 –

我已經開始嘗試了Jonatas'的做法，我補充一個更大的風格。這工作得很好。一個警告是，點擊某個功能後，我們必須找出哪個功能是最接近的，因爲它們可以輕鬆重疊。

在發現getClosestFeatureToCoordinate()方法後，我終於決定採用稍微不同的方法。我做的click處理一切：

map.on("click", event => { 
    const distance = feature => { 
     const coords = feature.getGeometry().getCoordinates(); 
     const pixel = map.getPixelFromCoordinate(coords); 
     const distSquared = Math.pow(event.pixel[0] - pixel[0], 2) 
          + Math.pow(event.pixel[1] - pixel[1], 2); 
     return distSquared; 
    }; 

    const clickedFeature = { feat: null, dist: Infinity }; 

    /* See if we clicked on a feature. If yes, take closest */ 
    map.forEachFeatureAtPixel(event.pixel, (feature) => { 
     const dist = distance(feature); 
     if (dist < clickedFeature.dist) { 
      clickedFeature.feat = feature; 
      clickedFeature.dist = dist; 
     } 
    }); 

    /* If we are touch-based, we also take into account clicks that happen nearby */ 
    if (!clickedFeature.feat) { 
     if (ol.has.TOUCH) { 
      const coords = this._map.getCoordinateFromPixel(event.pixel); 
      const closestFeat = this._featureSource.getClosestFeatureToCoordinate(coords); 

      const dist = distance(closestFeat); 
      /* touch size taken from Apple's guidelines */ 
      if (dist < Math.pow(22,2)) { 
       clickedFeature.feat = closestFeat; 
       clickedFeature.dist = dist; 
      } 
     } 
    } 

    /* go to station */ 
    if (clickedFeature.feat) { 
     window.location.href = "/s/" + clickedFeature.feat.getId(); 
    } 
});

來源

2016-06-16 08:49:51

如何在openlayers 3中的圖標周圍添加可點擊的邊距？

回答

相關問題