1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.extent');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.layer.Vector');
|
6 | goog.require('ol.source.Vector');
|
7 | goog.require('ol.style.Fill');
|
8 | goog.require('ol.style.Stroke');
|
9 | goog.require('ol.style.Style');
|
10 | goog.require('ol.style.Text');
|
11 |
|
12 | var map = new ol.Map({
|
13 | target: 'map',
|
14 | view: new ol.View({
|
15 | center: [0, 0],
|
16 | zoom: 1
|
17 | })
|
18 | });
|
19 |
|
20 | var labelStyle = new ol.style.Style({
|
21 | geometry: function(feature) {
|
22 | var geometry = feature.getGeometry();
|
23 | if (geometry.getType() == 'MultiPolygon') {
|
24 |
|
25 | var polygons = geometry.getPolygons();
|
26 | var widest = 0;
|
27 | for (var i = 0, ii = polygons.length; i < ii; ++i) {
|
28 | var polygon = polygons[i];
|
29 | var width = ol.extent.getWidth(polygon.getExtent());
|
30 | if (width > widest) {
|
31 | widest = width;
|
32 | geometry = polygon;
|
33 | }
|
34 | }
|
35 | }
|
36 | return geometry;
|
37 | },
|
38 | text: new ol.style.Text({
|
39 | font: '12px Calibri,sans-serif',
|
40 | overflow: true,
|
41 | fill: new ol.style.Fill({
|
42 | color: '#000'
|
43 | }),
|
44 | stroke: new ol.style.Stroke({
|
45 | color: '#fff',
|
46 | width: 3
|
47 | })
|
48 | })
|
49 | });
|
50 | var countryStyle = new ol.style.Style({
|
51 | fill: new ol.style.Fill({
|
52 | color: 'rgba(255, 255, 255, 0.6)'
|
53 | }),
|
54 | stroke: new ol.style.Stroke({
|
55 | color: '#319FD3',
|
56 | width: 1
|
57 | })
|
58 | });
|
59 | var style = [countryStyle, labelStyle];
|
60 |
|
61 | var vectorLayer = new ol.layer.Vector({
|
62 | source: new ol.source.Vector({
|
63 | url: 'data/geojson/countries.geojson',
|
64 | format: new ol.format.GeoJSON()
|
65 | }),
|
66 | style: function(feature) {
|
67 | labelStyle.getText().setText(feature.get('name'));
|
68 | return style;
|
69 | },
|
70 | declutter: true
|
71 | });
|
72 |
|
73 | map.addLayer(vectorLayer);
|