# 圆(弧)椭圆曲线
# 圆弧填充
用法:
const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
center: center,
radius: radius,
startAngle: 120,
endAngle: 60,
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
circle.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 圆弧路径
用法:
const cirleArcPath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 5, 360, 120, 60, false);
let path = new vjmap.Polyline({
data: map.toLngLat(cirleArcPath),
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
path.addTo(map);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 圆填充
用法:
const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
center: center,
radius: radius,
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
circle.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 圆路径
用法:
const cirlePath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 10, 120, 0, 360, false);
let path = new vjmap.Polyline({
data: map.toLngLat(cirlePath),
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
path.addTo(map);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 椭圆弧填充
用法:
const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipseArcFill = new vjmap.EllipseFill({
center: center,
majorAxisRadius: majorAxis,
minorAxisRadius: minorAxis,
startAngle: 60,
endAngle: 300,
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
ellipseArcFill.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 椭圆弧路径
用法:
const majorAxisRadius = mapExtent.width() / 5;
const minorAxisRadius = mapExtent.width() / 10;
const ellipseArcPath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 100, 300, false);
let path = new vjmap.Polyline({
data: map.toLngLat(ellipseArcPath),
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
path.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 椭圆填充
用法:
const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipse = new vjmap.EllipseFill({
center: center,
majorAxisRadius: majorAxis,
minorAxisRadius: minorAxis,
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
ellipse.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 椭圆路径
用法:
const majorAxisRadius = mapExtent.width() / 4;
const minorAxisRadius = mapExtent.width() / 6;
const ellipsePath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 0, 360, false);
let path = new vjmap.Polyline({
data: map.toLngLat(ellipsePath),
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
path.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 贝塞尔曲线路径
用法:
const mapBounds = map.getGeoBounds(0.4);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
// 把曲线上的点转为贝塞尔曲线参数
const c = vjmap.polylineToBezierCurve(curvePoints);
// 据贝塞尔曲线参数离散成线
const curvePath = vjmap.bezierCurveToPolyline(c);
let path = new vjmap.Polyline({
data: map.toLngLat(curvePath),
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
path.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 贝塞尔曲线填充
用法:
const mapBounds = map.getGeoBounds(0.2);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.min.x, mapBounds.max.y]).toArray());
curvePoints.push(mapBounds.min.toArray());
// 把曲线上的点转为贝塞尔曲线参数
const c = vjmap.polylineToBezierCurve(curvePoints);
// 据贝塞尔曲线参数离散成线
const curvePath = vjmap.bezierCurveToPolyline(c);
let polygon = new vjmap.Polygon({
data: map.toLngLat(curvePath),
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21