椭圆形Ellipse 最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

AMap.Ellipse 对象为用户提供在地图图面绘制椭圆形覆盖物的能力。

提示

椭圆形覆盖物提供设置填充颜色、描边颜色、轮廓线样式等属性。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

椭圆形 Ellipse

创建步骤如下：

创建地图

// 创建地图
var map = new AMap.Map("container", {
  center: [ 116.387175, 39.876405 ], //设置地图初始化中心点位置
  mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
  viewMode: '2D'  //设置地图模式
  zoom: 13   //设置当前地图级别
});

设置椭圆形圆心和半径

// 椭圆形圆心和半径
//设置圆形位置
var center = new AMap.LngLat(116.433322, 39.900255);
//设置圆的半径大小
var radius = [ 2000, 1000 ];

创建椭圆形 Ellipse 实例

// 椭圆形 Ellipse 实例
var ellipse = new AMap.Ellipse({
  center:center ,
  radius:radius, //半径
  borderWeight: 3,
  strokeColor: "#FF33FF", 
  strokeOpacity: 1,
  strokeWeight: 6,
  strokeOpacity: 0.2,
  fillOpacity: 0.4,
  // 线样式还支持 'dashed'
  strokeStyle: 'dashed',
  strokeDasharray: [10, 10], 
  fillColor: '#1791fc',
  zIndex: 50,
})

椭圆形 Ellipse 对象添加到 Map

//椭圆形 Ellipse 对象添加到 Map
map.add(ellipse);
// 缩放地图到合适的视野级别
map.setFitView([ ellipse ])

查看属性和方法