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

最新推荐文章于 2025-06-04 23:38:34 发布

BUG创建者

最新推荐文章于 2025-06-04 23:38:34 发布

阅读量356

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript vue.js openlayers

本文链接：https://blog.youkuaiyun.com/wzwzwz555/article/details/141159883

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