参考官网示例，利用
ol/interaction/Draw实现绘制Point，LineString，Polygon，Circle，Square，Box，Star等
- 引入控件
import Polygon from 'ol/geom/Polygon';
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw';
import {Vector as VectorLayer} from 'ol/layer';
import {Vector as VectorSource} from 'ol/source';
- 加载矢量图层
var source = new VectorSource({wrapX: false});
var vector = new VectorLayer({
source: source
});
map.addLayer(vector);
- 实现绘制方法
var draw; // global so we can remove it later
function addInteraction(drawType) {
var value = drawType;
if (value !== 'None') {
var geometryFunction;
if (value === 'Square') {
value = 'Circle';
geometryFunction = createRegularPolygon(4);
} else if (value === 'Box') {
value = 'Circle';
geometryFunction = createBox();
} else if (value === 'Star') {
value = 'Circle';
geometryFunction = 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 Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
draw = new Draw({
source: source,
type: value,
geometryFunction: geometryFunction
});
map.addInteraction(draw);
}
}
- 移除绘制事件
map.removeInteraction(draw);
value = "None";
- 封装Draw.js
import Polygon from 'ol/geom/Polygon';
import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Fill, Stroke, Style } from 'ol/style';
import Feature from 'ol/Feature';
import LinearRing from 'ol/geom/LinearRing';
export default {
draw: null,
map: null,
drawType: null,
source: null,
drawFeature: null,
init(map) {
this.map = map;
var source = new VectorSource({ wrapX: false });
this.source = source;
var vector = new VectorLayer({
source: source
});
this.map.addLayer(vector);
//添加扇形
this.addSector(this.map, [116.28, 39.54]);
},
addInteraction(drawType, callback) {
callback = callback || function () { };
var value = drawType;
console.log(value);
if (value) {
var geometryFunction;
if (value === 'Square') {
value = 'Circle';
geometryFunction = createRegularPolygon(4);
} else if (value === 'Box') {
value = 'Circle';
geometryFunction = createBox();
} else if (value === 'Star') {
value = 'Circle';
geometryFunction = 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 Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
this.draw = new Draw({
source: this.source,
type: value,
geometryFunction: geometryFunction
});
}
this.drawType = value;
console.log(this.draw);
this.draw.on("drawend", (evt) => {
this.drawFeature = evt.feature;
callback(this.drawFeature);
});
this.map.addInteraction(this.draw);
},
removeInteraction() {
this.map.removeInteraction(this.draw);
this.drawType = "None";
},
stop() {
this.draw.on("drawend", () => {
this.removeInteraction();
}
)
},
removeFeature() {
this.source.removeFeature(this.drawFeature);
},
// 添加扇形
addSector(map, coord) {
var origi_point = coord;//ol.proj.transform(coord, 'EPSG:4326', 'EPSG:3857');//根据经纬度生成圆点
//调用自定义的写好的生成扇形的 方法 //圆心 半径 边数 弧度 方向角(以y周围0)(可以自定义自己的x周一样)
var points = this.createRegularPolygonCurve(origi_point, 0.5, 100, 60, 300);
var iconFeature = new Feature({
geometry: points,
population: 4000,
//rainfall: 500
});
var iconStyle = new Style({
stroke: new Stroke({
color: 'red',
lineDash: [0],
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.2)'
})
});
//iconStyle.getImage().setScale(0.3);
iconFeature.setStyle(iconStyle);
var vectorSource = new VectorSource({
features: [iconFeature]
});
var vectorLayer = new VectorLayer({
source: vectorSource
});
map.addLayer(vectorLayer);
return { feature: iconFeature, layer: vectorLayer, sourceVector: vectorSource, point: coord };
},
createRegularPolygonCurve(origin, radius, sides, r, angel) {
var rotation = 360 - r;
var angle = Math.PI * ((1 / sides) - (1 / 2));
if (rotation) {
angle += (rotation / 180) * Math.PI;
}
var rotatedAngle, x, y;
var points = [];
for (var i = 0; i < sides; ++i) {
var an = i * ((360 - rotation) / 360);
rotatedAngle = angle + (an * 2 * Math.PI / sides);
x = origin[0] + (radius * Math.cos(rotatedAngle));
y = origin[1] + (radius * Math.sin(rotatedAngle));
points.push([x, y]);
}
if (rotation != 0) {
points.push(origin);
}
var ring = new LinearRing(points);
ring.rotate(Math.PI - ((angel - r / 2) / 180) * Math.PI, origin);
var poy = new Polygon([points]);
var a = ring.A;
poy.A = a;
return poy;
}
}
网友评论