1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.KML');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.layer.Vector');
|
6 | goog.require('ol.proj');
|
7 | goog.require('ol.source.BingMaps');
|
8 | goog.require('ol.source.Vector');
|
9 |
|
10 | var projection = ol.proj.get('EPSG:3857');
|
11 |
|
12 | var raster = new ol.layer.Tile({
|
13 | source: new ol.source.BingMaps({
|
14 | imagerySet: 'Aerial',
|
15 | key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
16 | })
|
17 | });
|
18 |
|
19 | var vector = new ol.layer.Vector({
|
20 | source: new ol.source.Vector({
|
21 | url: 'data/kml/2012-02-10.kml',
|
22 | format: new ol.format.KML()
|
23 | })
|
24 | });
|
25 |
|
26 | var map = new ol.Map({
|
27 | layers: [raster, vector],
|
28 | target: document.getElementById('map'),
|
29 | view: new ol.View({
|
30 | center: [876970.8463461736, 5859807.853963373],
|
31 | projection: projection,
|
32 | zoom: 10
|
33 | })
|
34 | });
|
35 |
|
36 | var displayFeatureInfo = function(pixel) {
|
37 | var features = [];
|
38 | map.forEachFeatureAtPixel(pixel, function(feature) {
|
39 | features.push(feature);
|
40 | });
|
41 | if (features.length > 0) {
|
42 | var info = [];
|
43 | var i, ii;
|
44 | for (i = 0, ii = features.length; i < ii; ++i) {
|
45 | info.push(features[i].get('name'));
|
46 | }
|
47 | document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
48 | map.getTarget().style.cursor = 'pointer';
|
49 | } else {
|
50 | document.getElementById('info').innerHTML = ' ';
|
51 | map.getTarget().style.cursor = '';
|
52 | }
|
53 | };
|
54 |
|
55 | map.on('pointermove', function(evt) {
|
56 | if (evt.dragging) {
|
57 | return;
|
58 | }
|
59 | var pixel = map.getEventPixel(evt.originalEvent);
|
60 | displayFeatureInfo(pixel);
|
61 | });
|
62 |
|
63 | map.on('click', function(evt) {
|
64 | displayFeatureInfo(evt.pixel);
|
65 | });
|