1.添加用来存放图形的图层。
_this.drawSource =
new
ol.
source.
Vector({
//绘制层
wrapX
:
false,
})
_this.
drawVector =
new
ol.
layer.
Vector({
source
:
_this.
drawSource,
zIndex
:
7998,
});
_this.
map =
new
ol.
Map({
target
:
"mapCon",
logo
:
false,
//隐藏左下角
layers
: [
_this.
untiled,
_this.
drawVector,
_this.
drawLayer],
2.方法体
/**
* coordinate : 中心点经纬度
* data ： 需要携带的数据
* radius ： 半径 单位米
* id ： 唯一id ，用于删除图形等操作
* type ： 用于在绘制完成后是否回调 drawSuccess、
* zIndex ：显示层级
* showLabel : 是否显示中心半径文字
* fillColor ：填充颜色
* strokeColor ：边框颜色
*/
addCircle
: (
coordinate,
data,
radius,
id,
type ,
zIndex ,
showLabel ,
fillColor ,
strokeColor )
=>
_this.
addCircle(
coordinate,
data,
radius,
id,
type ,
zIndex ,
showLabel ,
fillColor ,
strokeColor ),
//绘圆
addCircle(
coordinate,
data = {},
radius =
300,
id =
"",
type =
1 ,
zIndex =
1 ,
showLabel =
true ,
fillColor =
'rgba(252, 144, 37, 0.7)',
strokeColor =
'#FD8E1F' ) {
const
_this =
this;
//先清空再绘制
_this.
clearDrawPolygon([
id]);
let
metersPerUnit =
_this.
map
.
getView()
.
getProjection()
.
getMetersPerUnit();
//获取在地图上的随影单位，否则半径不准
let
circleRadius =
radius /
metersPerUnit;
let
polygon =
new
ol.
geom.
Polygon.
fromCircle(
new
ol.
geom.
Circle(
coordinate,
circleRadius));
let
Circle =
new
ol.
Feature({
geometry
:
polygon,
data
:
data,
});
//设置id，用于后面删除编辑等操作
Circle.
setId(
id);
Circle.
setStyle(
new
ol.
style.
Style({
//填充色
fill
:
new
ol.
style.
Fill({
color
:
fillColor,
}),
//边线颜色
stroke
:
new
ol.
style.
Stroke({
color
:
strokeColor,
width
:
2,
lineDash
: [
1,
2,
3,
4,
5],
}),
image
:
new
ol.
style.
Circle({
radius
:
7,
fill
:
new
ol.
style.
Fill({
color
:
"#ffcc33",
}),
}),
//形状
text
:
new
ol.
style.
Text({
font
:
"15px Microsoft YaHei",
text
:
showLabel ? (
"半径：" +
radius +
"m") :
'',
fill
:
new
ol.
style.
Fill({
color
:
"red",
}),
stroke
:
new
ol.
style.
Stroke({
color
:
"#8B94F2",
lineCap
:
"butt",
width
:
1,
}),
}),
zIndex
:
zIndex
})
);
//将图形添加到绘制层中
_this.
drawSource.
addFeature(
Circle);
_this.
drawVector.
getSource().
changed(); }
3.使用方法
//this.map.addCircle([117,34],{},500,'idididididi', 2 , 5 , true);
this.
map.
addCircle(
trapeze, {},
radius,
id,
2,
5,
true);
