1.8 KiB
1.8 KiB
官方图层 (Official Layers)
高德地图 JSAPI v2.0 内置了多种标准图层,开发者可以按需叠加使用。
1. 标准切片图层 (TileLayer)
基础的栅格瓦片图层。
// 默认标准图层
const layer = new AMap.TileLayer();
map.add(layer);
衍生图层
-
卫星图层 (Satellite)
const satellite = new AMap.TileLayer.Satellite(); map.add(satellite); -
路网图层 (RoadNet) 通常叠加在卫星图上使用,展示道路网络。
const roadNet = new AMap.TileLayer.RoadNet(); map.add(roadNet); -
实时路况图层 (Traffic) 展示实时的交通拥堵情况。
const traffic = new AMap.TileLayer.Traffic({ zIndex: 10, autoRefresh: true, // 是否自动刷新 interval: 180, // 刷新间隔 (秒) }); map.add(traffic);
2. 3D 楼块图层 (Buildings)
用于展示 3D 建筑物模型,仅在 viewMode: '3D' 下有效。
const buildings = new AMap.Buildings({
zooms: [16, 20], // 显示层级范围
zIndex: 10,
heightFactor: 2, // 楼块高度系数
});
map.add(buildings);
// 设置楼块样式
buildings.setStyle({
hideWithoutStyle: false, // 是否隐藏未设置样式的楼块
areas: [{
color1: 'red', // 顶面颜色
color2: 'blue', // 侧面颜色
path: [[116.403322, 39.920255], ...], // 围栏区域
}]
});
3. 室内地图图层 (IndoorMap)
当缩放级别达到一定程度且地图中心位于支持室内地图的建筑(如大型商场、机场)时自动显示。
const indoor = new AMap.IndoorMap({
alwaysShow: true, // 是否始终显示
});
map.add(indoor);
// 监听楼层切换
indoor.on('floor_change', function(e) {
console.log('当前楼层:', e.floor);
});