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

高德地图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 多边形属性配置

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;
}