OpenLayers 图形交互编辑
注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
图形要素包括属性信息和几何信息，在实际应用中，不仅需要修改样式信息，也需要修改图形几何信息。在OpenLayers中，一般采用鼠标交互方式修改图形坐标。在OpenLayers5中提供了ol.interaction.Modify交互式控件，可以结合选择要素控件ol.interaction.Select使用。
本节主要介绍加载图形交互编辑。
1. 添加编辑几何图形
创建点、线、面几何图形并添加到地图中。
//绘制的几何图形要素
const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));
const lineFeature = new ol.Feature(new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));
const polygonFeature = new ol.Feature(new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));//实例化一个矢量图层Vector作为绘制层
const source = new ol.source.Vector({features: [pointFeature, lineFeature, polygonFeature]
});
const vector = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new ol.style.Stroke({color: '#ff0000',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ff0000'})})})
});
//将绘制层添加到地图容器中
map.addLayer(vector);
2. 创建编辑控件
在Modify控件中实现以下三个方法。
init：控件初始化setEvents：设置事件，为当前选择的控件添加激活变更事件，在其事件处理函数中返回当前选择要素集的第一要素。setActive：调用选择要素控件和交互式编辑控件setActive方法，控制控件是否激活。
//定义修改几何图形功能控件
const Modify = {init: function () {//初始化一个交互选择控件,并添加到地图容器中this.select = new ol.interaction.Select();map.addInteraction(this.select);//初始化一个交互编辑控件，并添加到地图容器中this.modify = new ol.interaction.Modify({//选中的要素features: this.select.getFeatures()});map.addInteraction(this.modify);//设置几何图形变更的处理this.setEvents();},setEvents: function () {//选中的要素const selectedFeatures = this.select.getFeatures();//添加选中要素变更事件this.select.on('change:active', function () {selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);});},setActive: function (active) {//激活选择要素控件this.select.setActive(active);//激活修改要素控件this.modify.setActive(active);}
};
//初始化几何图形修改控件
Modify.init();
//激活几何图形修改控件;
Modify.setActive(true);
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图形交互编辑</title><meta charset="utf-8" /><link href="../libs/css/ol.css" rel="stylesheet" type="text/css" /><script src="../libs/js/ol-5.3.3.js" type="text/javascript"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}</style>
</head><body><div id="map" title="地图显示"></div>
</body></html><script>//==============================================================================////============================天地图服务参数简单介绍==============================////================================vec：矢量图层==================================////================================img：影像图层==================================////================================cva：注记图层==================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================////==============================================================================////地图投影坐标系const projection = ol.proj.get('EPSG:3857');const map = new ol.Map({//地图容器div的IDtarget: 'map',view: new ol.View({//地图初始中心点// center: [114.2905, 30.5607],center: [11421771, 4288300],projection: "EPSG:3857",minZoom: 2,zoom: 4})});const gaodeLayer = new ol.layer.Tile({source: new ol.source.XYZ({title: "高德",url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"})})map.addLayer(gaodeLayer)//绘制的几何图形要素const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));const lineFeature = new ol.Feature(new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));const polygonFeature = new ol.Feature(new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));//实例化一个矢量图层Vector作为绘制层const source = new ol.source.Vector({features: [pointFeature, lineFeature, polygonFeature]});const vector = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.2)'}),stroke: new ol.style.Stroke({color: '#ff0000',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#ff0000'})})})});//将绘制层添加到地图容器中map.addLayer(vector);//定义修改几何图形功能控件const Modify = {init: function () {//初始化一个交互选择控件,并添加到地图容器中this.select = new ol.interaction.Select();map.addInteraction(this.select);//初始化一个交互编辑控件，并添加到地图容器中this.modify = new ol.interaction.Modify({//选中的要素features: this.select.getFeatures()});map.addInteraction(this.modify);//设置几何图形变更的处理this.setEvents();},setEvents: function () {//选中的要素const selectedFeatures = this.select.getFeatures();//添加选中要素变更事件this.select.on('change:active', function () {selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);});},setActive: function (active) {//激活选择要素控件this.select.setActive(active);//激活修改要素控件this.modify.setActive(active);}};//初始化几何图形修改控件Modify.init();//激活几何图形修改控件;Modify.setActive(true);</script>
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
相关文章：
OpenLayers 图形交互编辑
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 图形要素包括属性信息和几何信息，在实际应用中，不仅需要修改样式信息，也需要修改图形几何信息。在OpenLayers中&…...
pikachu靶场通关笔记06 XSS关卡02-反射型POST
目录 一、XSS 二、反射型XSS 三、POST型报文 四、GET型与POST型区别 五、代码审计 五、渗透实战 1、渗透方法1 2、渗透方法2 本系列为通过《pikachu靶场通关笔记》的XSS关卡(共10关）渗透集合，通过对XSS关卡源码的代码审计找到XSS风险的真实原因&…...
SQLiteStudio - 免费开源、轻量高效，跨平台的 SQLite 数据库管理工具，代替 Navicat for SQLite
管理 SQLite 数据库就用这款软件，真的早该摒弃破解和盗版的 Navicat 了。 SQLiteStudio 是一款专注于管理 SQLite 数据库 的桌面软件，用于浏览和编辑 SQLite 数据库文件。软件的作者是来自波兰的开发者 Paweł Salawa，他是一位拥有 20 年 Ja…...
Prometheus + Grafana + Cadvisor：构建高效企业级服务监控体系
在现代软件开发和运维领域，容器化技术的应用越来越广泛，其中 Docker 作为最受欢迎的容器化解决方案之一，其容器的监控管理变得至关重要。本文将详细介绍如何使用 cadvisor、Prometheus 和 Grafana 来监控 Docker 容器的状态。 一、安装镜像 …...
WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化
目录 一、空间转换 1.空间转换 2.空间转换 – 平移 3.视距 perspective 4.空间 – 旋转 ③空间旋转——Z轴代码与效果视频 ④空间旋转——X轴代码与效果视频 ⑤空间旋转——Y轴代码与效果视频 5.立体呈现 – transform-style 案例 – 3D 导航 6.空间转换 – 缩放 …...
Java研学-MongoDB(一)
一 MongoDB 简介 MongoDB是一种高性能、开源的NoSQL数据库，采用面向文档的存储模型，以BSON（Binary JSON）格式存储数据，具有灵活的数据模型、强大的扩展性和丰富的功能特性，广泛应用于各类现代应用程序的数据…...
【AI面试秘籍】| 第25期：RAG的关键痛点及解决方案深度解析
今天我们来聊聊大模型领域一个非常火热的技术——RAG（Retrieval Augmented Generation）。RAG通过引入外部知识库，有效地缓解了大型语言模型（LLM）在处理知识密集型任务时可能出现的幻觉、知识过时等问题。然而ÿ…...
OpenGL、GLUT、freeGLUT 与 GLFW 的区别
在图形编程中，OpenGL 是最核心的渲染 API，但仅靠它本身无法完成窗口创建、事件处理等任务。因此，开发者通常会借助一些辅助库来简化开发流程。常见的库包括 GLUT、freeGLUT 和 GLFW。 本文将详细讲解这些技术之间的区别，并提供每…...
服务器带宽线路的区别（GIA、CN2、BGP、CMI等）
服务器带宽线路的区别（GIA、CN2、BGP、CMI等） 一、BGP线路 1. 定义与技术特点 BGP（Border Gateway Protocol，边界网关协议）是一种用于不同自治系统（AS）之间交换路由信息的协议，属…...
ppt一键制作：ai自动生成PPT，便捷高效超级精美！
深夜的台灯下，你对着杂乱的 PPT 内容反复刷新灵感，鼠标在字体、配色选项间来回穿梭，好不容易拼凑出的页面，却总透着浓浓的 “廉价感”；汇报在即，逻辑混乱的大纲改了又改，每一页感觉合适又不搭&a…...
多方法解决MNIST数字识别
全连接层 import torch from torchvision import datasets, transforms import torch.nn as nn import torch.optim as optim from tqdm import tqdm # 用于进度条显示 import os# 定义数据预处理（标准化+Tensor转换） transform = transforms.Compose([transforms.ToTensor…...
Maven（黑马）
Maven 是一个强大的项目管理和构建自动化工具，主要用于 Java 项目的构建、依赖管理和文档生成。它通过使用 POM（Project Object Model）文件来管理项目的配置和依赖关系，从而实现项目的自动化构建和管理。以下是 Maven 的一些核心概…...
CppCon 2014 学习:ODB, Advanced Weapons and Tactics
#Schema Evolution 是数据库持久化技术中的一个重要概念，特别是在使用像 ODB 这样的 C ORM 框架时。 展示的代码片段正是 ODB 支持的**模式演化（Schema Evolution）**语法示例。 什么是 Schema Evolution？ Schema Evolution 指的…...
将手机网络经USB数据线和本地局域网共享给华为AP6050DN无线接入点
引言 由于最近装毕的新家所在的小区未能及时通宽带，于是家中各类无线设备如何上网就成了首要要解决的问题。 鉴于家中要联网的设备多、类型杂、支持频段也不一，总是开手机热点不是回事儿，于是就想着把手机网络引至华为AP6050DN无线接入点中，让家中所有的无线设备都能快速高…...
【论文解读】Deformable DETR | Deformable Transformers for End-to-End Object Detection
论文地址：https://arxiv.org/pdf/2010.04159 代码地址：https://github.com/fundamentalvision/Deformable-DETR 摘要 DETR最近被提出，旨在消除物体检测中许多手工设计的组件的需求，同时展示出良好的性能。然而，由于T…...
android 图片背景毛玻璃效果实现
图片背景毛玻璃效果实现 1 依赖 // Glide implementation("com.github.bumptech.glide:glide:4.16.0") kapt("com.github.bumptech.glide:compiler:4.16.0") implementation("jp.wasabeef:glide-transformations:4.3.0") 2 布局<com.googl…...
机器学习----决策树
一、决策树简介 from sklearn.tree import DecisionTreeClassifier from sklearn.tree import plot_tree 决策树是一种树形结构，树中每个内部节点表示一个特征上的判断，每个分支代表一个判断结果的输出，每个叶子节点代表一种分类结果。 决…...
LabVIEW输血袋字符智能检测系统
针对医疗行业输血袋字符检测需求，基于 LabVIEW 图形化开发平台与基恩士（KEYENCE）机器视觉硬件，构建高精度、高可靠性的字符在线识别系统。通过选用基恩士工业相机、光源及 NI 数据采集设备等硬件，结合 LabVIEW 强大的图…...
数据结构测试模拟题（3）
1、两个有序链表序列的合并 #include<bits/stdc.h> using namespace std;struct node{int num;node* next; };// 创建链表 node* CreatList(){int x;node *head new node(); // 创建头节点head->next NULL;node *tail head; // 尾指针初始指向头节点while…...
理解频域滤波
1 频域滤波基础 对一幅数字图像，基本的频率滤波操作包括： 1）将图像变换到频率域； 2）根据需要修改频率域数值； 3）反变换到图像域。 使用公式表达为 ， H(u,v) 为滤波器（滤…...
Telerik生态整合：Kendo UI for Angular组件在WinForms应用中的深度嵌入（一）
Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库，加快开发速度。Telerik DevCraft提供完整的工具箱，用于构建现代和面向未来的业务应用程序，目前提供UI for ASP.NET MVC、Kendo…...
古老的传说（Player、Stage）是否还能在蓝桥云课ROS中重现-250601（失败）
古老的传说是否还能在蓝桥云课ROS中重现-250601 经典复现何其难，百分之二就凉凉！ 古老的传说 那是很久很久以前的故事……上个世纪的一个机器人项目 Player、Stage这个项目最早起源于1999年，由美国南加州大学机器人研究实验室开发࿰…...
InfluxQL 数据分析实战：聚合、过滤与关联查询全解析
InfluxQL 作为时序数据库的专用查询语言，在处理时间序列数据时展现出独特优势。本文深入探讨 聚合计算、数据过滤和跨测量关联 三大核心操作，通过真实代码示例展示如何从海量时序数据中提取关键洞察。文中涵盖从基础平均值计算到复杂多维度分析的完整流程…...
Qt font + ToolTip + focusPolicy + styleSheet属性（5）
文章目录 font属性API接口直接在Qt Designer编辑图形化界面通过纯代码的方式修改文字属性 ToolTip属性API接口代码演示 focusPolicy属性概念理解API接口通过编辑图形化界面演示 styleSheet属性概念理解通过编辑图形化界面展示代码 图形化界面的方式展示（夜间/日间模…...
APM32主控键盘全功能开发实战教程：软件部分
APM32主控键盘全功能开发实战教程：从零基础到RGB矩阵高级玩法 🔥 前言：随着机械键盘DIY风潮兴起，国产APM32芯片因其高性价比和与STM32的完美兼容性，正逐渐成为键盘开发主控的新宠。本文将手把手带你从最基础的环境搭建…...
docker 部署 gin
编译与执行 ✅「静态编译语言 生成原生二进制文件 操作系统直接执行」 Go 语言之所以在工程部署场景中大受欢迎的核心优势：它直接编译成原生二进制可执行文件（binary executable）。 🔧 Go 是“静态编译语言”（编译型…...
十三: 神经网络的学习
这里所说的“学习”是指从训练数据中自动获取最优权重参数的过程。为了使神经网络能进行学习，将导入损失函数这一指标。而学习的目的就是以该损失函数为基准，找出能使它的值达到最小的权重参数。为了找出尽可能小的损失函数的值，我们将介绍利…...
Qt OpenGL编程常用类
Qt提供了丰富的类来支持OpenGL编程，以下是常用的Qt OpenGL相关类： 一、QOpenGLWidget 功能：用于在 Qt 应用程序中嵌入 OpenGL 渲染的窗口部件。替代了旧版的QGLWidget。提供了OpenGL上下文和渲染表面。 继承关系：QWidget → QOpenGLWidget 属性与方法： QOpenGLWidget 属…...
数据结构 --- 顺序表
顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构，一般情况下采用数组存储，在数组上完成数据的增删查改 顺序表分为：静态顺序表、动态顺序表 一.静态顺序表 #define N 7 typedef int SLDataType;typedef struct Seqlist {…...
MySQL高级查询技巧：分组、聚合、子查询与分页【MySQL系列】
本文将深入探讨 MySQL 高级查询技巧，重点讲解 GROUP BY、HAVING、各种聚合函数、子查询以及分页查询（LIMIT 语法）的使用。文章内容涵盖实际应用中最常见的报表需求和分页实现技巧，适合有一定 SQL 基础的开发者进一步提升技能。 一…...