开发 地图 JS API 2.0 进阶教程 椭圆形绘制和编辑

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

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

椭圆形绘制和编辑示例

1、绘制椭圆形 Ellipse

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

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();
});
提示

ellipseEditor.open()为开始编辑对象的方法,如果你想结束编辑可以调用ellipseEditor.close()方法。

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

3.1 AMap.Ellipse

参数/方法

说明

类型 

参数值描述

默认值

center

圆心位置

Array

经纬度对象或经纬度构成的一维数组。例如:

AMap.LngLat(116.39,39.9)[116.39, 39.9]

-

radius

椭圆的半径,用2个元素的数组表示,单位:米

Array

 [1000, 2000] 表示横向半径是1000,纵向的半径是2000

 [1000, 1000]

strokeColor

轮廓线颜色

String

使用16进制颜色代码赋值

#00D3FC

strokeOpacity

轮廓线透明度

Number

取值范围[0,1] ,0表示完全透明,1表示不透明。

0.9

strokeWeight

轮廓线宽度

Number

-

2

strokeStyle

轮廓线样式

String

实线:'solid',虚线:'dashed'

'solid'

strokeDasharray

勾勒形状轮廓的虚线和间隙的样式

Array

此属性在strokeStyle为 dashed时有效,详见 参考手册

-

fillOpacity

椭圆形填充透明度

Number

取值范围[0,1] ,0表示完全透明,1表示不透明。

0.5

fillColor

椭圆形填充颜色

String

使用16进制颜色代码赋值

#00D3FC

zIndex

椭圆形的叠加顺序。地图上存在多个形状叠加时,通过该属性使级别较高的形状在上层显示

Number

-

50

返回顶部 示例中心 常见问题 智能客服 公众号
二维码