官网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>