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

AMap.Rectangle可以绘制矩形,矩形是由地图经纬度范围构成的可填充的图形。本文介绍如何在地图上绘制编辑矩形,并设置填充颜色、轮廓线样式等属性。

矩形绘制和编辑示例

1、矩形绘制

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 southWest = new AMap.LngLat(116.356449, 39.859008); //西南角的经纬度坐标
var northEast = new AMap.LngLat(116.417901, 39.893797); //东北角的经纬度坐标
var bounds = new AMap.Bounds(southWest, northEast); //创建一个地物对象的经纬度矩形范围

1.4 创建矩形 Rectangle 实例

//创建矩形 Rectangle 实例
var rectangle = new AMap.Rectangle({
 bounds: bounds, //矩形的范围
 strokeColor: "red", //轮廓线颜色
 strokeWeight: 6, //轮廓线宽度
 strokeOpacity: 0.5, //轮廓线透明度
 strokeStyle: "dashed", //轮廓线样式,dashed 虚线,还支持 solid 实线
 strokeDasharray: [30, 10], //勾勒形状轮廓的虚线和间隙的样式,30代表线段长度 10代表间隙长度
 fillColor: "blue", //矩形填充颜色
 fillOpacity: 0.5, //矩形填充透明度
 cursor: "pointer", //指定鼠标悬停时的鼠标样式
 zIndex: 50, //矩形在地图上的层级
});

1.5 矩形 Rectangle 对象添加到 Map

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

1.6 给 Rectangle 添加事件

//鼠标移入事件 
rectangle.on("mouseover", () => { 
 rectangle.setOptions({ //修改矩形属性的方法
 fillOpacity: 0.7,
 fillColor: "#7bccc4",
 });
});
//鼠标移出事件 
rectangle.on("mouseout", () => { 
 rectangle.setOptions({
 fillOpacity: 0.5,
 fillColor: "blue",
 });
});

2、矩形编辑

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

2.1 构造矩形编辑对象,并开启矩形的编辑状态

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

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

3.1 AMap.Rectangle