示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 覆盖物 > 覆盖物群组 >

高德 开发 地图 JS API 教程 覆盖物 覆盖物群组

更新时间:2018年05月28日


本章介绍如何对一组覆盖物集合进行操作。分以下两节:

1.  覆盖物集合 OverlayGroup

2.  GeoJSON类 GeoJSON

覆盖物群组 OverlayGroup

当用户需要对一组覆盖物集合做整体操作时,可以使用 AMap.OverlayGroup 类创建的实例来操作,以避免通过循环来一个个设置属性。

// 覆盖物1
var polyline1 = new AMap.Polyline({
    path: [
        new AMap.LngLat("116.368904","39.913423"),
        new AMap.LngLat("116.382122","39.901176"),
   ]
});

// 覆盖物2
var polyline2 = new AMap.Polyline({
    path: [
        new AMap.LngLat("116.387271","39.912501"),
        new AMap.LngLat("116.398258","39.904600")
    ]
});

// 创建覆盖物群组,传入覆盖物组成的数组
var overlayGroup = new AMap.OverlayGroup([polyline1, polyline2]);

// 对此覆盖物群组设置同一属性
overlayGroup.setOptions({
    strokeColor: 'red',
    strokeWeight: 5
});

// 统一添加到地图实例上
map.add(overlayGroup);

// 同时也可以对群组进行统一的展示隐藏操作
overlayGroup.show();
overlayGroup.hide();

此外,如果已经将 overlayGroup 加入到地图实例中了以后,新加入到 overlayGroup 里的覆盖物也会自动被添加到该地图实例中,移除时也相同。

var polyline3 = new AMap.Polyline({
    path: [
        new AMap.LngLat("116.387271","39.912501"),
        new AMap.LngLat("116.398258","39.904600")
    ]
});

// 添加新的覆盖物到群组
overlayGroup.addOverlay(polyline3);

// 移除群组中的一个覆盖物
overlayGroup.removeOverlay(polyline1);

查看更多属性和方法

GeoJSON类 GeoJSON

GeoJSON 类继承自 OverLayGroup,也是对一组覆盖物群组进行操作的类。不同的是,这里是将 GeoJSON 类型的数据转换成 OverlayGroup 后再指定方法绘制覆盖物群组。通过指定 getMarker, getPolyline 等属性,就可以拿到转换后的数据来绘制相应的覆盖物。具体方法如下:

// 创建 geoJSON 实例
var geoJson = new AMap.GeoJSON({
    geoJSON: JSON.parse(geoJsonData),   // GeoJSON对象
    getPolygon:  function(geojson, lnglats) {//还可以自定义getMarker和getPolyline
        
        return new AMap.Polygon({
            path: lnglats,
            fillOpacity: .8,
            strokeColor:'white',
            fillColor:'red'
        });   
    }
}); 

map.add(geoJson);

查看更多属性和方法




示例中心 功能
在线体验
常见问题