This demonstrates the use of the
这个例子演示了为
geometryFunction
option for the ol.interaction.Draw
. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold the Shift
key. Square drawing is achieved by using type: 'Circle'
type with a geometryFunction
that creates a 4-sided regular polygon instead of a circle. Box drawing uses type: 'Circle'
with a geometryFunction
that creates a box-shaped polygon instead of a circle. Star drawing uses a custom geometry function that coverts a circle into a start using the center and radius provided by the draw interaction.这个例子演示了为
ol.interaction.Draw 使用 geometryFunction 设置。从上面的下拉列表中选择一种图形类型开始绘制。按住shift键激活自由绘制。正方形的绘制通过type: 'Circle'类型来实现,这个类型使用一个创建4边规整的多边形而不是一个圆形的geometryFunction。盒形的绘制使用type: 'Circle'类型,这个类型使用一个创建盒形的多边形而不是一个圆形的geometryFunction
。星形的绘制使用一个自定义的几何函数,这个函数使用交互绘制控件提供的中心和半径把一个圆形转换为一个星形。
代码:
<!DOCTYPE html>
<html>
<head>
<title>Draw Shapes</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Shape type </label>
<select id="type">
<option value="Square">Square</option>
<option value="Box">Box</option>
<option value="Star">Star</option>
<option value="None">None</option>
</select>
</form>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
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;
// 根据几何对象的类型调用相应的几何函数
if (value === 'Square') {
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (value === 'Box') {
value = 'Circle';
geometryFunction = ol.interaction.Draw.createBox();
} else if (value === 'Star') {
value = 'Circle';
// 自定义的几何函数
geometryFunction = function(coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
var center = coordinates[0];
var last = coordinates[1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.atan2(dy, dx);
var newCoordinates = [];
var numPoints = 12;
for (var i = 0; i < numPoints; ++i) {
var angle = rotation + i * 2 * Math.PI / numPoints;
var fraction = i % 2 === 0 ? 1 : 0.5;
var offsetX = radius * fraction * Math.cos(angle);
var offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
geometry.setCoordinates([newCoordinates]);
return geometry;
};
}
// 创建交互绘图控件并将其添加到map中
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value),
// 使用几何函数创建几何对象
geometryFunction: geometryFunction
});
map.addInteraction(draw);
}
}
/**
* Handle change event. // 处理change事件
*/
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>