Declutter multi geometries per geometry instead of per feature
This commit is contained in:
@@ -5,7 +5,7 @@ shortdesc: Label decluttering with a custom renderer.
|
||||
resources:
|
||||
- https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
|
||||
docs: >
|
||||
Decluttering is used to avoid overlapping labels with `overflow: true` set on the text style. For MultiPolygon geometries, only the widest polygon is selected in a custom `geometry` function.
|
||||
Decluttering is used to avoid overlapping labels. The `overflow: true` setting on the text style makes it so labels that do not fit within the bounds of a polygon are also included.
|
||||
tags: "vector, decluttering, labels"
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Map from '../src/ol/Map.js';
|
||||
import View from '../src/ol/View.js';
|
||||
import {getWidth} 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';
|
||||
@@ -15,23 +14,6 @@ const map = new Map({
|
||||
});
|
||||
|
||||
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 = getWidth(polygon.getExtent());
|
||||
if (width > widest) {
|
||||
widest = width;
|
||||
geometry = polygon;
|
||||
}
|
||||
}
|
||||
}
|
||||
return geometry;
|
||||
},
|
||||
text: new Text({
|
||||
font: '12px Calibri,sans-serif',
|
||||
overflow: true,
|
||||
|
||||
Reference in New Issue
Block a user