8. OpenLayers 绘画元素，画点、画线、画面、画圆（结合Vue 详细教程）

目录

OpenLayers 鼠标自由绘制元素（画点、画线、画面、画圆）

效果图：

一、创建地图

 二、实现绘制功能

 三、清空绘制和退出绘制模式

四、完整代码

总结：

---

OpenLayers 鼠标自由绘制元素（画点、画线、画面、画圆）

在本文中，我们将介绍如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。

效果图：

一、创建地图

首先，我们需要在Vue组件中创建一个地图。这里我们使用了ArcGIS World Street Map作为底图，并添加了一个矢量图层用于显示用户的绘制结果。

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 vector = new VectorLayer({
    source: this.source
  });

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

 二、实现绘制功能

在OpenLayers中，我们可以通过添加`Draw`交互控件来实现绘制功能。`Draw`控件需要指定一个矢量源和绘制类型。当用户在地图上进行绘制时，绘制的结果会被添加到矢量源中。

addInteraction(type) {
  // 添加交互绘制控件
  this.draw = new Draw({
    source: this.source,
    type: type
  });
  this.map.addInteraction(this.draw);
}
我们为每个绘制按钮添加了点击事件处理函数，这些函数会调用`addInteraction`方法来添加相应类型的绘制控件。

drawPoint() {
  // 绘制点
  this.addInteraction('Point');
},
drawLine() {
  // 绘制线
  this.addInteraction('LineString');
},
drawPolygon() {
  // 绘制面
  this.addInteraction('Polygon');
},
drawCircle() {
  // 绘制圆
  this.addInteraction('Circle');
},

 三、清空绘制和退出绘制模式

当用户点击“清空”按钮时，我们会清空矢量源中的所有要素；当用户点击“退出”按钮时，我们会移除当前的绘制控件。

clearDraw() {
  // 清空绘制
  this.source.clear();
},
exitDraw() {
  // 退出绘制模式
  if (this.draw) {
    this.map.removeInteraction(this.draw);
    this = null;
  }
}

四、完整代码

<template>
  <div>
    <div ref="map" class="map"></div>
    <div class="btns">
      <button @click="drawPoint">画点</button>
      <button @click="drawLine">画线</button>
      <button @click="drawPolygon">画面</button>
      <button @click="drawCircle">画圆</button>
      <button @click="clearDraw">清空</button>
      <button @click="exitDraw">退出</button>
    </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 { fromLonLat } from "ol/proj";
  import XYZ from "ol/source/XYZ";
  import Draw from "ol/interaction/Draw";
  import VectorSource from "ol/source/Vector";
  import VectorLayer from "ol/layer/Vector";

  export default {
    name: "OlMap",
    data() {
      return {
        map: null,
        draw: null,
        source: new VectorSource()
      };
    },
    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 vector = new VectorLayer({
          source: this.source
        });

        // 创建地图容器
        this.map = new Map({
          target: this.$refs.map,
          layers: [arcGISLayer, vector],
          view: new View({
            center: fromLonLat([120, 30]),
            zoom: 8
          })
        });
      },
      addInteraction(type) {
        // 添加交互绘制控件
        this.draw = new Draw({
          source: this.source,
          type: type
        });
        this.map.addInteraction(this.draw);
      },
      drawPoint() {
        //退出其他绘制
        this.exitDraw();
        // 绘制点
        this.addInteraction("Point");
      },
      drawLine() {
        //退出其他绘制
        this.exitDraw();
        // 绘制线
        this.addInteraction("LineString");
      },
      drawPolygon() {
        //退出其他绘制
        this.exitDraw();
        // 绘制面
        this.addInteraction("Polygon");
      },
      drawCircle() {
        //退出其他绘制
        this.exitDraw();
        // 绘制圆
        this.addInteraction("Circle");
      },
      clearDraw() {
        // 清空绘制
        this.source.clear();
      },
      exitDraw() {
        // 退出绘制模式
        if (this.draw) {
          this.map.removeInteraction(this.draw);
          this.draw = null;
        }
      }
    }
  };
</script>

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  .btns {
    position: fixed;
    top: 100px;
    left: 200px;
  }
</style>

总结：

 本文介绍了如何在Vue中使用OpenLayers库来实现鼠标绘制点、线、面、圆的功能，并提供清空绘画和退出绘制模式的操作。 首先，我们需要创建一个地图容器，并添加底图和矢量图层。底图使用了ArcGIS World Street Map，矢量图层用于显示用户的绘制结果。 然后，我们通过添加Draw交互控件来实现绘制功能。每个绘制按钮都有一个点击事件处理函数，调用addInteraction方法来添加相应类型的绘制控件。 最后，我们提供了清空绘制和退出绘制模式的操作。清空绘制会清空矢量源中的所有要素，退出绘制模式会移除当前的绘制控件。 希望本文对你在Vue中使用OpenLayers实现鼠标绘制功能有所帮助。