二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠

 

官网demo地址：

Declutter Group 

这篇说的是如何设置矢量图层上多数据点文字不重叠。

主要是属性declutter ，用于处理矢量图层上重叠的标注和符号，为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。separate将标注和符号分别处理，避免它们之间的相互覆盖。

const overlay = new VectorLayer({
        declutter: "separate", //true false separate
        source: 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 separate
        source: 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>