1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.layer.Vector');
|
5 | goog.require('ol.source.OSM');
|
6 | goog.require('ol.source.Vector');
|
7 | goog.require('ol.Feature');
|
8 | goog.require('ol.geom.LineString');
|
9 | goog.require('ol.style.Style');
|
10 | goog.require('ol.style.Stroke');
|
11 |
|
12 | var raster = new ol.layer.Tile({
|
13 | source: new ol.source.OSM()
|
14 | });
|
15 |
|
16 | var style = new ol.style.Style({
|
17 | stroke: new ol.style.Stroke({
|
18 | color: 'black',
|
19 | width: 1
|
20 | })
|
21 | });
|
22 |
|
23 | var feature = new ol.Feature(new ol.geom.LineString([[-4000000, 0], [4000000, 0]]));
|
24 |
|
25 | var vector = new ol.layer.Vector({
|
26 | source: new ol.source.Vector({
|
27 | features: [feature]
|
28 | }),
|
29 | style: style
|
30 | });
|
31 |
|
32 | var map = new ol.Map({
|
33 | layers: [raster, vector],
|
34 | target: 'map',
|
35 | view: new ol.View({
|
36 | center: [0, 0],
|
37 | zoom: 2
|
38 | })
|
39 | });
|
40 |
|
41 | var hitTolerance;
|
42 |
|
43 | var statusElement = document.getElementById('status');
|
44 |
|
45 | map.on('singleclick', function(e) {
|
46 | var hit = false;
|
47 | map.forEachFeatureAtPixel(e.pixel, function() {
|
48 | hit = true;
|
49 | }, {
|
50 | hitTolerance: hitTolerance
|
51 | });
|
52 | if (hit) {
|
53 | style.getStroke().setColor('green');
|
54 | statusElement.innerHTML = ' A feature got hit!';
|
55 | } else {
|
56 | style.getStroke().setColor('black');
|
57 | statusElement.innerHTML = ' No feature got hit.';
|
58 | }
|
59 | feature.changed();
|
60 | });
|
61 |
|
62 | var selectHitToleranceElement = document.getElementById('hitTolerance');
|
63 | var circleCanvas = document.getElementById('circle');
|
64 |
|
65 | var changeHitTolerance = function() {
|
66 | hitTolerance = parseInt(selectHitToleranceElement.value, 10);
|
67 |
|
68 | var size = 2 * hitTolerance + 2;
|
69 | circleCanvas.width = size;
|
70 | circleCanvas.height = size;
|
71 | var ctx = circleCanvas.getContext('2d');
|
72 | ctx.clearRect(0, 0, size, size);
|
73 | ctx.beginPath();
|
74 | ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI);
|
75 | ctx.fill();
|
76 | ctx.stroke();
|
77 | };
|
78 |
|
79 | selectHitToleranceElement.onchange = changeHitTolerance;
|
80 | changeHitTolerance();
|