椭圆形绘制和编辑 最后更新时间: 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