1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.GeoJSON');
|
4 | goog.require('ol.interaction');
|
5 | goog.require('ol.interaction.Modify');
|
6 | goog.require('ol.interaction.Select');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.source.Vector');
|
9 | goog.require('ol.style.Circle');
|
10 | goog.require('ol.style.Fill');
|
11 | goog.require('ol.style.Stroke');
|
12 | goog.require('ol.style.Style');
|
13 |
|
14 |
|
15 | var styleFunction = (function() {
|
16 | var styles = {};
|
17 | var image = new ol.style.Circle({
|
18 | radius: 5,
|
19 | fill: null,
|
20 | stroke: new ol.style.Stroke({color: 'orange', width: 2})
|
21 | });
|
22 | styles['Point'] = new ol.style.Style({image: image});
|
23 | styles['Polygon'] = new ol.style.Style({
|
24 | stroke: new ol.style.Stroke({
|
25 | color: 'blue',
|
26 | width: 3
|
27 | }),
|
28 | fill: new ol.style.Fill({
|
29 | color: 'rgba(0, 0, 255, 0.1)'
|
30 | })
|
31 | });
|
32 | styles['MultiLineString'] = new ol.style.Style({
|
33 | stroke: new ol.style.Stroke({
|
34 | color: 'green',
|
35 | width: 3
|
36 | })
|
37 | });
|
38 | styles['MultiPolygon'] = new ol.style.Style({
|
39 | stroke: new ol.style.Stroke({
|
40 | color: 'yellow',
|
41 | width: 1
|
42 | }),
|
43 | fill: new ol.style.Fill({
|
44 | color: 'rgba(255, 255, 0, 0.1)'
|
45 | })
|
46 | });
|
47 | styles['default'] = new ol.style.Style({
|
48 | stroke: new ol.style.Stroke({
|
49 | color: 'red',
|
50 | width: 3
|
51 | }),
|
52 | fill: new ol.style.Fill({
|
53 | color: 'rgba(255, 0, 0, 0.1)'
|
54 | }),
|
55 | image: image
|
56 | });
|
57 | return function(feature) {
|
58 | return styles[feature.getGeometry().getType()] || styles['default'];
|
59 | };
|
60 | })();
|
61 |
|
62 | var geojsonObject = {
|
63 | 'type': 'FeatureCollection',
|
64 | 'crs': {
|
65 | 'type': 'name',
|
66 | 'properties': {
|
67 | 'name': 'EPSG:3857'
|
68 | }
|
69 | },
|
70 | 'features': [{
|
71 | 'type': 'Feature',
|
72 | 'geometry': {
|
73 | 'type': 'Point',
|
74 | 'coordinates': [0, 0]
|
75 | }
|
76 | }, {
|
77 | 'type': 'Feature',
|
78 | 'geometry': {
|
79 | 'type': 'MultiPoint',
|
80 | 'coordinates': [[-2e6, 0], [0, -2e6]]
|
81 | }
|
82 | }, {
|
83 | 'type': 'Feature',
|
84 | 'geometry': {
|
85 | 'type': 'LineString',
|
86 | 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
|
87 | }
|
88 | }, {
|
89 | 'type': 'Feature',
|
90 | 'geometry': {
|
91 | 'type': 'LineString',
|
92 | 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
|
93 | }
|
94 | }, {
|
95 | 'type': 'Feature',
|
96 | 'geometry': {
|
97 | 'type': 'Polygon',
|
98 | 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
|
99 | [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
|
100 | [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
|
101 | }
|
102 | }, {
|
103 | 'type': 'Feature',
|
104 | 'geometry': {
|
105 | 'type': 'MultiLineString',
|
106 | 'coordinates': [
|
107 | [[-1e6, -7.5e5], [-1e6, 7.5e5]],
|
108 | [[-1e6, -7.5e5], [-1e6, 7.5e5], [-5e5, 0], [-1e6, -7.5e5]],
|
109 | [[1e6, -7.5e5], [15e5, 0], [15e5, 0], [1e6, 7.5e5]],
|
110 | [[-7.5e5, -1e6], [7.5e5, -1e6]],
|
111 | [[-7.5e5, 1e6], [7.5e5, 1e6]]
|
112 | ]
|
113 | }
|
114 | }, {
|
115 | 'type': 'Feature',
|
116 | 'geometry': {
|
117 | 'type': 'MultiPolygon',
|
118 | 'coordinates': [
|
119 | [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
|
120 | [-3e6, 6e6], [-5e6, 6e6]]],
|
121 | [[[-3e6, 6e6], [-2e6, 8e6], [0, 8e6],
|
122 | [0, 6e6], [-3e6, 6e6]]],
|
123 | [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
|
124 | [3e6, 6e6], [1e6, 6e6]]]
|
125 | ]
|
126 | }
|
127 | }, {
|
128 | 'type': 'Feature',
|
129 | 'geometry': {
|
130 | 'type': 'GeometryCollection',
|
131 | 'geometries': [{
|
132 | 'type': 'LineString',
|
133 | 'coordinates': [[-5e6, -5e6], [0, -5e6]]
|
134 | }, {
|
135 | 'type': 'Point',
|
136 | 'coordinates': [4e6, -5e6]
|
137 | }, {
|
138 | 'type': 'Polygon',
|
139 | 'coordinates': [
|
140 | [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
|
141 | ]
|
142 | }]
|
143 | }
|
144 | }]
|
145 | };
|
146 |
|
147 | var source = new ol.source.Vector({
|
148 | features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
|
149 | });
|
150 |
|
151 | var layer = new ol.layer.Vector({
|
152 | source: source,
|
153 | style: styleFunction
|
154 | });
|
155 |
|
156 | var overlayStyle = (function() {
|
157 | var styles = {};
|
158 | styles['Polygon'] = [
|
159 | new ol.style.Style({
|
160 | fill: new ol.style.Fill({
|
161 | color: [255, 255, 255, 0.5]
|
162 | })
|
163 | }),
|
164 | new ol.style.Style({
|
165 | stroke: new ol.style.Stroke({
|
166 | color: [255, 255, 255, 1],
|
167 | width: 5
|
168 | })
|
169 | }),
|
170 | new ol.style.Style({
|
171 | stroke: new ol.style.Stroke({
|
172 | color: [0, 153, 255, 1],
|
173 | width: 3
|
174 | })
|
175 | })
|
176 | ];
|
177 | styles['MultiPolygon'] = styles['Polygon'];
|
178 |
|
179 | styles['LineString'] = [
|
180 | new ol.style.Style({
|
181 | stroke: new ol.style.Stroke({
|
182 | color: [255, 255, 255, 1],
|
183 | width: 5
|
184 | })
|
185 | }),
|
186 | new ol.style.Style({
|
187 | stroke: new ol.style.Stroke({
|
188 | color: [0, 153, 255, 1],
|
189 | width: 3
|
190 | })
|
191 | })
|
192 | ];
|
193 | styles['MultiLineString'] = styles['LineString'];
|
194 |
|
195 | styles['Point'] = [
|
196 | new ol.style.Style({
|
197 | image: new ol.style.Circle({
|
198 | radius: 7,
|
199 | fill: new ol.style.Fill({
|
200 | color: [0, 153, 255, 1]
|
201 | }),
|
202 | stroke: new ol.style.Stroke({
|
203 | color: [255, 255, 255, 0.75],
|
204 | width: 1.5
|
205 | })
|
206 | }),
|
207 | zIndex: 100000
|
208 | })
|
209 | ];
|
210 | styles['MultiPoint'] = styles['Point'];
|
211 |
|
212 | styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
|
213 |
|
214 | return function(feature) {
|
215 | return styles[feature.getGeometry().getType()];
|
216 | };
|
217 | })();
|
218 |
|
219 | var select = new ol.interaction.Select({
|
220 | style: overlayStyle
|
221 | });
|
222 |
|
223 | var modify = new ol.interaction.Modify({
|
224 | features: select.getFeatures(),
|
225 | style: overlayStyle,
|
226 | insertVertexCondition: function() {
|
227 |
|
228 | return !select.getFeatures().getArray().every(function(feature) {
|
229 | return feature.getGeometry().getType().match(/Polygon/);
|
230 | });
|
231 | }
|
232 | });
|
233 |
|
234 | var map = new ol.Map({
|
235 | interactions: ol.interaction.defaults().extend([select, modify]),
|
236 | layers: [layer],
|
237 | target: 'map',
|
238 | view: new ol.View({
|
239 | center: [0, 1000000],
|
240 | zoom: 2
|
241 | })
|
242 | });
|