WEBGIS使用OpenLayers3中Interaction绘制长方形和正方形

admin管理员组

文章数量:1589753

 <input type="button" class="Interaction" value="drawRectangle" οnclick="drawRectangle()" />
 <input type="button" class="Interaction" value="addSquare" οnclick="addSquare()" />

//绘制长方形
        function drawRectangle() {
            //设置maxPoints及geometryFunction
            var maxPoints, geometryFunction;
            maxPoints = 2;
            geometryFunction = function (coordinates, geometry) {
                if (!geometry) {                                                    //!geometry  意思是如果没有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;
            };
            //新建source和layer
            var source = new ol.source.Vector({
                wrapX: false,
            });
            var layer = new ol.layer.Vector({
                source: source
            });
            //新建绘制长方形interaction
            var drawRectangle = new ol.interaction.Draw({
                source: source,
                type: "LineString",
                geometryFunction: geometryFunction,
                maxPoints: maxPoints
            });
            //将layer和interaction添加到地图中
            map.addLayer(layer);
            map.addInteraction(drawRectangle);
        }

//绘制正方形   ***成功
        function addSquare() {
            //新建source和layer
            var source = new ol.source.Vector({
                wrapX: false,
            });
            var layer = new ol.layer.Vector({
                source: source
            });
            //设置maxPoints及geometryFunction
            var maxPoints, geometryFunction;
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
            //新建绘制正方形interaction
            var drawSquare = new ol.interaction.Draw({
                source: source,
                type: "Circle",
                geometryFunction: geometryFunction,
                //maxPoints: maxPoints
            });
            //将layer和interaction添加到地图上
            map.addLayer(layer);
            map.addInteraction(drawSquare);
        }

本文标签： 正方形长方形WebGISInteraction