ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import * as _ol_extent_ from '../src/ol/extent.js';
|
|
import GeoJSON from '../src/ol/format/GeoJSON.js';
|
|
import VectorLayer from '../src/ol/layer/Vector.js';
|
|
import VectorSource from '../src/ol/source/Vector.js';
|
|
import Fill from '../src/ol/style/Fill.js';
|
|
import Stroke from '../src/ol/style/Stroke.js';
|
|
import Style from '../src/ol/style/Style.js';
|
|
import Text from '../src/ol/style/Text.js';
|
|
|
|
const map = new Map({
|
|
target: 'map',
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 1
|
|
})
|
|
});
|
|
|
|
const labelStyle = new Style({
|
|
geometry: function(feature) {
|
|
let geometry = feature.getGeometry();
|
|
if (geometry.getType() == 'MultiPolygon') {
|
|
// Only render label for the widest polygon of a multipolygon
|
|
const polygons = geometry.getPolygons();
|
|
let widest = 0;
|
|
for (let i = 0, ii = polygons.length; i < ii; ++i) {
|
|
const polygon = polygons[i];
|
|
const width = _ol_extent_.getWidth(polygon.getExtent());
|
|
if (width > widest) {
|
|
widest = width;
|
|
geometry = polygon;
|
|
}
|
|
}
|
|
}
|
|
return geometry;
|
|
},
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
overflow: true,
|
|
fill: new Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#fff',
|
|
width: 3
|
|
})
|
|
})
|
|
});
|
|
const countryStyle = new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.6)'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#319FD3',
|
|
width: 1
|
|
})
|
|
});
|
|
const style = [countryStyle, labelStyle];
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: new VectorSource({
|
|
url: 'data/geojson/countries.geojson',
|
|
format: new GeoJSON()
|
|
}),
|
|
style: function(feature) {
|
|
labelStyle.getText().setText(feature.get('name'));
|
|
return style;
|
|
},
|
|
declutter: true
|
|
});
|
|
|
|
map.addLayer(vectorLayer);
|