vue3+openlayer 绘制多边形

 1.引入openlayer

pnpm install ol

 2.安装turf 

中文文档:GET START | Turf.js中文网

pnpm install @turf/turf

if (!drawSource.value) {
      drawSource.value = new VectorSource({
        wrapX: false
      })
      const strokeColor = "#409eff"
      const fillColor = "#abf7f582"
      openLayerViewer.value.addLayer(
        new VectorLayer({
          name: "绘制区域",
          source: drawSource.value,
          style: new Style({
            stroke: new Stroke({
              color: strokeColor, // 设置线段的颜色
              width: 2, // 设置线段的宽度
              lineDash: [5, 10] // 设置虚线
            }),
            fill: new Fill({
              color: fillColor
            })
          })
        } as any)
      )
    } else {
      // drawSource.value.clear()
    }

    const modify = new Modify({ source: drawSource.value })
    openLayerViewer.value.addInteraction(modify)

    const drawStyle = new Draw({
      source: drawSource.value,
      type: "Polygon",
      // geometryFunction: createBox(),
      style: new Style({
        stroke: new Stroke({
          color: "#409eff", // 设置边框
          width: 2 // 设置线段的宽度
        }),
        fill: new Fill({
          color: "#abf7f582"
        })
      }),
      // 绘制时点击处理事件
      condition: (evt: any) => {
        return true
      }
    })

    const tooltip: any = document.createElement("div")
    tooltip.className = "drawTooltip"
    tooltip.style.position = "absolute"
    tooltip.style.backgroundColor = "rgba(255, 255, 255, 0.7)"
    tooltip.style.border = "1px solid #ccc"
    tooltip.style.padding = "4px 8px"
    tooltip.style.fontSize = "14px"
    // 将提示框添加到地图容器中
    openLayerViewer.value.getViewport().appendChild(tooltip)
    // 监听鼠标移动事件，更新提示文字的位置
    const pointermoveHandle_1 = openLayerViewer.value.on("pointermove", (evt: any) => {
      const pixel = openLayerViewer.value.getPixelFromCoordinate(evt.coordinate)
      tooltip.style.left = pixel[0] + "px"
      tooltip.style.top = pixel[1] + "px"
      tooltip.innerHTML = "单击左键绘制多边形起点。"
    })

    let pointermoveHandle_2: any = ""
    // console.log(drawStyle,)
    // drawStyle.on("drawmodify", function () {
    //   console.log("111")
    // })
    drawStyle.on("drawstart", function () {
      unByKey(pointermoveHandle_1) // 移出监听事件
      pointermoveHandle_2 = openLayerViewer.value.on("pointermove", (evt: any) => {
        const pixel = openLayerViewer.value.getPixelFromCoordinate(evt.coordinate)
        tooltip.style.left = pixel[0] + "px"
        tooltip.style.top = pixel[1] + "px"
        tooltip.innerHTML = "单击左键绘制下一个点，双击左键结束绘制。"
      })
    })

    // 绘制结束
    drawStyle.on("drawend", function (e: any) {
      unByKey(pointermoveHandle_2) // 移出监听事件
      // 在这里移除提示文字的逻辑
      const tooltips = document.getElementsByClassName("drawTooltip")
      for (let i = 0; i < tooltips.length; i++) {
        tooltips && tooltips[i].parentNode?.removeChild(tooltips[i])
      }

      drawStyle.setActive(false) // 取消绘制活动状态
      const feature = e.feature
      const geometry = feature.getGeometry()
      // 获取矩形框选的范围
      const coordinates = geometry.getCoordinates()
      const coordinates_mercator = coordinates[0]
      const wgs84List = []
      for (const item of coordinates_mercator) {
        const pt = turf.point(item)
        const converted = turf.toWgs84(pt)
        wgs84List.push(converted.geometry.coordinates)
      }
      console.log(wgs84List)
    })

    openLayerViewer.value.addInteraction(drawStyle)
    const snap = new Snap({ source: drawSource.value })
    openLayerViewer.value.addInteraction(snap)

 

import { ref } from "vue"
import { Vector as VectorSource } from "ol/source"
import { Vector as VectorLayer } from "ol/layer"
import { Style, Stroke, Fill } from "ol/style"
import { Modify, Snap } from "ol/interaction"
import { unByKey } from "ol/Observable"
import Draw from "ol/interaction/Draw"
import * as turf from "@turf/turf"

预览demo