?

官網demo地址：

Declutter Group?

這篇說的是如何設置矢量圖層上多數據點文字不重疊。

主要是屬性declutter ，用于處理矢量圖層上重疊的標注和符號，為true時啟用去重疊功能。所有矢量特征的標注和符號都會被處理以避免重疊。false則與之相反。separate將標注和符號分別處理，避免它們之間的相互覆蓋。

const overlay = new VectorLayer({declutter: "separate", //true false separatesource: new VectorSource({features: [new Feature({geometry: new Point([116.2, 39.8]),text: "111",}),new Feature({geometry: new Point([116.4, 39.7]),text: "222",}),new Feature({geometry: new Point([116.0, 39.6]),text: "333",}),new Feature({geometry: new Point([116.5, 39.5]),text: "444",}),],}),});

完整代碼：

<template><div class="box"><h1>DeclutterGroup避免矢量圖層的文字重疊</h1><div id="map"></div></div>
</template><script>
import { Feature, Map, View } from "ol/index.js";
import { Group as LayerGroup, Vector as VectorLayer } from "ol/layer.js";
import { Point } from "ol/geom.js";
import { Vector as VectorSource } from "ol/source.js";
import { apply } from "ol-mapbox-style";
import { fromExtent } from "ol/geom/Polygon.js";
import { getCenter } from "ol/extent.js";export default {data() {return {map: null,};},methods: {initMap() {const square = [-12e6, 3.5e6, -10e6, 5.5e6];const overlay = new VectorLayer({declutter: "separate", //true false separatesource: new VectorSource({features: [new Feature({geometry: new Point([116.2, 39.8]),text: "111",}),new Feature({geometry: new Point([116.4, 39.7]),text: "222",}),new Feature({geometry: new Point([116.0, 39.6]),text: "333",}),new Feature({geometry: new Point([116.5, 39.5]),text: "444",}),],}),style: {"stroke-color": "rgba(180, 180, 255, 1)","stroke-width": 1,"fill-color": "rgba(200, 200, 255, 0.85)","text-value": ["get", "text"],"text-font": "bold 14px sans-serif","text-offset-y": -12,"text-overflow": true,"circle-radius": 5,"circle-fill-color": "rgba(180, 180, 255, 1)","circle-stroke-color": "rgba(255, 255, 255, 1)",},});const map = new Map({target: "map",	view: new View({projection: "EPSG:4326",center: [116.4, 39.9],zoom: 8,}),layers: [overlay],});},},mounted() {this.initMap();},
};
</script>
<style scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
.map .ol-rotate {left: 0.5em;bottom: 0.5em;top: auto;right: auto;
}
.map:-webkit-full-screen {height: 100%;margin: 0;
}
.map:fullscreen {height: 100%;
}
</style>