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