OpenLayers之图形绘制二:绘制几何图形

目录

 

一、根据已有的空间坐标信息绘制图形

二、交互式图形绘制


一、根据已有的空间坐标信息绘制图形

    编写代码,通过一个矢量图层分别加载单个点、线、多边形矢量要素。

    代码如下:

<body>
    <div id="map"></div>

    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        })
        //点要素
        var pointFeature = new ol.Feature(
            new ol.geom.Point([0, 0])
        );  
        //线要素
        var lineFeature = new ol.Feature(
            new ol.geom.LineString(
                [
                    [-1e7, 1e6],
                    [-1e6, 3e6]
                ]
            )
        );
        //多边形要素
        var polygonFeature = new ol.Feature(
            new ol.geom.Polygon(
                [
                    [
                        [-3e6, -1e6], 
                        [-3e6, 1e6],
                        [-1e6, 1e6],
                        [-1e6, -1e6],
                        [-3e6, -1e6]
                    ]
                ]
            )
        );
        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector({
            features: [
                pointFeature,
                lineFeature,
                polygonFeature
            ]
        });
        var vectorLayer = new ol.layer.Vector({
            source: source,
            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'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vectorLayer);
    </script>
</body>

二、交互式图形绘制

    根据设置的几何图形类型交互绘制图形

    代码如下:

<body>
    <div id="menu">
        <label>几何图形类型:&nbsp;</label>
        <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="Box">长方形</option>
        </select>
    </div>
    <div id="map"></div>

    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });

        var typeSelect = document.getElementById('type');       //绘制类型选择对象
        var draw;                          //ol.Interaction.Draw类的对象

        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector();
        var vectorLayer = new ol.layer.Vector({
            source: source,
            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'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vectorLayer);           

        //用户更改绘制类型触发的事件
        typeSelect.onchange = function(e){
            map.removeInteraction(draw);        //移除绘制图形控件
            addInteraction();                   //添加绘制图形控件
        };

        function addInteraction(){
            var typeValue = typeSelect.value;       //绘制类型
            if(typeValue !== 'None'){
                var geometryFunction, maxPoints;
                if(typeValue === 'Square'){                 //正方形
                    typeValue = 'Circle';               //设置绘制类型为Circle
                    //设置几何信息变更函数,即创建正方形
                    geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                }else if(typeValue === 'Box'){              //长方形
                    typeValue = 'LineString';           //设置绘制类型为LineString
                    maxPoints = 2;                      //设置最大点数为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;
                    };
                }
                console.log(typeValue);
                //实例化图形绘制控件对象并添加到地图容器中
                draw = new ol.interaction.Draw({
                    source: source,
                    type: typeValue,                                //几何图形类型
                    geometryFunction: geometryFunction,             //几何信息变更时的回调函数
                    maxPoints: maxPoints                            //最大点数
                });
                map.addInteraction(draw);
            }else{
                //清空绘制的图形
                source.clear();
            }
        }
    </script>
</body>

    在本示例中,加载一个矢量图层绘制vector,在实例化此图层对象时统一设置了绘制的几何图形样式,然后通过调用addInteraction()函数加载交互绘制图形控件(ol.interaction.Draw),实现基本几何图形的绘制功能。

    交互绘制几何图形的关键是实例化ol.interaction.Draw控件,设置其关键参数,并将此控件添加到地图容器中。直接支持点、线、圆、多边形图形,在创建交互控件时,直接设置控件对象的type参数即可;除此之外,正方形和长方形图形作为规则多边形,需要通过geometryFunction参数单独处理。

    ol.interaction.Draw的主要参数:

         1. source: 绘制图层的数据源,即承载几何图形要素的数据源。

      2. type:绘制的几何图形类型,即ol.geom.GeometryType,包括Point、LineString、Polygon、MultiPoint、MultiLineString、MultiPolygon、Circle。

        3. geometryFunction:当几何坐标更新时调用此函数,在此当绘制类型为“正方形”和“长方形”时,需要通过此函数设置其几何对象。所以“正方形”时通过ol.interaction.Draw.createRegularPolygon(4)创建该函数,为“长方形”时则调用多边形(ol.geom.Polygon)的setCoordinates方法设置多边形的几何坐标串。

        4. maxPoints:绘制图形结束前多边形或线的最大点数,线默认为2,多边形默认为3。

转载自:https://blog.csdn.net/qq_35732147/article/details/81663019

You may also like...