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

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

圆形覆盖物示例

1、绘制圆形 Circle

1.1 准备

1.2 创建地图

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

1.3 设置圆心位置和半径

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

1.4 创建圆形 Circle 实例

//创建圆形 Circle 实例
var circle = new AMap.Circle({
  center: center, //圆心
  radius: radius, //半径
  borderWeight: 3, //描边的宽度
  strokeColor: "#FF33FF", //轮廓线颜色
  strokeOpacity: 1, //轮廓线透明度
  strokeWeight: 6, //轮廓线宽度
  fillOpacity: 0.4, //圆形填充透明度
  strokeStyle: "dashed", //轮廓线样式
  strokeDasharray: [10, 10],
  fillColor: "#1791fc", //圆形填充颜色
  zIndex: 50, //圆形的叠加顺序
});

1.5 圆形 Circle 对象添加到 Map

//圆形 Circle 对象添加到 Map
map.add(circle);
//根据覆盖物范围调整视野
map.setFitView([ circle ])

1.6 给 Circle 添加事件

//鼠标移入事件
circle.on("mouseover", function () { 
  console.log("鼠标移入");
});       

2、圆形编辑

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

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

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

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

3.1 AMap.Circle