用openlayers3绘图(点、线、圆、正方形....)

最新推荐文章于 2025-06-30 11:55:28 发布

原创最新推荐文章于 2025-06-30 11:55:28 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

openlayers3 专栏收录该内容

1 篇文章

订阅专栏

本文记录了在项目中使用openlayers3实现点、线、圆和正方形等图形的绘制过程。主要步骤包括设置样式，创建矢量图层和数据源，以及初始化绘图交互对象。通过ol.style.Style()定义样式，ol.layer.Vector和ol.source.Vector存储绘制元素，利用ol.interaction.Draw实现绘图功能，特别提到画正方形和矩形需自定义geometryFunction。

用openlayers3绘图(点、线、圆、正方形…)

最近项目中使用到了openlayers3，在此记录下用openlayer实现绘图功能
实现该功能的主要步骤：

使用 ol.style.Style()实例化一个对象，用于设置绘画矢量要素的样式；
创建一个矢量图层（ol.layer.Vector）和矢量数据源（ol.source.Vector）并将图层添加到地图中，用于存储绘画的矢量要素；
实现绘图功能主要是初始化一个绘画交互对象（ol.interaction.Draw），该对象天然支持点（Point）、线（LineString）、多边形（Polygon）、圆（Circle），若要实现画正方形和矩形，要使用geometryFunction回调函数，具体参考代码；主要，初始化绘图交互对象时，一定要添加source数据源，否则绘图结束就会消失，无法保留矢量要素

HTML部分

 <div id="map">
        
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">多边形</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
            <option value="Rectangle">长方形</option>
        </select>
        <span id="coordinates"></span>
    </div>

javascript部分

<script>
        var shapeType = document.getElementById('type');
        var draw;
        //画图时样式
        var style = new ol.style.Style({
        	//线条样式
            stroke: new ol.style.Stroke({
                color: '#264df6',
                width: 2
            }),
            //填充
            fill: new ol.style.Fill({
                color: 'rgba(37,241,239,0.2)'
            }),
            //画点时需要
            image: new ol.style.Circle({
                radius: 7,
                //填充
                fill: new ol.style.Fill({
                    //填充颜色
                    color: '#e81818'
                })
            })
        })
        // 数据源
        var drawSoucre = new ol.source.Vector();
        // 数据源图层，绘图时图层
        var drawLayer = new ol.layer.Vector({
            source: drawSoucre,
            style: style
        });
        //初始化一个地图
        var map = new ol.Map({
            target: "map",
            //加载底图与绘画的图层
            layers: [new ol.layer.Tile({
                source: new ol.source.OSM()
            }), drawLayer],
            view: new ol.View({
                center: ol.proj.transform(
                    [104, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });

        function addInteraction() {
            var value=shapeType.value;
            if (shapeType != "null") {
                var geometryFunction, maxPoints;
                if (value == "Square") {
                    value = "Circle";
                    /*  
        				ol.interaction.Draw.createRegularPolygon(opt_sides, opt_angle)
           				Create a geometryFunction for type: 'Circle' 
                        that will create a regular polygon with a user specified number of sides and start angle instead of an ol.geom.Circle geometry.
                         在type:"Circle"下，创建一个带用户指定边数和起始角度带正多边形，opt_sides默认为32条边,当为32时，近似为圆
                      */
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                }
                else if (value === "Rectangle") {
                    value='LineString';
                    maxPoints=2;
                    geometryFunction = function (coordinates, geometry) {
                        //如果geometry对象不存在或者为空，则创建
                        if (!geometry) {
                            //多面几何图形下设置
                            geometry = new ol.geom.Polygon()
                        }
                        // 开始坐标
                        var start = coordinates[0];
                        // 结束坐标
                        var end = coordinates[1];
                        // 根据开始与结束坐标绘制,从起始点，回到起始点
                        geometry.setCoordinates([[
                            start, [start[0], end[1]], end, [end[0],start[1]], start]
                            ]);
                        // 返回几何图形坐标进行渲染
                        return geometry;
                    }
                }
                //当为线类型时，限制最大点数为2
                else if(value==="LineString"){
                    maxPoints=2;
                }
                // 初始化交互对象
                draw = new ol.interaction.Draw({
                    type: value,
                    //一定要添加绘画图层的数据源，否则画图完成后，无法保存矢量数据
                    source: drawLayer.getSource(),
                    // 更新几何坐标时调用该函数
                    geometryFunction: geometryFunction,
                    maxPoints: maxPoints
                })
                // 将交互对象添加到地图上
                map.addInteraction(draw);
            }
            //当画图结束后，获取画图形状的坐标
            draw.on("drawend",function(event){
                if(value=="Circle"){
                    console.log(event.feature.getGeometry())
                    // 圆心
                    var center=event.feature.getGeometry().getCenter();
                    // 半径
                    var radius=event.feature.getGeometry().getRadius();
                    var coordinates="圆心："+center+"半径："+radius;
                }
                else{
                    var coordinates=event.feature.getGeometry().getCoordinates();
                }            
            
            document.getElementById('coordinates').innerHTML=coordinates
           
        })
        }
        //监听画图样式是否改变
        shapeType.onchange=function(){
            map.removeInteraction(draw);
            drawLayer.getSource().clear()
            addInteraction();
        }
 </script>