1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.GPX');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.layer.Vector');
|
6 | goog.require('ol.source.BingMaps');
|
7 | goog.require('ol.source.Vector');
|
8 | goog.require('ol.style.Circle');
|
9 | goog.require('ol.style.Fill');
|
10 | goog.require('ol.style.Stroke');
|
11 | goog.require('ol.style.Style');
|
12 |
|
13 | var raster = new ol.layer.Tile({
|
14 | source: new ol.source.BingMaps({
|
15 | imagerySet: 'Aerial',
|
16 | key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
17 | })
|
18 | });
|
19 |
|
20 | var style = {
|
21 | 'Point': new ol.style.Style({
|
22 | image: new ol.style.Circle({
|
23 | fill: new ol.style.Fill({
|
24 | color: 'rgba(255,255,0,0.4)'
|
25 | }),
|
26 | radius: 5,
|
27 | stroke: new ol.style.Stroke({
|
28 | color: '#ff0',
|
29 | width: 1
|
30 | })
|
31 | })
|
32 | }),
|
33 | 'LineString': new ol.style.Style({
|
34 | stroke: new ol.style.Stroke({
|
35 | color: '#f00',
|
36 | width: 3
|
37 | })
|
38 | }),
|
39 | 'MultiLineString': new ol.style.Style({
|
40 | stroke: new ol.style.Stroke({
|
41 | color: '#0f0',
|
42 | width: 3
|
43 | })
|
44 | })
|
45 | };
|
46 |
|
47 | var vector = new ol.layer.Vector({
|
48 | source: new ol.source.Vector({
|
49 | url: 'data/gpx/fells_loop.gpx',
|
50 | format: new ol.format.GPX()
|
51 | }),
|
52 | style: function(feature) {
|
53 | return style[feature.getGeometry().getType()];
|
54 | }
|
55 | });
|
56 |
|
57 | var map = new ol.Map({
|
58 | layers: [raster, vector],
|
59 | target: document.getElementById('map'),
|
60 | view: new ol.View({
|
61 | center: [-7916041.528716288, 5228379.045749711],
|
62 | zoom: 12
|
63 | })
|
64 | });
|
65 |
|
66 | var displayFeatureInfo = function(pixel) {
|
67 | var features = [];
|
68 | map.forEachFeatureAtPixel(pixel, function(feature) {
|
69 | features.push(feature);
|
70 | });
|
71 | if (features.length > 0) {
|
72 | var info = [];
|
73 | var i, ii;
|
74 | for (i = 0, ii = features.length; i < ii; ++i) {
|
75 | info.push(features[i].get('desc'));
|
76 | }
|
77 | document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
78 | map.getTarget().style.cursor = 'pointer';
|
79 | } else {
|
80 | document.getElementById('info').innerHTML = ' ';
|
81 | map.getTarget().style.cursor = '';
|
82 | }
|
83 | };
|
84 |
|
85 | map.on('pointermove', function(evt) {
|
86 | if (evt.dragging) {
|
87 | return;
|
88 | }
|
89 | var pixel = map.getEventPixel(evt.originalEvent);
|
90 | displayFeatureInfo(pixel);
|
91 | });
|
92 |
|
93 | map.on('click', function(evt) {
|
94 | displayFeatureInfo(evt.pixel);
|
95 | });
|