OpenLayers教程：图形绘制之编辑图形

最新推荐文章于 2025-06-25 14:32:06 发布

原创

最新推荐文章于 2025-06-25 14:32:06 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

除了能够交互式地绘制几何图形，OpenLayers还支持我们编辑已经绘制的几何图形。

ol.interaction.Modify类封装了编辑图形的功能，只要将它初始化作为交互控件加入Map对象，就可以对几何图形进行动态编辑。

来看示例：

editGraphic.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑图形</title>
    <link rel="stylesheet" href="../v5.3.0/css/ol.css" />
    <script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <form>
        <label>Geometry type &nbsp;</label>
        <select id="type">
          <opti