Update label decluttering example

This commit is contained in:
Tim Schaub
2022-01-07 13:50:43 -07:00
parent 7f0b6b3f7a
commit 4ce7f77749

View File

@@ -4,12 +4,13 @@ import VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js'; import VectorSource from '../src/ol/source/Vector.js';
import View from '../src/ol/View.js'; import View from '../src/ol/View.js';
import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
import {fromLonLat} from '../src/ol/proj.js';
const map = new Map({ const map = new Map({
target: 'map', target: 'map',
view: new View({ view: new View({
center: [0, 0], center: fromLonLat([-100, 38.5]),
zoom: 1, zoom: 4,
}), }),
}); });
@@ -38,12 +39,14 @@ const countryStyle = new Style({
const style = [countryStyle, labelStyle]; const style = [countryStyle, labelStyle];
const vectorLayer = new VectorLayer({ const vectorLayer = new VectorLayer({
background: 'white',
source: new VectorSource({ source: new VectorSource({
url: 'data/geojson/countries.geojson', url: 'https://openlayers.org/data/vector/us-states.json',
format: new GeoJSON(), format: new GeoJSON(),
}), }),
style: function (feature) { style: function (feature) {
labelStyle.getText().setText(feature.get('name')); const label = feature.get('name').split(' ').join('\n');
labelStyle.getText().setText(label);
return style; return style;
}, },
declutter: true, declutter: true,