高德地图WebJS - 面要素知识点
1. AMap.Polygon 多边形
1.1 基础用法
多边形是由多个坐标点连接形成的封闭图形，常用于标注区域范围。
javascript
// 创建多边形
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 带洞多边形
javascript
// 创建带洞的多边形
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 多边形事件
javascript
// 点击事件
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 基础用法
javascript
// 创建圆形
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 圆形属性和方法
javascript
// 获取圆心
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 动态圆形
javascript
// 创建可拖拽的圆形
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 基础用法
javascript
// 创建矩形
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 矩形操作
javascript
// 获取矩形边界
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 多边形编辑器
javascript
// 创建多边形编辑器
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 圆形编辑器
javascript
// 创建圆形编辑器
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 面要素样式动画
javascript
// 创建呼吸效果的圆形
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 批量操作面要素
javascript
// 批量创建多边形
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 面要素碰撞检测
javascript
// 检测点是否在多边形内
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;
}