diff --git a/examples/hit-tolerance.html b/examples/hit-tolerance.html new file mode 100644 index 0000000000..dc55ff516c --- /dev/null +++ b/examples/hit-tolerance.html @@ -0,0 +1,25 @@ +--- +layout: example.html +title: Hit Tolerance +shortdesc: Example using the hitTolerance parameter. +docs: > + By default, the map.forEachFeatureAtPixel() function only considers features that are directly under the provided + pixel. This can make it difficult to interact with features on touch devices. To consider features within some + distance of the provided pixel, use the hitTolerance option. For example, + map.forEachFeatureAtPixel(pixel, callback, {hitTolerance: 3}) will call the callback with all features that are + within three pixels of the provided pixel. +tags: "hitTolerance" +--- +
+ diff --git a/examples/hit-tolerance.js b/examples/hit-tolerance.js new file mode 100644 index 0000000000..bc3f9612be --- /dev/null +++ b/examples/hit-tolerance.js @@ -0,0 +1,80 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); +goog.require('ol.Feature'); +goog.require('ol.geom.LineString'); +goog.require('ol.style.Style'); +goog.require('ol.style.Stroke'); + +var raster = new ol.layer.Tile({ + source: new ol.source.OSM() +}); + +var style = new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: 'black', + width: 1 + }) +}); + +var feature = new ol.Feature(new ol.geom.LineString([[-4000000, 0], [4000000, 0]])); + +var vector = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: [feature] + }), + style: style +}); + +var map = new ol.Map({ + layers: [raster, vector], + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); + +var hitTolerance; + +var statusElement = document.getElementById('status'); + +map.on('singleclick', function(e) { + var hit = false; + map.forEachFeatureAtPixel(e.pixel, function() { + hit = true; + }, { + hitTolerance: hitTolerance + }); + if (hit) { + style.getStroke().setColor('green'); + statusElement.innerHTML = ' A feature got hit!'; + } else { + style.getStroke().setColor('black'); + statusElement.innerHTML = ' No feature got hit.'; + } + feature.changed(); +}); + +var selectHitToleranceElement = document.getElementById('hitTolerance'); +var circleCanvas = document.getElementById('circle'); + +var changeHitTolerance = function() { + hitTolerance = parseInt(selectHitToleranceElement.value, 10); + + var size = 2 * hitTolerance + 2; + circleCanvas.width = size; + circleCanvas.height = size; + var ctx = circleCanvas.getContext('2d'); + ctx.clearRect(0, 0, size, size); + ctx.beginPath(); + ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); +}; + +selectHitToleranceElement.onchange = changeHitTolerance; +changeHitTolerance(); diff --git a/examples/select-features.html b/examples/select-features.html index 697b309a39..c7640d8514 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -19,12 +19,4 @@ tags: "select, vector" 0 selected features -