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

前言

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

创建地图

pnpm install ol

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 = nullswitch (type) {case 'Square':value = 'Circle'geometryFunction = createRegularPolygon(4)breakcase '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 = nullswitch (type) {case 'Square':value = 'Circle'geometryFunction = createRegularPolygon(4)breakcase '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 = nullswitch (type) {case 'Square':value = 'Circle'geometryFunction = createRegularPolygon(4)breakcase '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博客

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/7946.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

从0开始linux（23）——文件（4）磁盘定址方式

从0开始linux（23）——文件（4）磁盘定址方式

欢迎来到博主的专栏：从0开始Linux 博主ID：代码小豪 文章目录 CHS寻址模式LBA寻址 前面我们介绍了文件管理系统，我们说，当我们使用系统调用open时，操作系统会将磁盘当中的文件加载到内存当中，创建一个struct…
阅读更多...
wireshark工具使用

wireshark工具使用

复制数据 1.右键展开整帧数据 2.复制“所有可见项目” mark标记数据 标记： 跳转： 保存成文件： 文件–>导出特定分组—>Marked packets only
阅读更多...
固定宽度--文字多少不一样--需要文字充满整个宽度

固定宽度--文字多少不一样--需要文字充满整个宽度

固定宽度–文字多少不一样–需要文字充满整个宽度 1.场景–登陆页面 这样显示显然不太行 那我们想要是这种情况吗–用户名和密码都充满真个宽度的div 2.代码实现—其中一个重要属性最为关键 text-align-last: justify css <style>.user{width:60px;background-colo…
阅读更多...
艾体宝产品丨加速开发！Redis Copilot智能助手上线

艾体宝产品丨加速开发！Redis Copilot智能助手上线

我们最近发布了 Redis Copilot&#xff0c;旨在帮助开发者更加高效地使用 Redis 构建应用。提升应用性能&#xff0c;简化构建过程是我们不懈的追求。Redis Copilot 正是为此而生的人工智能助手&#xff0c;助力开发者迅速掌握 Redis 的使用技巧。现在您可以在 Redis Insight 中…
阅读更多...
4种鼓励创业创新的方法

4种鼓励创业创新的方法

随着市场趋于饱和&#xff0c;许多企业&#xff0c;尤其是初创企业&#xff0c;很难在竞争中保持领先地位。技术为企业彻底改变其营销和管理策略铺平了道路。另一个经过实践检验的成功渗透特定市场的方法是在办公室内部激发创新&#xff0c;从员工到品牌皆如此。 那么究竟如何…
阅读更多...
Spark的yarn集群环境搭建

Spark的yarn集群环境搭建

一.为什么要搭建yarn集群 为什么要将Spark的程序运行在YARN上&#xff0c;不运行在自带的 Standalone集群上&#xff1f; 1、统一化资源管理 Standalone是Spark专用的资源管理集群&#xff0c;只能用于运行 Spark程序 YARN是功能的分布式资源管理平台&#xff0c;可以运行各种分…
阅读更多...
【react使用AES对称加密的实现】

【react使用AES对称加密的实现】

react使用AES对称加密的实现 前言使用CryptoJS库密钥存放加密方法解密方法结语 前言 项目中要求敏感信息怕被抓包泄密必须进行加密传输处理&#xff0c;普通的md5加密虽然能解决传输问题&#xff0c;但是项目中有权限的用户是需要查看数据进行查询的&#xff0c;所以就不能直接…
阅读更多...
登录功能设计（php+mysql）

登录功能设计（php+mysql）

一 登录功能 1. 创建一个登录页面&#xff08;login.php&#xff09;&#xff0c;包含一个表单&#xff0c;用户输入用户名和密码。 2. 在表单的提交事件中&#xff0c;使用PHP代码处理用户输入的用户名和密码。 3. 首先&#xff0c;连接MySQL数据库。然后&a…
阅读更多...
ReactPress 是什么？

ReactPress 是什么？

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎Star。 ReactPress 是什么&#xff1f; ReactPress 是使用React开发的开源发布平台&#xff0c;用户可以在支持React和MySQL数据库的服务器上架设属于自己的博客、网站。也可以把 ReactP…
阅读更多...
ai外呼机器人的作用有哪些？

ai外呼机器人的作用有哪些？

ai外呼机器人具有极高的工作效率。日拨打成千上万通不是问题&#xff0c;同时&#xff0c;机器人还可以快速筛选潜在客户&#xff0c;将更多精力集中在有价值的客户身上&#xff0c;进一步提升营销效果。183-3601-7550 ai外呼机器人的作用&#xff1a; 1、搭建系统&#xff0c…
阅读更多...
福禄克DTX,DSX系列内置标准以及生成的测试报告如何解读？

福禄克DTX,DSX系列内置标准以及生成的测试报告如何解读？

今日，接到一些朋友的询问？虽然使用了很长一段时间的FLUKE DSX-5000或者DSX-8000,但是对于测试标准和测试生成的报告一知半解，借此咱们一块屡屡清楚。 1，经常有的朋友拿到设备后，第一时间就问，咱们福禄克内置的标准的多少？我线的参数（被测的铜缆）达到多少db，才能算过…
阅读更多...
我与Linux的爱恋:磁盘的存储管理

我与Linux的爱恋:磁盘的存储管理

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;Linux的学习 文章目录 磁盘的存储管理 磁盘的存储管理 在我们日常生活中&#xff0c;我们要打开很多文件(要打开这个文件需要先找到这个文件->要在磁盘中先找到->通过文件路径文件…
阅读更多...
git原理与上传

git原理与上传

言&#xff1a; git是一个软件&#xff0c;gitee/github是一个网站&#xff0c;这里有什么联系吗&#xff1f;我们身为一个程序员不可能不知道github&#xff0c;但是毕竟这是外国的网站&#xff0c;我们不翻墙的情况下&#xff0c;是无法访问的(或者就是太慢了&#xff0c;或…
阅读更多...
Python基础学习_01

Python基础学习_01

目录 1、注释 2、数字和数学计算 3、变量 4、字符串 5、打印 6、本节总结 1、注释 • 什么是注释&#xff1f; 1&#xff09;注释就是用自然语言向代码阅读者说明代码的功能和意义 • 注释 1&#xff09;单行注释使用 # 为开头&#xff1b;并且不能换行…
阅读更多...
操作系统学习笔记-3.2虚拟内存

操作系统学习笔记-3.2虚拟内存

文章目录 虚拟内存请求分页管理方式页面置换算法最佳置换算法工作原理OPT 算法的示例最佳置换算法的优点和缺点 先进先出置换算法最近最久未使用时钟置换算法时钟置换算法的工作原理&#xff1a;算法的步骤&#xff1a; 改进型时钟置换算法改进型时钟置换算法的特点&#xff1a…
阅读更多...
vue3 封装aixos

vue3 封装aixos

1. Vue3 封装 aixos 并且 使用 aixos 请求数据 npm install axios # 或者 yarn add axios 2. Vue3 封装 aixos 并且 使用 aixos 请求数据 封装 axios可以帮助我们更好地管理 HTTP 请求&#xff0c;例如添加统一的基础URL、请求头、拦截器等功能。 下面是封装 axios的一个示…
阅读更多...
量子计算机能解决哪些问题？

量子计算机能解决哪些问题？

经典与量子难度对比 在深入示例之前&#xff0c;我们首先讨论一下如何研究和分类各种问题的难度。有些问题可以在经典计算机上轻松解决&#xff0c;我们不需要量子计算机来解决它们。另一方面&#xff0c;有些问题非常困难&#xff0c;需要量子计算机来解决。一个著名的例子是寻…
阅读更多...
中电金信：院长寄语｜关于源启AI+行动的思考

中电金信：院长寄语｜关于源启AI+行动的思考

中国电子首席科学家 中电金信研究院院长 况文川 自2022年8月19日发布以来&#xff0c;源启已经走上了她第三年的征途。今天&#xff0c;源启已经成为公司战略的支点&#xff0c;中电金信正致力于用“源启底座”“源启咨询”“源启应用重构”三位一体的方式来赋能千行百业数智化…
阅读更多...
海康私有化视频平台EasyCVR视频分析设备平台流媒体协议RTMP、HTTP-FLV、HLS的简单对比

海康私有化视频平台EasyCVR视频分析设备平台流媒体协议RTMP、HTTP-FLV、HLS的简单对比

在当今的数字化世界中&#xff0c;视频流协议的选择对于确保流畅、高效的视频传输至关重要。随着互联网技术的快速发展&#xff0c;直播和视频点播服务已经成为人们日常生活中不可或缺的一部分。无论是安防监控、在线教育、远程会议还是娱乐直播&#xff0c;用户对于视频流的实…
阅读更多...
详解使用python读写csv，以及将csv数据写入数据库

详解使用python读写csv，以及将csv数据写入数据库

csv文件 csv介绍 CSV&#xff0c;也即Comma-Separated Values&#xff0c;是一种用于存储表格数据的纯文本文件格式&#xff0c;其中每一行代表一条记录&#xff0c;记录中的各个字段由逗号分隔。 姓名,年龄,性别 张三,25,男 李四,28,男 王五,22,男 六六,29,女 子柒,28,女 对…
阅读更多...
最新文章

Copyright @ 2022~2023