1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.control');
|
5 | goog.require('ol.format.GeoJSON');
|
6 | goog.require('ol.geom.Circle');
|
7 | goog.require('ol.layer.Tile');
|
8 | goog.require('ol.layer.Vector');
|
9 | goog.require('ol.source.OSM');
|
10 | goog.require('ol.source.Vector');
|
11 | goog.require('ol.style.Circle');
|
12 | goog.require('ol.style.Fill');
|
13 | goog.require('ol.style.Stroke');
|
14 | goog.require('ol.style.Style');
|
15 |
|
16 |
|
17 | var image = new ol.style.Circle({
|
18 | radius: 5,
|
19 | fill: null,
|
20 | stroke: new ol.style.Stroke({color: 'red', width: 1})
|
21 | });
|
22 |
|
23 | var styles = {
|
24 | 'Point': new ol.style.Style({
|
25 | image: image
|
26 | }),
|
27 | 'LineString': new ol.style.Style({
|
28 | stroke: new ol.style.Stroke({
|
29 | color: 'green',
|
30 | width: 1
|
31 | })
|
32 | }),
|
33 | 'MultiLineString': new ol.style.Style({
|
34 | stroke: new ol.style.Stroke({
|
35 | color: 'green',
|
36 | width: 1
|
37 | })
|
38 | }),
|
39 | 'MultiPoint': new ol.style.Style({
|
40 | image: image
|
41 | }),
|
42 | 'MultiPolygon': new ol.style.Style({
|
43 | stroke: new ol.style.Stroke({
|
44 | color: 'yellow',
|
45 | width: 1
|
46 | }),
|
47 | fill: new ol.style.Fill({
|
48 | color: 'rgba(255, 255, 0, 0.1)'
|
49 | })
|
50 | }),
|
51 | 'Polygon': new ol.style.Style({
|
52 | stroke: new ol.style.Stroke({
|
53 | color: 'blue',
|
54 | lineDash: [4],
|
55 | width: 3
|
56 | }),
|
57 | fill: new ol.style.Fill({
|
58 | color: 'rgba(0, 0, 255, 0.1)'
|
59 | })
|
60 | }),
|
61 | 'GeometryCollection': new ol.style.Style({
|
62 | stroke: new ol.style.Stroke({
|
63 | color: 'magenta',
|
64 | width: 2
|
65 | }),
|
66 | fill: new ol.style.Fill({
|
67 | color: 'magenta'
|
68 | }),
|
69 | image: new ol.style.Circle({
|
70 | radius: 10,
|
71 | fill: null,
|
72 | stroke: new ol.style.Stroke({
|
73 | color: 'magenta'
|
74 | })
|
75 | })
|
76 | }),
|
77 | 'Circle': new ol.style.Style({
|
78 | stroke: new ol.style.Stroke({
|
79 | color: 'red',
|
80 | width: 2
|
81 | }),
|
82 | fill: new ol.style.Fill({
|
83 | color: 'rgba(255,0,0,0.2)'
|
84 | })
|
85 | })
|
86 | };
|
87 |
|
88 | var styleFunction = function(feature) {
|
89 | return styles[feature.getGeometry().getType()];
|
90 | };
|
91 |
|
92 | var geojsonObject = {
|
93 | 'type': 'FeatureCollection',
|
94 | 'crs': {
|
95 | 'type': 'name',
|
96 | 'properties': {
|
97 | 'name': 'EPSG:3857'
|
98 | }
|
99 | },
|
100 | 'features': [{
|
101 | 'type': 'Feature',
|
102 | 'geometry': {
|
103 | 'type': 'Point',
|
104 | 'coordinates': [0, 0]
|
105 | }
|
106 | }, {
|
107 | 'type': 'Feature',
|
108 | 'geometry': {
|
109 | 'type': 'LineString',
|
110 | 'coordinates': [[4e6, -2e6], [8e6, 2e6]]
|
111 | }
|
112 | }, {
|
113 | 'type': 'Feature',
|
114 | 'geometry': {
|
115 | 'type': 'LineString',
|
116 | 'coordinates': [[4e6, 2e6], [8e6, -2e6]]
|
117 | }
|
118 | }, {
|
119 | 'type': 'Feature',
|
120 | 'geometry': {
|
121 | 'type': 'Polygon',
|
122 | 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
|
123 | }
|
124 | }, {
|
125 | 'type': 'Feature',
|
126 | 'geometry': {
|
127 | 'type': 'MultiLineString',
|
128 | 'coordinates': [
|
129 | [[-1e6, -7.5e5], [-1e6, 7.5e5]],
|
130 | [[1e6, -7.5e5], [1e6, 7.5e5]],
|
131 | [[-7.5e5, -1e6], [7.5e5, -1e6]],
|
132 | [[-7.5e5, 1e6], [7.5e5, 1e6]]
|
133 | ]
|
134 | }
|
135 | }, {
|
136 | 'type': 'Feature',
|
137 | 'geometry': {
|
138 | 'type': 'MultiPolygon',
|
139 | 'coordinates': [
|
140 | [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
|
141 | [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
|
142 | [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
|
143 | ]
|
144 | }
|
145 | }, {
|
146 | 'type': 'Feature',
|
147 | 'geometry': {
|
148 | 'type': 'GeometryCollection',
|
149 | 'geometries': [{
|
150 | 'type': 'LineString',
|
151 | 'coordinates': [[-5e6, -5e6], [0, -5e6]]
|
152 | }, {
|
153 | 'type': 'Point',
|
154 | 'coordinates': [4e6, -5e6]
|
155 | }, {
|
156 | 'type': 'Polygon',
|
157 | 'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
|
158 | }]
|
159 | }
|
160 | }]
|
161 | };
|
162 |
|
163 | var vectorSource = new ol.source.Vector({
|
164 | features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
|
165 | });
|
166 |
|
167 | vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
|
168 |
|
169 | var vectorLayer = new ol.layer.Vector({
|
170 | source: vectorSource,
|
171 | style: styleFunction
|
172 | });
|
173 |
|
174 | var map = new ol.Map({
|
175 | layers: [
|
176 | new ol.layer.Tile({
|
177 | source: new ol.source.OSM()
|
178 | }),
|
179 | vectorLayer
|
180 | ],
|
181 | target: 'map',
|
182 | controls: ol.control.defaults({
|
183 | attributionOptions: ({
|
184 | collapsible: false
|
185 | })
|
186 | }),
|
187 | view: new ol.View({
|
188 | center: [0, 0],
|
189 | zoom: 2
|
190 | })
|
191 | });
|