接前一篇《》,绘图功能虽然实现了,但是仅仅开发到这里,做Demo还行,如果要应用到项目中,
显然是不太灵活,因此,将绘图功能封装到控件中,作为工具,将更有利于我们来使用。
先来看下openlayers自带的控件。
1、ol.control.Control类
openlayers中所有控件的基类,因此,我们自定义绘图控件,以继承该类。
2、需求
1)、一个工具条,包含指针、绘点、绘线、绘面、绘圆、绘矩形、清空绘制等按钮;
2)、单击各个绘图按钮将切换至对应的绘图状态;
2)、单击指针按钮切换为非绘图状态;
3)、单击清空绘制清理掉所有已绘制的图形。
3、代码实现
1)、继承
ol.control.DrawControl = function(opt_options){
var opt_options = opt_options || {};
//定义按钮
this.drawType = ['None', 'Point', 'LineString', 'Polygon', 'Circle', 'Box', 'Clear'];
var defaultControlClassName = 'ol-unselectable ol-control';
this.element = document.createElement('div');
this.element.className = defaultControlClassName + ' ' + 'drawtools';
var createchildElement = function(options){
var btn = document.createElement('button');
btn.className = options.class;
btn.id = options.id;
var tipLable = 'Draw ' + options.value;
btn.title = tipLable;
btn.type = options.type;
btn.value = options.value;
return btn;
};
this.drawType.forEach(element => {
var btn = createchildElement({
type: 'button',
class: 'drawBtn',
value: element,
id: 'ol-draw-' + element.toLocaleLowerCase()
})
btn.onclick = function(evt){
evt.preventDefault();
this.btnFouceChanged(evt);
var value = evt.target.getAttribute('value');
this.addInteraction(value);
}.bind(this);
this.element.appendChild(btn);
});
this.source_ = undefined;
this.overLay_ = undefined;
this.drawing_ = undefined;
ol.control.Control.call(this, {
element: this.element,
target: opt_options.target
})
}
2)属性方法
主要这个方法,用于实现绘图命令切换
ol.control.DrawControl.prototype.addInteraction = function(shapeType){
if(shapeType !== 'None'){
var geomFunc = undefined;
if(shapeType === 'Clear'){
this.source_.clear();
return;
}
if(shapeType === 'Box') {
shapeType = 'Circle';
geomFunc = ol.interaction.Draw.createBox();
}
this.drawing_ = new ol.interaction.Draw({
source: this.source_,
type: shapeType,
freehand: false, //按住shift可以跟踪鼠标绘制
geometryFunction: geomFunc
});
this.getMap().addInteraction(this.drawing_);
}
}
3)按钮样式
接下来就是按钮样式了,单独用一个css文件。
4、结果
点击按钮即可以进行绘图操作。
控件及完整Demo下载:
openlayers绘图控件
本文基于openlayers4进行开发测试,但同样适应于openlayers5。