1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.GPX');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.format.IGC');
|
6 | goog.require('ol.format.KML');
|
7 | goog.require('ol.format.TopoJSON');
|
8 | goog.require('ol.interaction');
|
9 | goog.require('ol.interaction.DragAndDrop');
|
10 | goog.require('ol.layer.Image');
|
11 | goog.require('ol.layer.Tile');
|
12 | goog.require('ol.source.BingMaps');
|
13 | goog.require('ol.source.ImageVector');
|
14 | goog.require('ol.source.Vector');
|
15 | goog.require('ol.style.Circle');
|
16 | goog.require('ol.style.Fill');
|
17 | goog.require('ol.style.Stroke');
|
18 | goog.require('ol.style.Style');
|
19 |
|
20 |
|
21 | var defaultStyle = {
|
22 | 'Point': new ol.style.Style({
|
23 | image: new ol.style.Circle({
|
24 | fill: new ol.style.Fill({
|
25 | color: 'rgba(255,255,0,0.5)'
|
26 | }),
|
27 | radius: 5,
|
28 | stroke: new ol.style.Stroke({
|
29 | color: '#ff0',
|
30 | width: 1
|
31 | })
|
32 | })
|
33 | }),
|
34 | 'LineString': new ol.style.Style({
|
35 | stroke: new ol.style.Stroke({
|
36 | color: '#f00',
|
37 | width: 3
|
38 | })
|
39 | }),
|
40 | 'Polygon': new ol.style.Style({
|
41 | fill: new ol.style.Fill({
|
42 | color: 'rgba(0,255,255,0.5)'
|
43 | }),
|
44 | stroke: new ol.style.Stroke({
|
45 | color: '#0ff',
|
46 | width: 1
|
47 | })
|
48 | }),
|
49 | 'MultiPoint': new ol.style.Style({
|
50 | image: new ol.style.Circle({
|
51 | fill: new ol.style.Fill({
|
52 | color: 'rgba(255,0,255,0.5)'
|
53 | }),
|
54 | radius: 5,
|
55 | stroke: new ol.style.Stroke({
|
56 | color: '#f0f',
|
57 | width: 1
|
58 | })
|
59 | })
|
60 | }),
|
61 | 'MultiLineString': new ol.style.Style({
|
62 | stroke: new ol.style.Stroke({
|
63 | color: '#0f0',
|
64 | width: 3
|
65 | })
|
66 | }),
|
67 | 'MultiPolygon': new ol.style.Style({
|
68 | fill: new ol.style.Fill({
|
69 | color: 'rgba(0,0,255,0.5)'
|
70 | }),
|
71 | stroke: new ol.style.Stroke({
|
72 | color: '#00f',
|
73 | width: 1
|
74 | })
|
75 | })
|
76 | };
|
77 |
|
78 | var styleFunction = function(feature, resolution) {
|
79 | var featureStyleFunction = feature.getStyleFunction();
|
80 | if (featureStyleFunction) {
|
81 | return featureStyleFunction.call(feature, resolution);
|
82 | } else {
|
83 | return defaultStyle[feature.getGeometry().getType()];
|
84 | }
|
85 | };
|
86 |
|
87 | var dragAndDropInteraction = new ol.interaction.DragAndDrop({
|
88 | formatConstructors: [
|
89 | ol.format.GPX,
|
90 | ol.format.GeoJSON,
|
91 | ol.format.IGC,
|
92 | ol.format.KML,
|
93 | ol.format.TopoJSON
|
94 | ]
|
95 | });
|
96 |
|
97 | var map = new ol.Map({
|
98 | interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
|
99 | layers: [
|
100 | new ol.layer.Tile({
|
101 | source: new ol.source.BingMaps({
|
102 | imagerySet: 'Aerial',
|
103 | key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
104 | })
|
105 | })
|
106 | ],
|
107 | target: 'map',
|
108 | view: new ol.View({
|
109 | center: [0, 0],
|
110 | zoom: 2
|
111 | })
|
112 | });
|
113 |
|
114 | dragAndDropInteraction.on('addfeatures', function(event) {
|
115 | var vectorSource = new ol.source.Vector({
|
116 | features: event.features
|
117 | });
|
118 | map.addLayer(new ol.layer.Image({
|
119 | source: new ol.source.ImageVector({
|
120 | source: vectorSource,
|
121 | style: styleFunction
|
122 | })
|
123 | }));
|
124 | map.getView().fit(vectorSource.getExtent());
|
125 | });
|
126 |
|
127 | var displayFeatureInfo = function(pixel) {
|
128 | var features = [];
|
129 | map.forEachFeatureAtPixel(pixel, function(feature) {
|
130 | features.push(feature);
|
131 | });
|
132 | if (features.length > 0) {
|
133 | var info = [];
|
134 | var i, ii;
|
135 | for (i = 0, ii = features.length; i < ii; ++i) {
|
136 | info.push(features[i].get('name'));
|
137 | }
|
138 | document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
139 | } else {
|
140 | document.getElementById('info').innerHTML = ' ';
|
141 | }
|
142 | };
|
143 |
|
144 | map.on('pointermove', function(evt) {
|
145 | if (evt.dragging) {
|
146 | return;
|
147 | }
|
148 | var pixel = map.getEventPixel(evt.originalEvent);
|
149 | displayFeatureInfo(pixel);
|
150 | });
|
151 |
|
152 | map.on('click', function(evt) {
|
153 | displayFeatureInfo(evt.pixel);
|
154 | });
|