当前位置：首页 > news >正文

【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——＞多边形,圆形, 矩形,图形编辑器

news 2025/9/15 5:16:46

高德地图WebJS - 面要素知识点

1. AMap.Polygon 多边形

1.1 基础用法

多边形是由多个坐标点连接形成的封闭图形，常用于标注区域范围。

// 创建多边形
var polygon = new AMap.Polygon({path: [[116.403322, 39.920255],[116.410703, 39.897555], [116.402292, 39.892353],[116.389846, 39.891365]],strokeColor: "#FF33FF",strokeWeight: 6,strokeOpacity: 0.2,fillOpacity: 0.4,fillColor: '#1791fc',zIndex: 50,
});// 将多边形添加到地图
map.add(polygon);

1.2 多边形属性配置

属性	类型	说明
path	Array	多边形轮廓线的节点坐标数组
strokeColor	String	线条颜色，使用16进制颜色代码
strokeOpacity	Number	线条透明度，取值范围[0,1]
strokeWeight	Number	线条宽度，单位：像素
fillColor	String	多边形填充颜色
fillOpacity	Number	多边形填充透明度
zIndex	Number	多边形的叠加顺序

1.3 带洞多边形

// 创建带洞的多边形
var polygon = new AMap.Polygon({path: [// 外环[[116.403322, 39.920255],[116.410703, 39.897555],[116.402292, 39.892353],[116.389846, 39.891365]],// 内环（洞）[[116.400322, 39.910255],[116.405703, 39.907555],[116.399292, 39.902353]]],fillColor: '#1791fc',fillOpacity: 0.5
});

1.4 多边形事件

// 点击事件
polygon.on('click', function(e) {console.log('多边形被点击', e.lnglat);
});// 鼠标移入事件
polygon.on('mouseover', function(e) {polygon.setOptions({fillOpacity: 0.7,strokeWeight: 8});
});// 鼠标移出事件
polygon.on('mouseout', function(e) {polygon.setOptions({fillOpacity: 0.4,strokeWeight: 6});
});

2. AMap.Circle 圆形

2.1 基础用法

// 创建圆形
var circle = new AMap.Circle({center: [116.403322, 39.920255], // 圆心位置radius: 1000, // 半径，单位：米strokeColor: "#F33",strokeOpacity: 1,strokeWeight: 3,fillColor: "#ee2200",fillOpacity: 0.35
});// 将圆形添加到地图
map.add(circle);

2.2 圆形属性和方法

// 获取圆心
var center = circle.getCenter();
console.log('圆心坐标:', center.lng, center.lat);// 设置圆心
circle.setCenter([116.405322, 39.922255]);// 获取半径
var radius = circle.getRadius();
console.log('半径:', radius, '米');// 设置半径
circle.setRadius(1500);// 获取圆形边界
var bounds = circle.getBounds();
console.log('边界:', bounds);

2.3 动态圆形

// 创建可拖拽的圆形
var circle = new AMap.Circle({center: [116.403322, 39.920255],radius: 1000,draggable: true, // 允许拖拽strokeColor: "#F33",fillColor: "#ee2200",fillOpacity: 0.35
});// 监听拖拽事件
circle.on('dragging', function(e) {console.log('圆形正在拖拽', e.lnglat);
});circle.on('dragend', function(e) {console.log('拖拽结束', e.lnglat);
});

3. AMap.Rectangle 矩形

3.1 基础用法

// 创建矩形
var rectangle = new AMap.Rectangle({bounds: [[116.356449, 39.859008], // 西南角[116.417901, 39.893797]  // 东北角],strokeColor: "red",strokeWeight: 6,strokeOpacity: 0.5,fillOpacity: 0.4,fillColor: 'grey'
});// 添加到地图
map.add(rectangle);

3.2 矩形操作

// 获取矩形边界
var bounds = rectangle.getBounds();
console.log('矩形边界:', bounds);// 设置新的边界
rectangle.setBounds([[116.356449, 39.859008],[116.420901, 39.896797]
]);// 获取矩形中心点
var center = bounds.getCenter();
console.log('矩形中心:', center);

4. 面要素编辑

4.1 多边形编辑器

// 创建多边形编辑器
var polyEditor = new AMap.PolyEditor(map, polygon);// 开启编辑模式
polyEditor.open();// 监听编辑事件
polyEditor.on('addnode', function(event) {console.log('添加节点', event);
});polyEditor.on('removenode', function(event) {console.log('删除节点', event);
});polyEditor.on('adjust', function(event) {console.log('节点位置调整', event);
});// 关闭编辑模式
// polyEditor.close();

4.2 圆形编辑器

// 创建圆形编辑器
var circleEditor = new AMap.CircleEditor(map, circle);// 开启编辑
circleEditor.open();// 监听编辑事件
circleEditor.on('move', function(event) {console.log('圆形移动', event);
});circleEditor.on('adjust', function(event) {console.log('半径调整', event);
});

5. 实用技巧

5.1 面要素样式动画

// 创建呼吸效果的圆形
function createBreathingCircle(center, radius) {var circle = new AMap.Circle({center: center,radius: radius,strokeColor: "#FF0000",fillColor: "#FF0000",fillOpacity: 0.3});map.add(circle);// 呼吸动画var growing = true;var minRadius = radius * 0.8;var maxRadius = radius * 1.2;setInterval(function() {var currentRadius = circle.getRadius();if (growing) {if (currentRadius < maxRadius) {circle.setRadius(currentRadius + 10);} else {growing = false;}} else {if (currentRadius > minRadius) {circle.setRadius(currentRadius - 10);} else {growing = true;}}}, 50);return circle;
}

5.2 批量操作面要素

// 批量创建多边形
function createMultiplePolygons(polygonData) {var polygons = [];polygonData.forEach(function(data) {var polygon = new AMap.Polygon({path: data.path,fillColor: data.color || '#1791fc',fillOpacity: 0.4,strokeWeight: 2});// 添加点击事件polygon.on('click', function(e) {// 显示信息窗体var infoWindow = new AMap.InfoWindow({content: data.name || '未命名区域'});infoWindow.open(map, e.lnglat);});polygons.push(polygon);});// 批量添加到地图map.add(polygons);return polygons;
}// 使用示例
var polygonData = [{name: '区域A',color: '#FF0000',path: [[116.403322, 39.920255], [116.410703, 39.897555]]},{name: '区域B', color: '#00FF00',path: [[116.413322, 39.925255], [116.420703, 39.902555]]}
];createMultiplePolygons(polygonData);

5.3 面要素碰撞检测

// 检测点是否在多边形内
function isPointInPolygon(point, polygon) {return AMap.GeometryUtil.isPointInPolygon(point, polygon.getPath());
}// 检测两个多边形是否相交
function isPolygonIntersect(polygon1, polygon2) {var path1 = polygon1.getPath();var path2 = polygon2.getPath();// 检测path1的每个点是否在polygon2内for (var i = 0; i < path1.length; i++) {if (AMap.GeometryUtil.isPointInPolygon(path1[i], path2)) {return true;}}// 检测path2的每个点是否在polygon1内for (var j = 0; j < path2.length; j++) {if (AMap.GeometryUtil.isPointInPolygon(path2[j], path1)) {return true;}}return false;
}