椭圆形绘制和编辑 最后更新时间: 2024年01月29日

AMap.Ellipse可以绘制椭圆形，本文介绍如何在地图上绘制编辑椭圆形，并设置填充颜色、轮廓线样式等属性。

椭圆形绘制和编辑示例

1、绘制椭圆形 Ellipse

1.1 准备

1.2 创建地图

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

1.3 设置椭圆形圆心和半径

var center = new AMap.LngLat(116.433322, 39.900255); //设置椭圆圆心位置
var radius = [2000, 1000]; //设置椭圆的半径大小，单位：米，2000代表横轴半径，1000代表纵轴半径

1.4 创建椭圆形 Ellipse 实例

//椭圆形 Ellipse 实例
var ellipse = new AMap.Ellipse({
  center: center, //椭圆圆心位置
  radius: radius, //椭圆的半径大小
  strokeColor: "#FF33FF", //轮廓线颜色
  strokeWeight: 6, //轮廓线宽度
  strokeOpacity: 0.2, //轮廓线透明度
  fillOpacity: 0.4, //椭圆形填充透明度
  strokeStyle: "dashed", //轮廓线样式，dashed 虚线，还支持 solid，实线
  strokeDasharray: [20, 10], //勾勒形状轮廓的虚线和间隙的样式，20代表线段长度 10代表间隙长度
  fillColor: "#1791fc", //椭圆形填充颜色
  zIndex: 50, //椭圆形在地图上的层级
});

1.5 椭圆形 Ellipse 对象添加到 Map

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

1.6 给 Ellipse 添加事件

//鼠标移入事件
ellipse.on("mouseover", () => { 
  ellipse.setOptions({ //修改椭圆形属性的方法
    fillOpacity: 0.7,
    fillColor: "#7bccc4",
  });
});
//鼠标移出事件
ellipse.on("mouseout", () => { 
  ellipse.setOptions({
    fillOpacity: 0.4,
    fillColor: "#1791fc",
  });
});

2、椭圆形编辑

AMap.EllipseEditor椭圆形编辑插件，支持对原有的椭圆形进行修改或直接在地图上动态绘制椭圆形，通过调整椭圆形的位置、大小，从而实现实时编辑和绘制

2.1 构造椭圆形编辑对象，并开启椭圆形的编辑状态

//引入椭圆形编辑器插件
map.plugin(["AMap.EllipseEditor"], function () {
  //实例化椭圆形编辑器，传入地图实例和要进行编辑的椭圆形实例
  var ellipseEditor = new AMap.EllipseEditor(map, ellipse);
  //开启编辑模式
  ellipseEditor.open();
});

3、本章涉及的属性及方法说明

3.1 AMap.Ellipse