腾讯地图JavaScript API GL添加批量多边形

最新推荐文章于 2026-06-17 10:40:45 发布

原创最新推荐文章于 2026-06-17 10:40:45 发布 · 379 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #开发语言

详细配置请看官方文档：JavaScript API | 腾讯位置服务

const breedPondArr = [
    [
        {
            "lat": 29.954974,
            "lng": 119.430508
        }, {
            "lat": 29.965964,
            "lng": 119.450608
        }, {
            "lat": 29.965944,
            "lng": 119.430508
        }
    ],
    [
        {
            "lat": 29.965654,
            "lng": 119.450857
        }, {
            "lat": 29.975444,
            "lng": 119.460657
        }, {
            "lat": 29.968634,
            "lng": 119.467857
        }
    ]
]

createPolygon(breedPondArr, '#1b4073', 'rgba(0,0,0,.3)')

// 创建批量添加多边形的方法
function createPolygon(path, color, bordercolor) {
    // 绘制polygon
    var polygonGeometries = [];
    path.forEach(polygon => {
    let geo = {};
    let path = [];
    polygon.forEach(p => {
    path.push(new TMap.LatLng(p.lat, p.lng));
        });
    geo.paths = path;
    geo.styleId = 'polygon'
    polygonGeometries.push(geo);
    })
    // console.log('polygonGeometries', polygonGeometries)

    var polygonLayer = new TMap.MultiPolygon({
        map: map,
        zIndex: 1,
        styles: {
        // 多边形的相关样式
                polygon: new TMap.PolygonStyle({
                color: color, // 面填充色
                showBorder: false, // 是否显示拔起面的边线
                borderColor: bordercolor, // 边线颜色
                }),
           },
         geometries: polygonGeometries,
        });
}