vue2+OpenLayers 天地图上画图层(3)把当前的图层放上去

点击画笔按钮
开始框画
取当前的裁剪图层为后面的图层
恢复画笔
这里提前引入了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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值