OpenLayers基础教程——地图交互之绘制图形

最新推荐文章于 2026-07-06 15:24:03 发布

原创

最新推荐文章于 2026-07-06 15:24:03 发布 · 5.6k 阅读

本文介绍了如何在OpenLayers中通过用户交互实现地图上的点、线、面及特殊形状如正多边形、矩形的绘制，并探讨了图形样式定制和捕捉距离设置。

1、前言

前面的博客其实已经介绍过了如何在openlayers中绘制图形，不过那是基于已有的坐标进行绘制。很多时候，用户往往需要使用鼠标自行在地图上进行图形绘制，这就涉及到了openlayers中的地图交互功能，下面开始介绍。

2、绘制基础图形

在openlayers中，实现地图交互的类是ol.interaction，默认情况下，openlayers只支持Point(点)、LineString(线)、Polygon(面)、Circle(圆)这四种基本图形。下面一段代码实现了这四种基本图形的绘制：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <style>
        html, body, #map {
     
     
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #group {
     
     
            position: absolute;
            right: 20px;
            top: 20px;
            z-index: 200;
        }
    </style>
    <!-- openlayers -->
    <link href="libs/ol/ol.css" rel="stylesheet" />
    <script src="libs/ol/ol.js"></script>
    <!-- bootstrap -->
    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="libs/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="map">
        <div id="group" class="btn-group">
            <button id="point" type="button" class="btn btn-primary">画点</button>
            <button id="lineString" type="button" class="btn btn-success">画线</button>
            <button id="polygon" type="button" class="btn btn-warning">画面</button>
            <button id="circle" type="button" class="btn btn-info">画圆</button>
            <button id="stop" type="button" class="btn btn-danger">结束</button>
        </div>
    </div>

    <script>
        // 创建图层
        var source = new ol.source.Vector();
        var layer = new ol.layer.Vector({
     
     
            source: source
        });

        // 创建地图
        var map = new ol.Map({
     
     
            target: 'map',
            layers: [
                new ol.layer.Tile({
     
     
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
     
     
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 8
            })
        });

        //
        var draw;

        // 绘制点
        $('#point').click(function () {
     
     
            if (draw != undefined && draw != null) {
     
     
                map.removeInteraction(draw);
            }
            draw = new ol.interaction.Draw({
     
     
                source: source,
                type: 'Point',
                style: new ol.style.Style({
     
     
                    image: new ol.style.Circle({
     
     
                        radius: 10,
                        fill: new ol.style.Fill({
     
     
                            color: 'red'
                        })
                    })
                })
            });
            map.addInteraction(draw);
        })

        // 绘制线
        $('#lineString').click(function () {
     
     
            if (draw != undefined && draw != null) {
     
     
                map.removeInteraction(draw);
            }
            draw = new ol.interaction.Draw({
     
     
                source: source,
                type: 'LineString',
                style: new ol.style.Style({
     
     
                    image: new ol.style.Circle({
     
     
                        radius: 10,
                        fill: new ol.style.Fill({
     
     
                            color: 'red'
                        })
                    }),
                    stroke: new ol.style.Stroke({
     
     
                        color: 'yellow',
                        width: 2
                    })
                })
            });
            map.addInteraction(draw);
        })

        // 绘制面
        $('#polygon').click(function () {
     
     
            if (draw != undefined && draw != null) {
     
     
                map.removeInteraction(draw);
            }
            draw = new ol.interaction.Draw({
     
     
                source: source,
                type: 'Polygon',
                style: new ol.style.Style({
     
     
                    image: new ol.style.Circle({
     
     
                        radius: 10,
                        fill: new ol.style.Fill({
     
     
                            color: 'red'
                        })
                    }),
                    stroke: new ol.style.Stroke({
     
     
                        color: 'yellow',
                        width: 2
                    }),
                    fill: new ol.style.Fill({
     
     
                        color: 'blue'
                    })
                })
            });
            map.addInteraction(draw);
        })

        // 绘制圆
        $('#circle').click(function () {
     
     
            if (draw != undefined && draw != null) {
     
     
                map.removeInteraction(draw);
            }
            draw = new ol.interaction.Draw({
     
     
                source: source,
                type: 'Circle',
                style: new ol.style.Style({
     
     
                    image: new ol.style.Circle({
     
     
                        radius: 10,
                        fill: new ol.style.Fill({
     
     
                            color: 'red'
                        })
                    }),
                    stroke: new ol.style.Stroke({
     
     
                        color: 'yellow',
                        width: 2
                    }),
                    fill: new ol.style.Fill({
     
     
                        color: 'blue'
                    })
                })
            })