OpenLayer学习之绘制几何图形

一、OpenLayer3可以绘制一些基本的图形，例如点、线、多边形、圆，这四个基本的图形，如果想绘制出正方形，长方形需要用到geometryFunction函数进行变更，总体思路是加载一个矢量图层（vector）作为几何图形展示平台，还需要用到Interaction交互；开车

二、HTML布局

    <div id="drawTool">
        <select>
            <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="Box">长方形</option>
        </select></div>
    <div id="map" style="width: 100%"> </div> 

三、地图函数（这里我用到Jquery）

            var source = new ol.source.Vector()
            var layerVetor1 = new ol.layer.Vector({
                source: source
            });

            var map1 = new ol.Map({
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({

                    center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 10
                }),
                target: 'map',
                controls: ol.control.defaults().extend([
                    new ol.control.FullScreen(),
                    new ol.control.OverviewMap(),
                    new ol.control.Zoom(),
                    new ol.control.MousePosition()
                ]),
            });
            map1.addLayer(layerVetor1);

四、绘图变量与函数

            var draw;
            var typeselect = $("#drawTool");
            //绘图函数
            function Draw1() {
                Drawtype = $("#drawTool option:selected").val()
                console.log(Drawtype);
                if (Drawtype != 'none') {
                    if (source==null) {
                        source = new ol.source.Vector({ wrapX: false })
                        layerVetor1.setSource(source);
                    }
                    var geometryFunction, maxPoint;
                    if (Drawtype == 'Square') {
                        Drawtype = 'Circle';
                        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);

                    }
                    if (Drawtype == 'Box') {
                        Drawtype = 'LineString';
                        //设置最大点数
                        maxPoint = 2;
                        //变更函数
                        geometryFunction= function(coordinates, geometry){
                            if(!geometry){
                                geometry = new ol.geom.Polygon(null);
                            }
                            var start = coordinates[0];
                            var end = coordinates[1];
                            geometry.setCoordinates([
                                [start, [start[0], end[1]], end, [end[0], start[1]], start]
                            ]);
                            return geometry;
                        }
                    }
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: Drawtype,
                        wrapX: false,
                        maxPoints: maxPoint,
                        geometryFunction:geometryFunction,
                        style: new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255, 255, 255, 0.2)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#ffcc33',
                                width: 2
                            }),
                            image: new ol.style.Circle({
                                radius: 7,
                                fill: new ol.style.Fill({
                                    color: '#ffcc33'
                                })
                            })
                        })
                    })
                    map1.addInteraction(draw);
                }
                else {
                    source= null
                    layerVetor1.setSource(source);
                }

            }

 

五、select的改变事件

            typeselect.change(function () {
                map1.removeInteraction(draw);
                Draw1();
            })

 

六、调用方法

Draw1();

七、效果图

八、总结，整个流程关键的时使用 ol.interaction.Draw函数，结合下拉框中的选中value去绘制不同的图形，本文参考了郭明强的书