openlayers 6 draw绘画

openlayers 6 绘画

---

前言

在工作中经常会用到绘画这个功能，记录一下

---

一、官方绘图代码

html代码如下（示例）：

<div id="map" class="map"></div>
    <form class="form-inline">
      <label for="type">Geometry type &nbsp;</label>
      <select id="type">
      	// Point 点
        <option value="Point">Point</option>
        // LinString 线
        <option value="LineString">LineString</option>
        // Polygon 面
        <option value="Polygon">Polygon</option>
        // Circle 圆
        <option value="Circle">Circle</option>
      </select>
    </form>

js代码如下（示例）：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Draw, Modify, Snap} from 'ol/interaction';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';

const raster = new TileLayer({
  source: new OSM(),
});

// 这个就是绘画的图层
const source = new VectorSource();
const vector = new VectorLayer({
  source: source,
  style: new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.2)',
    }),
    stroke: new Stroke({
      color: '#ffcc33',
      width: 2,
    }),
    image: new CircleStyle({
      radius: 7,
      fill: new Fill({
        color: '#ffcc33',
      }),
    }),
  }),
});
// 初始化一个地图，将绘画的图层也放入map里面
// 当然map.addlyaers(raster) 这种添加图层的方式也是可以的哦
const map = new Map({
  layers: [raster, vector],
  target: 'map',
  view: new View({
    center: [-11000000, 4600000],
    zoom: 4,
  }),
});
// 哎，这个就牛了，Modify，修改
// 画完之后你觉得不太完美，这个就可以修改，当然它你也可以去openlayer看看它的介绍
const modify = new Modify({source: source});
// 好的，在map上添加修改这个方法
map.addInteraction(modify);

let draw, snap; 
const typeSelect = document.getElementById('type');

// 绘画的方法，叫做Draw,这里只有source和type两种方法，你可以在openlayers文档看到更多的方法。我就不写了，以防你懒得不练.
function addInteractions() {
  draw = new Draw({
  	// source 数据源
    source: source,
    // type 你所画的是类型，点，线，面,圆。
    type: typeSelect.value,
  });
  // 在地图上添加绘画的功能用的是addInteraction
  map.addInteraction(draw);
  // 这个是吸附功能，帮助你绘画的
  snap = new snap({source: source});
  // 将它添加到map上
  map.addInteraction(snap);
}

// 上面css选择时，清除掉当前页面上的方法
typeSelect.onchange = function () {
// removeInteraction移除掉这个方法，在openlayer中你可以看到很多remove的方法
  map.removeInteraction(draw);
  map.removeInteraction(snap);
  addInteractions();
};

addInteractions(); // 执行添加的这个方法

二、我的代码（绘画）

1.初始化地图

代码如下（示例）：

  data() {
    return {
      map: null,
      drawSource: null,
    }
  },
  mounted() {
    // 初始化一个地图
    this.initMap()
    // 初始化绘画图层
    this.drawLayer()
    // 绘画方法
    this.drawMethod()
  },
  methods: {
    initMap() {
      const raster = new TileLayer({
        source: new OSM()
      });
      this.map = new Map({
        layers: [raster],
        target: 'map',
        view: new View({
          center: [-11000000, 4600000],
          zoom: 4,
        }),
      });
    },
    drawLayer() {
      this.drawSource = new VectorSource();
      let vector = new VectorLayer({
        source: this.drawSource,
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
          }),
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33',
            }),
          }),
        }),
      });
      this.map.addLayer(vector)
    },
    drawMethod() {
      let draw = new Draw({
        source: this.drawSource,
        type: this.$refs.type.value,
      });
      this.map.addInteraction(draw);
      let snap = new Snap({source: this.drawSource});
      this.map.addInteraction(snap);
      const modify = new Modify({source: this.drawSource});
      this.map.addInteraction(modify);
      this.$refs.type.addEventListener("change", () => {
        this.map.removeInteraction(draw);
        this.map.removeInteraction(snap);
        this.drawMethod()
      })
    }
  }

---

~