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

最新推荐文章于 2025-11-17 00:34:15 发布

原创

最新推荐文章于 2025-11-17 00:34:15 发布 · 2.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#openlayers

本文介绍了如何在OpenLayers中实现地图要素的编辑功能，通过ol.interaction.Select选择要素并使用ol.interaction.Modify进行编辑。在要素编辑后，通过监听'modifyend'事件获取并处理修改后的坐标，适用于地理信息系统中的地图编辑场景。

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]
                        ]])
                    }</