【GeoJSON在线编辑平台】（1）创建地图+要素绘制+折点编辑+拖拽移动

🕗 发布于 2024-11-05 03:18 WebGIS OpenLayers javascript GIS 前端

前言

简单实现一下地图加载、要素绘制、折点编辑和拖拽移动。打算统一都写到一个类里面。
为了快速实现，直接去参考了官方案例。

创建地图

pnpm install ol

加载地图

在这里，我们创建一个 mapView.js 的文件专门用来放地图和视图相关的方法，需要时引用即可。

/*
 * @Date: 2024-10-31 16:17:31
 * @LastEditors: ReBeX  cswwwx@gmail.com
 * @LastEditTime: 2024-11-04 11:24:42
 * @FilePath: \geojson-editor-ol\src\utils\mapView.js
 * @Description: 地图及视图相关方法
 * @Reference: https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
 */

import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import { get } from 'ol/proj.js'
import OSM from 'ol/source/OSM.js'
import View from 'ol/View.js'
import 'ol/ol.css'

/**
 * @description: 地图：简易初始化
 * @return {*}
 */
export function initMap() {
  const map = new Map({
    target: 'map',
    controls: [],
    view: new View({
      center: [0, 0],
      zoom: 1,
      extent: get('EPSG:3857').getExtent(),
    }),
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
  })

  return map
}

实现绘制

在这里插入图片描述

代码参考自官方案例：https://openlayers.org/en/latest/examples/?q=draw

import { Draw } from 'ol/interaction.js'
import { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import { Vector as VectorSource } from 'ol/source.js'

/**
 * @description: 矢量编辑类
 * @function: init 初始化
 * @function: draw 绘制
 * @function: stopDraw 停止绘制
 * @return {*}
 */
export class VectorEditor {
  map = null // 地图实例
  _source = null // 数据源
  _vector = null // 图层
  _draw = null // 绘制交互

  constructor(map) {
    this.map = map // 引入地图实例
    this.init()
  }

  // 操作：初始化
  init() {
    this._source = new VectorSource()
    this._vector = new VectorLayer({
      source: this._source,
    })
    this.map.addLayer(this._vector)

    this.stopDraw() // 停止绘制
  }

  // 操作：绘制
  // Options: 'Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'Circle', 'Square', 'Box'
  draw(type) {
    this.stopDraw() // 停止绘制

    let value = type // 绘制类型
    let geometryFunction = null

    switch (type) {
      case 'Square':
        value = 'Circle'
        geometryFunction = createRegularPolygon(4)
        break
      case 'Box':
        value = 'Circle'
        geometryFunction = createBox()
        break
    }

    this._draw = new Draw({
      source: this._source,
      type: value,
      geometryFunction, // 绘制回调
    })

    this.map.addInteraction(this._draw)
  }

  // 复位：停止绘制
  stopDraw() {
    this.map.removeInteraction(this._draw)
  }
}

使用方法：

let drawVector = new VectorEditor(map) // 初始化绘制实例

drawVector.draw('Polygon') // 开始绘制

折点编辑

在这里插入图片描述

参考官方案例：https://openlayers.org/en/latest/examples/snap.html

简单来讲就是引入 Select 和 Modify ，直接对上面代码的基础上进行完善：

import { Draw, Modify, Select } from 'ol/interaction.js'
import { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import { Vector as VectorSource } from 'ol/source.js'

/**
 * @description: 矢量编辑类
 * @function: init 初始化
 * @function: draw 绘制
 * @function: watch 监听
 * @function: modify 修改
 * @function: stopDraw 停止绘制
 * @return {*}
 */
export class VectorEditor {
  map = null // 地图实例
  _source = null // 数据源
  _vector = null // 图层
  _draw = null // 绘制交互
  _select = null // 选择交互
  _modify = null // 修改交互

  constructor(map) {
    this.map = map // 引入地图实例
    this.init()
  }

  // 操作：初始化
  init() {
    this._source = new VectorSource()
    this._vector = new VectorLayer({
      source: this._source,
    })
    this.map.addLayer(this._vector)

    this._select = new Select() // 实例化选择交互
    this._modify = new Modify({ // 实例化修改交互
      features: this._select.getFeatures(),
    })

    this.map.addInteraction(this._modify)
    this.map.addInteraction(this._select)
    this.stopDraw()
    this.watch()
  }

  // 监听：各类事件
  watch() {
    // 事件：选择状态改变时清空已选择的要素
    this._select.on('change:active', () => {
      this._select.getFeatures().forEach((item) => {
        this._select.getFeatures().remove(item)
      })
    })
  }

  // 操作：绘制
  // Options: 'Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'Circle', 'Square', 'Box'
  draw(type) {
    this.stopDraw() // 停止绘制

    let value = type // 绘制类型
    let geometryFunction = null

    switch (type) {
      case 'Square':
        value = 'Circle'
        geometryFunction = createRegularPolygon(4)
        break
      case 'Box':
        value = 'Circle'
        geometryFunction = createBox()
        break
    }

    this._draw = new Draw({
      source: this._source,
      type: value,
      geometryFunction, // 绘制回调
    })

    this.map.addInteraction(this._draw)
  }

  // 复位：停止绘制
  stopDraw() {
    this.map.removeInteraction(this._draw)
    this._modify.setActive(false)
    this._select.setActive(false)
  }

  // 操作：修改
  modify(flag = true) {
    this.stopDraw()

    this._select.setActive(flag)
    this._modify.setActive(flag)
  }
}

使用方法：

let drawVector = new VectorEditor(map) // 初始化绘制实例

drawVector.modify() // 编辑

拖拽移动

在这里插入图片描述

参考官方案例：https://openlayers.org/en/latest/examples/translate-features.html

这次是引入 Translate ：

/*
 * @Date: 2024-11-04 13:46:37
 * @LastEditors: ReBeX  cswwwx@gmail.com
 * @LastEditTime: 2024-11-04 15:56:23
 * @FilePath: \geojson-editor-ol\src\utils\vectorEditor.js
 * @Description: 矢量编辑相关功能
 */
 
import { Draw, Modify, Select, Translate } from 'ol/interaction.js'
import { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import { Vector as VectorSource } from 'ol/source.js'

/**
 * @description: 矢量编辑类
 * @function: init 初始化
 * @function: draw 绘制
 * @function: watch 监听
 * @function: modify 修改
 * @function: translate 移动
 * @function: stopDraw 停止绘制
 * @return {*}
 */
export class VectorEditor {
  map = null // 地图实例
  _source = null // 数据源
  _vector = null // 图层
  _draw = null // 绘制交互
  _select = null // 选择交互
  _modify = null // 修改交互
  _translate = null // 拖拽交互

  constructor(map) {
    this.map = map // 引入地图实例
    this.init()
  }

  // 操作：初始化
  init() {
    this._source = new VectorSource()
    this._vector = new VectorLayer({
      source: this._source,
    })
    this.map.addLayer(this._vector)

    this._select = new Select() // 实例化选择交互
    this._modify = new Modify({ // 实例化修改交互
      features: this._select.getFeatures(),
    })
    this._translate = new Translate({
      features: this._select.getFeatures(),
    })

    this.map.addInteraction(this._modify)
    this.map.addInteraction(this._select)
    this.map.addInteraction(this._translate)

    this.stopDraw()
    this.watch()
  }

  // 监听：各类事件
  watch() {
    // 事件：选择状态改变时清空已选择的要素
    this._select.on('change:active', () => {
      this._select.getFeatures().forEach((item) => {
        this._select.getFeatures().remove(item)
      })
    })
  }

  // 操作：绘制
  // Options: 'Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'Circle', 'Square', 'Box'
  draw(type) {
    this.stopDraw() // 停止绘制

    let value = type // 绘制类型
    let geometryFunction = null

    switch (type) {
      case 'Square':
        value = 'Circle'
        geometryFunction = createRegularPolygon(4)
        break
      case 'Box':
        value = 'Circle'
        geometryFunction = createBox()
        break
    }

    this._draw = new Draw({
      source: this._source,
      type: value,
      geometryFunction, // 绘制回调
    })

    this.map.addInteraction(this._draw)
  }

  // 复位：停止绘制
  stopDraw() {
    this.map.removeInteraction(this._draw)
    this._modify.setActive(false)
    this._select.setActive(false)
    this._translate.setActive(false)
  }

  // 操作：修改
  modify(flag = true) {
    this.stopDraw()

    this._select.setActive(flag)
    this._modify.setActive(flag)
  }

  // 操作：拖拽
  translate(flag = true) {
    this.stopDraw()

    this._select.setActive(flag)
    this._translate.setActive(flag)
  }
}

指路

项目地址：cswwww/geojson-editor-ol

系列专栏：
【GeoJSON在线编辑平台】（0）项目启动与前言-CSDN博客

原文地址：https://blog.csdn.net/ReBeX/article/details/143480571

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：已解决sqlalchemy.exc.OperationalError: (pymssql._pymssql.OperationalError) (18456
下一篇：使用three.js 实现自定义绘制平面的效果

目标检测(object detection)
目标检测广泛应用在多个领域：无人驾驶，机器人…那么如何去定位一个目标的位置呢？
阅读更多2024-11-15
目标检测评估指标详解
特别是IoU，它在目标检测中用于评估预测框的定位准确性，是其他指标（如TP、FP、FN等）的基础。1.正样本（Positive Sample）：在目标检测任务中，指的是那些确实包含目标物体的图像区域。
阅读更多2024-11-15
《目标检测》R-CNN网络基础（RCNN，Fast-RCNN）
训练阶段多，训练耗时：微调CNN⽹络+训练SVM+训练边框回归器。预测速度慢: 使⽤GPU, VGG16模型处理⼀张图像需要47s。占⽤磁盘空间⼤：5000张图像产⽣⼏百G的特征⽂件。数据的形状变化
阅读更多2024-11-15
第5章: 图像变换与仿射操作
在 Pillow 中，我们将此矩阵简化为六个参数。# 创建自定义仿射变换案例：生成透视效果通过调整仿射变换矩阵的参数，可以创建透视效果，使图像看起来像从不同角度拍摄。# 创建透视效果。
阅读更多2024-11-15
itss认证的作用
认证的作用
阅读更多2024-11-15
什么是HTTP，什么是HTTPS？HTTP和HTTPS都有哪些区别？
什么是HTTP，什么是HTTPS？HTTP和HTTPS都有哪些区别？
阅读更多2024-11-15
kafka中topic的数据抽取不到hdfs上问题解决
将json文件抽取到kafka的消息队列（topic）中，再从topic中将数据抽取到hdfs。我们在从kafka中topic的数据抽到hdfs上的时候会出现 flume不报错，但也不抽取的情况。其实
阅读更多2024-11-15
聊天服务器(5)数据库环境搭建和编程
设置中文。
阅读更多2024-11-15
Ubuntu 22.04.4 LTS + certbot 做自动续签SSL证书(2024-11-14亲测)
在运行上述命令时，Certbot 可能会提示您选择一个或多个域名，并询问您是否希望将所有流量重定向到 HTTPS。Certbot 是一个易于使用的客户端，它可以自动获取和安装 SSL/TLS 证书，以
阅读更多2024-11-15
探秘 RPC：揭开远程过程调用的实现原理
概念理解RPC 旨在让开发人员在构建分布式系统时，无需过多关注底层网络通信的细节，就能够像在本地调用函数那样去调用远程服务器上的服务或方法。例如，在一个电商系统中，订单服务可能部署在一台服务器上，而库
阅读更多2024-11-15

【GeoJSON在线编辑平台】（1）创建地图+要素绘制+折点编辑+拖拽移动

前言

创建地图

加载地图

实现绘制

折点编辑

拖拽移动

指路

相关文章