Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines and polygons, hold the Shift key. Square drawing is achieved by using Circle mode with a geometryFunction that creates a 4-sided regular polygon instead of a circle. Box drawing uses a custom geometryFunction that takes start and end point of a line with 2 points and creates a rectangular box. Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last point. To activate freehand drawing for lines and polygons, hold the var raster = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), var source = new ol.source.Vector({wrapX: false}), var vector = 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' }) }) }) }), var map = new ol.Map({ layers: [raster, vector], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }), var typeSelect = document.getElementById('type'), var draw, // global so we can remove it later function addInteraction() { var value = typeSelect.value, if (value !== 'None') { var geometryFunction, maxPoints, if (value === 'Square') { value = 'Circle', geometryFunction = ol.interaction.Draw.createRegularPolygon(4), } else if (value === 'Box') { value = 'LineString', maxPoints = 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: /** @type {ol.geom.GeometryType} */ (value), geometryFunction: geometryFunction, maxPoints: maxPoints }), map.addInteraction(draw), } } /** * Let user change the geometry type. * @param {Event} e Change event. */ typeSelect.onchange = function(e) { map.removeInteraction(draw), addInteraction(), }, addInteraction(), <,div id='map' class='map'>,<,/div>, <,form class='form-inline'>, <,label>,Geometry type <,/label>, <,select id='type'>, <,option value='Point'>,Point<,/option>, <,option value='LineString'>,LineString<,/option>, <,option value='Polygon'>,Polygon<,/option>, <,option value='Circle'>,Circle<,/option>, <,option value='Square'>,Square<,/option>, <,option value='Box'>,Box<,/option>, <,option value='None'>,None<,/option>, <,/select>, <,/form>, Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 25, 2015 @ 12:00 am