点击画笔按钮
开始框画
取当前的裁剪图层为后面的图层
恢复画笔
这里提前引入了Draw
import Draw, {
createRegularPolygon, createBox } from "ol/interaction/Draw";
代码如下
<template>
<div class="container">
<div id="vue-openlayers" class="map-x"></div>
<div
id="info-box"
class="info-box"
style="width: 100px; height: 100px"
></div>
<div id="canv" style="width: 100px; height: 100px"></div>
<div class="btn">
<el-button type="primary" @click="drawLine"> 画塘口</el-button>
<el-button type="primary" @click="huanyuan"> 还原 </el-button>
</div>
</div>
</template>
<script>
import "ol/ol.css";
import {
Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import {
Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import {
Point, LineString } from "ol/geom";
import {
Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";
import Draw, {
createRegularPolygon