var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new Draw({
source: source,
type: 'Circle'
});
map.addInteraction(draw);
}
}
这是OpenLayers官方自带的画圆的方法,实际体验非常不好用,都不知道画哪里去了,而且OpenLayers自带的还没有画椭圆,没办法了,只能自己写方法去画圆、画椭圆了!
画圆方法:先画一个矩形,获取中心点到矩形左边线的距离作为半径,生成一个圆。
画椭圆方法:先画一个矩形,获取中心点到矩形左边线的距离作为半径,生成一个圆,再获取中心点到上边线的距离,然后对圆进行一个类似压缩似的操作,形成一个椭圆。
注:代码用到了turf第三方库。
画圆代码:
// 画矩形
this.draw = new Draw({
source: drawLayer.getSource(),
type: 'Circle',
geometryFunction: createBox(),
style: this.styleFunction,
dragVertexDelay: 0,
finishCondition: function(mapBrowserEvent) {
// console.log(mapBrowserEvent)
}
})
const circleFeature = _this.createCircle(feature)
// 生成圆
createCircle(feature) {
const coords = feature.getGeometry().getCoordinates()
const poly = turf.polygon(coords)
var center = turf.center(poly)
const radiusMajor = this.getRadiusMajor(center, coords)
const centerCoord = center.geometry.coordinates
var circle = new Circle(centerCoord, radiusMajor)
var polygon = fromCircle(circle, 64)
var newFeature = new Feature(polygon)
return newFeature
},
// 获取圆心到左边线距离
getRadiusMajor(center, coords) {
if (coords[0].length !== 5) {
this.$message.error('当前绘画的不是矩形')
return
}
const centerCoord = center.geometry.coordinates
const coord = coords[0][3]
const coord1 = coords[0][4]
const lineCenter = [[coord[0], (coord[1] + coord1[1]) / 2], centerCoord]
const lineString = new LineString(lineCenter)
const lineLength = lineString.getLength()
return lineLength
},
画椭圆代码:
// 画矩形
this.draw = new Draw({
source: drawLayer.getSource(),
type: 'Circle',
geometryFunction: createBox(),
style: this.styleFunction,
dragVertexDelay: 0,
finishCondition: function(mapBrowserEvent) {
// console.log(mapBrowserEvent)
}
})
const ellipseFeature = _this.createEllipse(feature)
// 生成椭圆
createEllipse(feature) {
const coords = feature.getGeometry().getCoordinates()
const poly = turf.polygon(coords)
var center = turf.center(poly)
const radiusMajor = this.getRadiusMajor(center, coords)
const radiusMinor = this.getRadiusMinor(center, coords)
const centerCoord = center.geometry.coordinates
var circle = new Circle(centerCoord, radiusMinor)
var polygon = fromCircle(circle, 64)
polygon.scale(radiusMajor / radiusMinor, 1)
const newFeature = new Feature(polygon)
return newFeature
},
// 获取圆心到左边线距离
getRadiusMajor(center, coords) {
if (coords[0].length !== 5) {
this.$message.error('当前绘画的不是矩形')
return
}
const centerCoord = center.geometry.coordinates
const coord = coords[0][3]
const coord1 = coords[0][4]
const lineCenter = [[coord[0], (coord[1] + coord1[1]) / 2], centerCoord]
const lineString = new LineString(lineCenter)
const lineLength = lineString.getLength()
return lineLength
},
// 获取圆心到上边线距离
getRadiusMinor(center, coords) {
if (coords[0].length !== 5) {
this.$message.error('当前绘画的不是矩形')
return
}
const centerCoord = center.geometry.coordinates
const coord = coords[0][0]
const coord1 = coords[0][1]
const lineCenter = [[(coord[0] + coord1[0]) / 2, coord[1]], centerCoord]
const lineString = new LineString(lineCenter)
const lineLength = lineString.getLength()
return lineLength
},
绘制效果: