OpenLayers基础教程——要素的编辑

最新推荐文章于 2025-05-31 09:11:43 发布
最新推荐文章于 2025-05-31 09:11:43 发布
阅读量2.4k 收藏 13
点赞数 3
CC 4.0 BY-SA版权
文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HerryDong/article/details/120654324
本文介绍了如何在OpenLayers中实现地图要素的编辑功能，通过ol.interaction.Select选择要素并使用ol.interaction.Modify进行编辑。在要素编辑后，通过监听'modifyend'事件获取并处理修改后的坐标，适用于地理信息系统中的地图编辑场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、前言

在OpenLayers中，要素的编辑主要使用ol.interaction.Select和ol.interaction.Modify配合实现，下面开始介绍。

2、编辑要素

编辑功能的实现很简答，ol.interaction.Select负责选择要素，ol.interaction.Modify对被选择的要素进行编辑，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>编辑要素</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 800px;"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([119.4, 29.6]),
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.LineString([
                            [119.0, 29.4],
                            [119.2, 29.3],
                            [119.4, 29.5]
                        ])
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Polygon([[
                            [119.4, 29.0],
                            [119.6, 29.0],
                            [119.5, 29.2],
                            [119.4, 29.0]
                        ]])
                    })
                ]
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 30,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                }),
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'yellow'
                })
            })
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [119.2, 29.2],
                zoom: 10
            })
        });

        // 创建选择工具
        var select = new ol.interaction.Select({
            condition: ol.events.condition.singleClick,
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 30,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                }),
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'yellow'
                })
            }),
            layers: [
                layer
            ]
        });

        // 创建修改工具
        var modify = new ol.interaction.Modify({
            features: select.getFeatures()
        });

        // 添加交互工具
        map.addInteraction(select);
        map.addInteraction(modify);
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

3、要素编辑后的处理

在对要素进行拖动或者拉伸等操作后，其坐标肯定会随之发生改变，如果要获取编辑后的要素坐标，则需要监听modifyend事件，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>编辑要素</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 800px;"></div>
    <script>
        // 创建图层
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point([119.4, 29.6]),
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.LineString([
                            [119.0, 29.4],
                            [119.2, 29.3],
                            [119.4, 29.5]
                        ])
                    }),
                    new ol.Feature({
                        geometry: new ol.geom.Polygon([[
                            [119.4, 29.0],
                            [119.6, 29.0],
                            [119.5, 29.2],
                            [119.4, 29.0]
                        ]])
                    })
                ]
            }),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 30,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                }),
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'yellow'
                })
            })
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [119.2, 29.2],
                zoom: 10
            })
        });

        // 创建选择工具
        var select = new ol.interaction.Select({
            condition: ol.events.condition.singleClick,
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 30,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                }),
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'yellow'
                })
            }),
            layers: [
                layer
            ]
        });

        // 创建修改工具
        var modify = new ol.interaction.Modify({
            features: select.getFeatures()
        });

        // 监听modifyend事件，获取要素修改后的坐标
        modify.on('modifyend', function (e) {
            var features = e.features;
            if (features.getLength() > 0) {
                var feature = features.item(0);
                var geometry = feature.getGeometry();
                var coordinates = geometry.getCoordinates();

                // 点
                if (geometry instanceof ol.geom.Point) {
                    console.log('更新后的点坐标：[' + coordinates + ']');
                }

                // 线
                if (geometry instanceof ol.geom.LineString) {
                    var msg = [];
                    for (var i = 0; i < coordinates.length; i++) {
                        msg.push('[' + coordinates[i] + ']');
                    }
                    console.log('更新后的线坐标：' + msg.join('、'));
                    msg = [];
                }

                // 面
                if (geometry instanceof ol.geom.Polygon) {
                    var msg = [];
                    for (var i = 0; i < coordinates.length; i++) {
                        var coordinate = coordinates[i];
                        for (var j = 0; j < coordinate.length; j++) {
                            msg.push('[' + coordinate[j] + ']');
                        }
                    }
                    console.log('更新后的面坐标：' + msg.join('、'));
                    msg = [];
                }
            }
        });

        // 添加交互工具
        map.addInteraction(select);
        map.addInteraction(modify);
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

HerryDong
关注
193：vue+openlayers 多边形的绘制，编辑feature，删除所选feature和清空功能
大剑师兰特的GIS世界
01-04 1659
第193个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选中的元素可以编辑，也可以删除，同时可以删除整个图层的source内容。
openlayers：实现修改交互功能编辑要素 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-29 240
openlayers：实现修改交互功能编辑要素 (附完整源码）
Openlayers的交互功能（六）——编辑图斑
m0_46410110的博客
09-28 1025
本文对图斑的编辑进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
OpenLayers 图形交互编辑
最新发布
GIS之路
05-31 732
注：当前使用的是 ol版本，天地图使用的key请到天地图官网申请，并替换为自己的key图形要素包括属性信息和几何信息，在实际应用中，不仅需要修改样式信息，也需要修改图形几何信息。在OpenLayers中，一般采用鼠标交互方式修改图形坐标。在中提供了交互式控件，可以结合选择要素控件使用。本节主要介绍加载。
Openlayers之编辑要素
SmileCoffin的博客
02-16 7236
1、新建一个html页面，引入ol.js文件，然后在body中创建两个div标签和一个label标签； 2、代码实现 window.onload = function () { //初始化点要素 var pointFeature = new ol.Feature(new ol.geom.Poi
OpenLayers对要素进行新增绘制、选择、修改等交互操作
sig321的专栏
07-08 1155
也可以从Select获取Features（Collection集合）放置到Modify的features属性上。备注：draw.setActivity(false)即可禁用要素绘的制功能。实现绘制完一个多边形之后禁用多边形绘制，并且开启选择器功能。
OpenLayers修改要素
weixin_30530939的博客
07-12 1146
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-...
Openlayers3 编辑要素
weixin_33972649的博客
02-08 737
        参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 【学习笔记之Openlayers3】要素保存篇（第四篇） openlayers实现在线编辑 【学习笔记之Openlayers3】查询分析篇（第五篇） 【学习笔记之Openlayers3】要素绘制篇（第三篇）...
《Openlayers零基础教程》第十课：geojson实现线要素和区要素
2401_84715637的博客
01-15 1018
本篇教程我们将学习如何利用geojson实现线要素。1.1.3. 设置矢量图层。1.1.4. 添加地图容器。
《Openlayers零基础教程》第七课：矢量图形绘制——绘图步骤
2401_84715637的博客
01-14 249
1、通过几何信息和样式信息构建要素。绘制步骤还是遵循下图逻辑来进行。3、将矢量数据源添加到。
《Openlayers零基础教程》第十三课：地图点击事件
2401_84715637的博客
01-20 335
【代码】《Openlayers零基础教程》第十三课：地图点击事件。
openlayers编辑工具
01-15
openlayers3编辑工具栏功能，包含绘制点线面及修改删除功能，根据需求添加
openlayers 编辑geoserver图层
11-19
该资源适合初级同学对geosever图层进行编辑的功能，可以下载使用,该资源能满足openlayers对geoserver图层的查询、编辑、新增，删除等操作
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
内容概要：通过带着读者手写openlayers6 绘制扇形及环形，了解 地图容器核心原理。在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，工作1-3年的web前端或webGIS研发人员 能学到什么：①vue3+vite；②地图容器相关知识。 阅读建议：此资源以开发绘制扇形及环形学习其原理地图容器，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
《Openlayers零基础教程》第九课：geojson实现点要素
2401_84715637的博客
01-15 283
geojson数据是矢量数据，是包含地理信息的json数据，格式是以key:value的形式存在的。后缀以geojson结尾。
《Openlayers零基础教程》第十二课：加载网络数据
2401_84715637的博客
01-16 240
首先还是把地图进行初始化，设置矢量数据源，设置矢量图层，最后添加到地图容器即可。视频版教程可免fei领。
OpenLayers在多个矢量图层编辑要素
weixin_30449239的博客
07-12 377
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在多个矢...
Vue 3 + OpenLayers 的简单使用
paper_umbrella的博客
06-28 2555
通过以上步骤，我们成功地在 Vue 3 项目中使用 OpenLayers 来展示地图。您也可以根据自己的需求来配置地图的样式和功能，OpenLayers 提供了丰富的 API 和组件来满足各种地图展示的需求。希望本文对您有所帮助！如有任何问题或疑问，请随时联系我。祝您的地图展示功能开发顺利！🌍🚀👨‍💻。
100.Vue3 + OpenLayers：使用 marker-feature 添加 Marker
小彭的博客
03-12 747
是一个强大的开源地图库，可以帮助开发者快速构建 Web 地图应用。本文将详细介绍如何在。（OpenStreetMap）底图，并在。端口），你应该可以看到地图，以及点击。这样，你的 优快云 文章就完成了！在前端 GIS（地理信息系统）开发中，：OpenLayers 默认使用。就会出现在指定经纬度的位置。项目还没有创建，可以使用。投影，因此如果你的坐标是。发生此错误，可以使用。，请确保所有数据一致。
openlayers基础
12-28
### OpenLayers 基础教程和入门指南 #### 一、OpenLayers简介 OpenLayers是一个用于构建Web地图应用程序的强大JavaScript库。它支持多种地理空间数据格式，并提供了丰富的API来操作这些数据。通过OpenLayers，开发者可以在浏览器中轻松地展示来自不同源的地图瓦片、矢量数据和其他地理信息。 #### 二、安装与配置 为了在项目中使用OpenLayers，可以通过npm包管理器进行安装： ```bash npm install ol ``` 如果是在Vue.js环境中工作，则还需要确保正确设置了Webpack或其他打包工具以便能够加载所需的模块[^1]。 #### 三、核心概念介绍 ##### Map对象 `ol/Map` 是整个应用的核心部分之一，代表了一个完整的交互式地图实例。创建一个新的地图通常涉及指定其容器（通常是DOM中的div元素），视图(view)，以及至少一层(layer)[^2]。 ##### View对象 `ol/View` 定义了当前视角的状态，比如中心位置(center)、缩放级别(zoom)等参数。这使得我们可以控制用户查看地图的方式——放大缩小或是平移移动。 ##### Layer层次结构 每一幅地图都由多个图层组成；每种类型的layer都有特定的功能。常见的有TileLayer(栅格图像), VectorLayer(几何图形特征集合)等等。它们共同构成了最终呈现给用户的视觉效果。 ##### Source数据来源 source负责提供实际的数据内容给对应的layer去渲染出来。例如，对于tile layer来说就是获取远程服务器上的切片图片资源；而对于vector layer而言则是处理本地GeoJSON文件或者其他形式的空间要素集。 #### 四、简单示例代码 下面给出一段简单的HTML+JS代码片段用来说明如何初始化一张带有底图的基础地图: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Basic Map</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@openlayers/openlayers@latest/dist/ol.css"/> <!-- 加载OpenLayers JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/@openlayers/openlayers@latest/dist/ol.js"></script> </head> <body> <div id="map" style="width:100%;height:400px;"></div> <script type="text/javascript"> import 'ol/ol.css'; import {Map, View} from 'ol/'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; const map = new Map({ target: document.getElementById('map'), layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); </script> </body> </html> ``` 这段代码展示了怎样利用OpenStreetMap作为背景服务提供商，在页面上绘制出一幅世界地图概览图[^3]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值