5. OpenLayers 添加Overlay文字信息（结合Vue 详细教程）

目录

目录

OpenLayers 添加Overlay文字信息（结合Vue 详细教程）

效果截图：

1.添加文本显示元素

2.设置元素样式风格

3.将元素添加进openlayers

4.完整代码

---

OpenLayers 添加Overlay文字信息（结合Vue 详细教程）

在本教程中，我们将向您展示如何在Vue2和OpenLayers中添加Overlay。Overlay是一种在地图上显示额外信息的方法，例如标签、弹出窗口等。我们将在一个已有的Vue2和OpenLayers项目中添加Overlay，并将其放置在多边形的中心位置。

效果截图：

1.添加文本显示元素

首先，我们需要在<template>部分添加一个新的<div>，用于显示Overlay内容：

<template>
  <div>
    <div ref="map" class="map"></div>
    <div ref="overlay" class="overlay">
      <div class="overlay-content"></div>
    </div>
  </div>
</template>

2.设置元素样式风格

接下来，在<style>部分添加一些CSS样式，以便正确显示Overlay：

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  .overlay {
    position: absolute;
    background-color: rgba(117, 140, 240, 0.596);
    border: 1px solid #15377c;
    padding: 10px;
    border-radius: 4px;
    min-width: 100px;
  }
  .overlay-content {
    font-size: 14px;
  }
</style>

3.将元素添加进openlayers

最后，在<script>部分，导入Overlay模块，并在createMap()方法中创建一个新的Overlay实例，将其添加到地图上：

import Overlay from "ol/Overlay";

// ...

methods: {
  createMap() {
    // ...

    // 创建矢量图层
    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        features: [pointFeature, lineFeature, polygonFeature]
      }),
      style: styleFunction
    });

    // 将矢量图层添加到地图上
    map.addLayer(vectorLayer);

    // 计算多边形的中心点
    const polygonCenter = polygonFeature.getGeometry().getInteriorPoint().getCoordinates();

    // 创建Overlay
    const overlay = new Overlay({
      element: this.$refs.overlay,
      position: polygonCenter,
      positioning: "bottom-center",
      offset: [0, -10]
    });

    // 将Overlay添加到地图上
    map.addOverlay(overlay);

    // 设置Overlay内容
    this.$refs.overlay.querySelector(".overlay-content").innerHTML = "这是一个多边形";
  }
}

在上述代码中，我们首先计算了多边形的中心点，然后创建了一个新的Overlay实例。我们将this.$refs.overlay作为Overlay的元素，并将多边形的中心点作为Overlay的位置。我们还设置了positioning属性为bottom-center，以便Overlay在多边形中心点的正下方显示。最后，我们设置了一个偏移量，使Overlay在垂直方向上稍微上移。

现在，您已经成功地在Vue和OpenLayers项目中添加了一个Overlay，并将其放置在多边形的中心位置。您可以根据需要自定义Overlay的内容和样式。希望这篇教程对您有所帮助！

4.完整代码

<template>
  <div>
    <div ref="map" class="map"></div>
    <div ref="overlay" class="overlay">
      <div class="overlay-content"></div>
    </div>
  </div>
</template>

<script>
  import "ol/ol.css";
  import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import Feature from "ol/Feature";
  import Point from "ol/geom/Point";
  import LineString from "ol/geom/LineString";
  import Polygon from "ol/geom/Polygon";
  import { fromLonLat } from "ol/proj";
  import { Circle, Fill, Stroke, Style } from "ol/style";
  import XYZ from "ol/source/XYZ";
  import Overlay from "ol/Overlay";

  export default {
    name: "OlMap",
    mounted() {
      // 创建地图
      this.createMap();
    },
    methods: {
      createMap() {
        // 创建ArcGIS World Street Map图层
        const arcGISLayer = new TileLayer({
          source: new XYZ({
            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
          })
        });

        // 创建地图容器
        const map = new Map({
          target: this.$refs.map,
          layers: [arcGISLayer],
          view: new View({
            center: fromLonLat([120, 30]),
            zoom: 8
          })
        });

        // 绘制点、线、面要素
        const pointFeature = new Feature({
          geometry: new Point(fromLonLat([120, 30])),
          name: "Point"
        });
        const lineFeature = new Feature({
          geometry: new LineString([fromLonLat([119, 29]), fromLonLat([120, 31])]),
          name: "Line"
        });
        const polygonFeature = new Feature({
          geometry: new Polygon([
            [
              fromLonLat([121, 29]),
              fromLonLat([122, 29]),
              fromLonLat([122, 30]),
              fromLonLat([121, 30]),
              fromLonLat([121, 29])
            ]
          ]),
          name: "Polygon"
        });

        // 样式设置
        const styleFunction = feature => {
          const geometryType = feature.getGeometry().getType();

          const styles = {
            Point: new Style({
              image: new Circle({
                radius: 10,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 0.6)"
                })
              })
            }),
            LineString: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 0.6)",
                width: 5
              })
            }),
            Polygon: new Style({
              fill: new Fill({
                color: "rgba(0, 255, 0, 0.4)"
              }),
              stroke: new Stroke({
                color: "rgba(0, 255, 0, 1)",
                width: 3
              })
            })
          };

          return styles[geometryType];
        };

        // 创建矢量图层
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: styleFunction
        });

        // 将矢量图层添加到地图上
        map.addLayer(vectorLayer);

        // 计算多边形的中心点
        const polygonCenter = polygonFeature.getGeometry().getInteriorPoint().getCoordinates();

        // 创建Overlay
        const overlay = new Overlay({
          element: this.$refs.overlay,
          position: polygonCenter,
          positioning: "bottom-center",
          offset: [0, -10]
        });

        // 将Overlay添加到地图上
        map.addOverlay(overlay);

        // 设置Overlay内容
        this.$refs.overlay.querySelector(".overlay-content").innerHTML = "这是一个多边形";
      }
    }
  };
</script>

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  .overlay {
    position: absolute;
    background-color: rgba(117, 140, 240, 0.596);
    border: 1px solid #15377c;
    padding: 10px;
    border-radius: 4px;
    min-width: 100px;
  }
  .overlay-content {
    font-size: 14px;
  }
</style>