---
title: 圆(弧)椭圆曲线
source: https://vjmap.com/guide/circlearc.html
---

# 圆(弧)椭圆曲线

## 圆弧填充

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/circle/circleArcFill)

用法:

```js
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);
```


<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: "sys_hello", // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapLightStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    showError(res.error)
    return;
}
// 获取地图范围
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(mapBounds);
//
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(mapBounds.center()), // 设置地图中心点
    zoom: 1, // 设置地图缩放级别
    pitch: 0,
    renderWorldCopies: false // 不显示多屏地图
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
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);
</pre>
</mapFrameEx>
<br/>
<br/>


## 圆弧路径

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/circle/circleArcPath)

用法:

```js
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);
```

## 圆填充

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/circle/circleFill)

用法:

```js
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);
```

## 圆路径

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/circle/circlePath)

用法:

```js
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);
```

## 椭圆弧填充

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseArcFill)

用法:

```js
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);
```

## 椭圆弧路径

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseArcPath)

用法:

```js
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);
```

## 椭圆填充

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseFill)

用法:

```js
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);
```

## 椭圆路径

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipsePath)

用法:

```js
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);
```

## 贝塞尔曲线路径

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/curve/curvePath)

用法:

```js
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);
```

## 贝塞尔曲线填充

[在线示例](https://vjmap.com/demo/#/demo/map/overlay/curve/curvePathFill)

用法:

```js
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);
```