124.在 Vue3 中使用 OpenLayers 实现编辑事件 modifystart 和 modifyend

吉檀迦俐

于 2025-05-12 09:55:21 发布

阅读量220

点赞数 7

分类专栏： Vue3+OpenLayers 文章标签： vue.js 前端 javascript 开发语言 typescript ecmascript 前端框架

本文链接：https://blog.csdn.net/Miller777_/article/details/147889700

版权

Vue3+OpenLayers 专栏收录该内容

132 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

目标效果

使用 OpenLayers 绘制一个多边形。
点击按钮后启动编辑模式。
编辑开始时触发 modifystart，弹出提示。
编辑完成时触发 modifyend，并自动关闭编辑模式。

本文将详细讲解如何在 Vue 3 中使用 OpenLayers 实现图形的绘制与编辑，并监听 modifystart 和 modifyend 两个关键事件，适合正在学习地图可视化或构建 Web GIS 应用的开发者。

📌 一、前言

OpenLayers 是一款功能强大的 Web 地图渲染库，支持包括图层控制、绘图、空间分析等丰富功能。在实际项目中，我们常常需要让用户绘制图形后再进行编辑，例如修改多边形、线条的节点位置。

Vue 3 引入了 Composition API，更加灵活地组织逻辑代码。今天我们就结合二者，来实现一个实用的图形编辑示例。

⚙️ 二、环境依赖

请确保你的项目中已安装以下依赖：

npm install ol element-plus

并在 main.js 中引入 Element Plus：

import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 
app.use(ElementPlus)

🧱 四、完整代码实现（Vue 3 + Composition API）

<!--
 * @Author: 彭麒
 * @Date: 2025/5/12
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers实现编辑事件modifystart和modifyend</div>
    </div>
    <h4>
      <el-button type="success" size="small" @click="runModify">启动编辑</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import OSM from 'ol/source/OSM'
import VectorSource from 'ol/source/Vector'
import Draw from 'ol/interaction/Draw'
import Modify from 'ol/interaction/Modify'
import Style from 'ol/style/Style'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import CircleStyle from 'ol/style/Circle'
import { ElMessage } from 'element-plus'

// refs 和变量
const type = ref('Polygon')
const map = ref(null)
const draw = ref(null)
const modify = ref(null)
const source = new VectorSource({ wrapX: false })

// 启动编辑功能
const runModify = () => {
  modify.value = new Modify({ source })
  map.value.addInteraction(modify.value)

  modify.value.on('modifystart', () => {
    ElMessage.success('开始修改编辑了')
  })

  modify.value.on('modifyend', () => {
    map.value.removeInteraction(modify.value)
    ElMessage.error('停止修改编辑')
  })
}

// 绘制图形
const startDraw = () => {
  if (draw.value !== null) {
    map.value.removeInteraction(draw.value)
  }

  if (type.value !== 'None') {
    draw.value = new Draw({
      source,
      type: type.value,
      style: new Style({
        fill: new Fill({ color: '#0f0' }),
        stroke: new Stroke({ color: '#f00', width: 2 }),
        image: new CircleStyle({
          radius: 5,
          fill: new Fill({ color: '#00ff00' }),
        }),
      }),
    })

    map.value.addInteraction(draw.value)

    draw.value.on('drawend', () => {
      map.value.removeInteraction(draw.value)
    })
  }
}

// 初始化地图
const initMap = () => {
  const raster = new TileLayer({
    source: new OSM(),
  })

  const vector = new VectorLayer({
    source,
    style: new Style({
      fill: new Fill({ color: '#00f' }),
      stroke: new Stroke({ color: '#ff0', width: 2 }),
      image: new CircleStyle({
        radius: 5,
        fill: new Fill({ color: '#ff0000' }),
      }),
    }),
  })

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [raster, vector],
    view: new View({
      projection: 'EPSG:4326',
      center: [113.1206, 23.034996],
      zoom: 10,
    }),
  })
}

// 生命周期挂载
onMounted(() => {
  initMap()
  startDraw()
})
</script>

<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 420px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>