Openlayers常用的API了解的差不多了，就开始进入实战了，首先从绘制基本的图形开始，这里主要介绍一下绘制点，线，面，多边形，矩形，正文形，圆，五角星，相关的代码来自于官网的例子，这里只是对其进行了总结，绘制后的效果如下所示：
图形绘制.png
实现方法
1.创建画笔
在使用绘制功能前，首先需要创建一个绘制的交互操作，可以称之为画笔。如下所示：
this.draw = new ol.interaction.Draw({
source:sourse,
type:type,
geometryFunction:geometryFunction
})
其中数据源为矢量数据源，type为绘制的类型，包括Point，LineString，Polygon，Circle等类型。
2.设置样式
如果不用默认的样式，可以图层的几何图形设置样式，如下所示：
var 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,
lineCap:'square'
}),
image: new ol.style.Circle({//点样式使用一个圆
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
});
this.vectorLayer.setStyle(style)
实现完这两步后，就可以执行绘制的功能了，为了方便以后复用，特意封装在一个文件中，如下所示。
//绘制工具
class DrawUtil{
constructor(map){
this.map = map
this.vectorLayer = LayerUtil.vectorLayer()
map.addLayer(this.vectorLayer)
this._initStyle()
this._initControl()
}
//初始化样式
_initStyle(){
var 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,
lineCap:'square'
}),
image: new ol.style.Circle({//点样式使用一个圆
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
});
this.setStyle(style)
}
//初始化控件
_initControl(){
var drawToolLayout = document.createElement('div')
drawToolLayout.className = 'draw-tool-layout'
var control = new ol.control.Control({element: drawToolLayout})
this.map.addControl(control)
var typeList = [
{name:'点',type:'Point'},
{name:'线',type:'LineString'},
{name:'面',type:'Polygon'},
{name:'圆',type:'Circle'},
{name:'三角形',type:'Triangle'},
{name:'矩形',type:'Box'},
{name:'正方形',type:'Square'},
{name:'五角星',type:'Star'},
{name:'重置',type:'None'}
]
var self = this;
typeList.forEach(item =>{
var button = document.createElement('button')
button.innerHTML = item.name;
button.onclick = function (event) {
self.drawGeometry(event,item.type)
}
drawToolLayout.appendChild(button)
})
}
//设置样式
setStyle(style){
this.style = style
this.vectorLayer.setStyle(style)
}
//绘制
drawGeometry(event,type){
event.stopPropagation()
var sourse = this.vectorLayer.getSource(),
geometryFunction
if(this.draw){
this.map.removeInteraction(this.draw)
this.map.removeInteraction(this.modify)
this.draw = null
this.modify = null
}
if(type === 'None'){
sourse.clear()
return;
}
if(type === 'Box'){
type = 'Circle'
geometryFunction = ol.interaction.Draw.createBox()
}else if(type === 'Square'){
type = 'Circle'
geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
}else if(type === 'Triangle'){
type = 'Circle'
geometryFunction = ol.interaction.Draw.createRegularPolygon(3)
}else if(type === 'Star'){
type = 'Circle'
geometryFunction = this.createStar();
}
this.draw = new ol.interaction.Draw({
source:sourse,
type:type,
geometryFunction:geometryFunction
})
this.modify = new ol.interaction.Select({
source:sourse,
})
this.map.addInteraction(this.modify)
this.map.addInteraction(this.draw)
}
createStar(){
return function(coordinates, geometry) {
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())
if (!geometry) {
geometry = new ol.geom.Polygon([newCoordinates])
} else {
geometry.setCoordinates([newCoordinates])
}
return geometry
};
}
}
相关的代码以后将统一更新在github上。
个人博客
