import ol from "ol";
|
class drawFence {
|
constructor(props) {
|
//这里初始化class的时候需要传map对象进来
|
this.map = props;
|
this.source;
|
this.fenceLayer;
|
this.draw;
|
//样式
|
this.fenceStyle = 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'
|
})
|
})
|
})
|
this.init()
|
}
|
init() {
|
//临时图层的数据源
|
this.source = new ol.source.Vector();
|
//新建临时图层，并设置临时图层渲染各种要素的样式
|
this.fenceLayer = new ol.layer.Vector({
|
source: this.source,
|
style: this.fenceStyle
|
});
|
this.map.addLayer(this.fenceLayer)
|
}
|
drawingEnd(evt) {
|
let geo = evt.feature.getGeometry()
|
let type = geo.getType(); //获取类型
|
console.log(geo)
|
//根据不同的类型执行不同的操作
|
const handle = {
|
'Circle': () => {
|
//获取中心点和半径
|
let center = geo.getCenter()
|
let radius = geo.getRadius()
|
console.log(center, radius)
|
},
|
'Polygon': () => {
|
//获取坐标点
|
let points = geo.getCoordinates()
|
console.log(points)
|
},
|
'LineString': () => {
|
let points = geo.getCoordinates()
|
console.log(points)
|
}
|
}
|
if (handle[type]) handle[type]()
|
this.closeDraw()
|
}
|
closeDraw() {
|
this.map.removeInteraction(this.draw);
|
}
|
//画图
|
drawingFence(type) {
|
this.draw = new ol.interaction.Draw({
|
source: this.source, //设置要素源，绘制结束后将绘制的要素添加到临时图层
|
type: type, //绘制的类型
|
});
|
this.map.addInteraction(this.draw);
|
const that = this;
|
//绘图结束事件回调
|
this.draw.on('drawend', function (evt) {
|
that.drawingEnd(evt)
|
});
|
}
|
}
|
|
export default drawFence;
|
