1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.proj');
|
5 | goog.require('ol.source.BingMaps');
|
6 |
|
7 | var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
|
8 |
|
9 | var roads = new ol.layer.Tile({
|
10 | source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})
|
11 | });
|
12 |
|
13 | var imagery = new ol.layer.Tile({
|
14 | source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
15 | });
|
16 |
|
17 | var container = document.getElementById('map');
|
18 |
|
19 | var map = new ol.Map({
|
20 | layers: [roads, imagery],
|
21 | target: container,
|
22 | view: new ol.View({
|
23 | center: ol.proj.fromLonLat([-109, 46.5]),
|
24 | zoom: 6
|
25 | })
|
26 | });
|
27 |
|
28 | var radius = 75;
|
29 | document.addEventListener('keydown', function(evt) {
|
30 | if (evt.which === 38) {
|
31 | radius = Math.min(radius + 5, 150);
|
32 | map.render();
|
33 | evt.preventDefault();
|
34 | } else if (evt.which === 40) {
|
35 | radius = Math.max(radius - 5, 25);
|
36 | map.render();
|
37 | evt.preventDefault();
|
38 | }
|
39 | });
|
40 |
|
41 |
|
42 | var mousePosition = null;
|
43 |
|
44 | container.addEventListener('mousemove', function(event) {
|
45 | mousePosition = map.getEventPixel(event);
|
46 | map.render();
|
47 | });
|
48 |
|
49 | container.addEventListener('mouseout', function() {
|
50 | mousePosition = null;
|
51 | map.render();
|
52 | });
|
53 |
|
54 |
|
55 | imagery.on('precompose', function(event) {
|
56 | var ctx = event.context;
|
57 | var pixelRatio = event.frameState.pixelRatio;
|
58 | ctx.save();
|
59 | ctx.beginPath();
|
60 | if (mousePosition) {
|
61 |
|
62 | ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
|
63 | radius * pixelRatio, 0, 2 * Math.PI);
|
64 | ctx.lineWidth = 5 * pixelRatio;
|
65 | ctx.strokeStyle = 'rgba(0,0,0,0.5)';
|
66 | ctx.stroke();
|
67 | }
|
68 | ctx.clip();
|
69 | });
|
70 |
|
71 |
|
72 | imagery.on('postcompose', function(event) {
|
73 | var ctx = event.context;
|
74 | ctx.restore();
|
75 | });
|