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

最新推荐文章于 2024-04-26 00:00:00 发布
最新推荐文章于 2024-04-26 00:00:00 发布
阅读量2k 收藏 12
点赞数 3
文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/120654324
版权

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
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Openlayers实战：modifystart、modifyend互动示例
大剑师兰特的GIS世界
07-08 479
Openlayers地图中，modify是一个重要的类，他负责对所选的内容进行编辑修改处理。特别是在绘图时候，一次性不一定画好，需要修改，这时候modify就派上用场了。本示例演示modifystart和modifyend的两种不同状态的一个交互。
193：vue+openlayers 多边形的绘制，编辑feature，删除所选feature和清空功能
大剑师兰特的GIS世界
01-04 1309
第193个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选中的元素可以编辑，也可以删除，同时可以删除整个图层的source内容。
openlayers-editor:OpenLayers编辑器
05-24
Openlayers编辑器 OpenLayers编辑器（OLE）基于并提供了一组用于扩展空间数据编辑的控件。 欢迎捐款！ 随时添加更多控件并扩展当前功能。 此外，构建过程目前非常基本，可以进行优化。 翻译也很好。 特征 几何对齐的CAD工具 绘制线，点和面要素 移动和旋转几何 修改几何 删除几何 使用拓扑操作：缓冲区，并集，交集，差值 用于激活和停用控件的工具栏 演示版 有关演示，请访问 。 依存关系 节点和npm 入门 克隆此存储库 安装： npm install 构建： npm run build 运行： npm start 打开浏览器并访问 用法 var editor = new ole . Editor ( map ) ; var cad = new ole . control . CAD ( { source : editLayer . getSource ( )
openlayers 入门教程（十三）：动画
最新发布
大剑师兰特的GIS世界
04-26 1775
OpenLayers 是一款流行的JavaScript库，提供了丰富的功能来实现各种地图动画效果，包括但不限于轨迹动画、图标动画（如GIF动画）、地图平移与缩放动画、以及自定义的几何形状动画等。
openlayers3 -在图片图层（自己的图片）上select、modify和draw(选中、绘制和编辑要素）
axuan_1217的博客
11-15 756
openlayers3 -在图片图层（自己的图片）上select、modify和draw(选中、绘制和编辑要素）前言一、如何导入图片图层二、全部代码1.下载2.输出结果总结 前言 使用openlays，首先导入自己的图片，在使用modify和draw进行标记 一、如何导入图片图层 这部分网上有很多实例，可以查询 二、全部代码 1.下载 首先你可以先下载openlayers的相关包（也有其他方法可以导入） 官网链接: https://openlayers.org/ 下载链接:https://openlay
Openlayers之编辑要素
SmileCoffin的博客
02-16 7110
1、新建一个html页面，引入ol.js文件，然后在body中创建两个div标签和一个label标签； 2、代码实现 window.onload = function () { //初始化点要素 var pointFeature = new ol.Feature(new ol.geom.Poi
Openlayers3 编辑要素
weixin_33972649的博客
02-08 701
        参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 【学习笔记之Openlayers3】要素保存篇（第四篇） openlayers实现在线编辑 【学习笔记之Openlayers3】查询分析篇（第五篇） 【学习笔记之Openlayers3】要素绘制篇（第三篇）...
openlayers 编辑geoserver图层
11-19
该资源适合初级同学对geosever图层进行编辑的功能，可以下载使用,该资源能满足openlayers对geoserver图层的查询、编辑、新增，删除等操作
openlayers编辑工具
01-15
openlayers3编辑工具栏功能，包含绘制点线面及修改删除功能，根据需求添加
7. OpenLayers 实现矢量元素编辑功能（结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-25 1189
在本教程中，我们将向您展示如何在Vue和OpenLayers中实现矢量要素的编辑功能。我们将在一个已有的Vue和OpenLayers项目中添加编辑交互。交互实例，并设置要素来源，现在只需将鼠标放置在要编辑元素的边缘即可拖拽鼠标实现编辑元素。在上述代码中，我们创建了一个新的。方法中，我们将创建一个新的。
openlayers基础系列教程
03-13
OpenLayers 基础系列教程 OpenLayers 是一个强大的、开源的 JavaScript 库，用于开发基于 WebGIS 的应用系统。它提供了强大的地图处理能力，支持多种数据源，包括矢量和栅格图层，可以满足各种 GIS 应用的需求。 ...
openlayers3要素移动交互并弹出要素信息
03-24
openlayers3中，显示点要素。当鼠标移动到要素上，高亮显示要素，并弹出要素信息。
openlayers5加载线要素.zip
07-04
采用openlayers5，在天地图上画直线，此代码可供参考。
Openlayers教程资料
11-30
很好的Openlayers 的入门资料，里面有如何加载地图的例子，同时进行语法分析。
Openlayers实例详解视频教程
08-12
给大家分享一套Openlayers实例详解视频教程，希望对大家学习Openlayers有帮助。记得给五星好评哦。
openlayer实现webgis端绘制制图及编辑
weixin_42496466的博客
04-10 1035
连接本地或远程GIS服务器、云存储（如AWS S3、Azure Blob Storage）、开放数据平台（如OpenStreetMap、ArcGIS Online）等，获取所需GIS数据。•Leaflet、OpenLayers、Mapbox GL JS等开源库，提供地图容器、图层管理、交互控件等功能，便于快速构建Web地图应用。•编辑与绘图：支持用户在地图上添加、修改、删除地理要素，如使用Leaflet.draw、OpenLayers Editing等插件。map初始化的时候可以添加好了。
Vue+Openlayer使用modify修改要素
~~
09-06 1352
import{Modify}from"ol/interaction"; 核心代码： // 修改要素核心代码 modifyFeature() { this.modify = new Modify({ source: this.lineStringLayer.getSource(), }); this.map.addInteraction(this.modify); }, 可自动捕捉 可修改点、线、面。......
六、OpenLayer矢量绘制
qq_39330397的博客
08-21 132
openlayer提供Draw类来实现地图绘制点、线、面、圆等功能。
OpenLayers笔记2：点、线、面矢量要素的自定义渲染
getMoreTime的博客
04-02 6571
新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式； ol.style概述 在ol.style中默认可以配置的要素包括： Fill：填充的样式，对应的模块为ol.style.Fill； Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等； Image：图像的样式...
vue使用openlayers获取当前图层要素
06-08
要在Vue中使用OpenLayers获取当前图层要素，你可以按照以下步骤进行操作： 1. 在Vue项目中安装OpenLayers库，可以使用npm或yarn进行安装： ``` npm install ol ``` 或 ``` yarn add ol ``` 2. 在Vue组件中引入OpenLayers库： ``` import ol from 'ol'; import 'ol/ol.css'; ``` 3. 定义一个OpenLayers地图对象： ``` let map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) }); ``` 4. 定义一个交互对象来获取要素信息： ``` let selectInteraction = new ol.interaction.Select({ condition: ol.events.condition.singleClick, layers: [layer] // layer是当前要素所在的图层 }); ``` 5. 监听选中要素的事件，并获取要素信息： ``` selectInteraction.on('select', function(event) { let feature = event.target.getFeatures().getArray()[0]; let properties = feature.getProperties(); console.log(properties); }); ``` 在上面的代码中，我们使用`ol.interaction.Select`对象来监听地图上单击事件，并获取当前选中的要素信息，`event.target.getFeatures().getArray()[0]`获取选中的第一个要素对象，`feature.getProperties()`获取要素的属性信息。 注意：在使用OpenLayers获取要素信息时，需要保证地图中的图层已经加载完毕，否则可能无法获取到要素信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值