开发 地图 JS API 2.0 入门教程 展示图层

展示图层 最后更新时间: 2023年04月04日

本章教程将介绍如何在地图上添加图层,以及对图层的其他操作。目前JS API支持各类图层,官网的图层、三方图层、数据图层等等。本例将主要介绍官方图层:实时交通路况图层 TileLayer.Traffic

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

图层

1

加载地图

const map = new AMap.Map('container', {
  viewMode: '2D',  // 默认使用 2D 模式
  zoom:11,  //初始化地图层级
  center: [116.397428, 39.90923]  //初始化地图中心点
});
提示

地图在初始化的时候,如果你没有配置layers属性,JS API会默认添加一个标准图层,标准图层的配置为:

const layer = new AMap.createDefaultLayer({ // 提示:参数值并不是API默认使用的值
  zooms:[3,20],    //可见级别
  visible:true,    //是否可见
  opacity:1,       //透明度
  zIndex:0         //叠加层级
})

如果你想更改默认配置,你可以在初始化地图的时候传入你创建的 createDefaultLayer

const map = new AMap.Map('container',{
  ...otherOptions, // 其他配置
  layers:[layer]   // layer为你通过 new AMap.createDefaultLayer() 创建的默认图层
});
2

创建实时交通路况图层

实时交通图层用于展示当前时刻的道路交通状况,不同的颜色代表不同的拥堵程度,暗红色代表极度拥堵,绿色代表通畅,灰色代表路况不明。

const traffic = new AMap.TileLayer.Traffic({
  'autoRefresh': true,     //是否自动刷新,默认为false
  'interval': 180,         //刷新间隔,默认180s
});

map.add(traffic); //通过add方法添加图层
提示

移除路况图层:map.remove(traffic)。

3

路况图层的显示和隐藏

只需要对图层对象调用show()hide(),即可控制图层的显示和隐藏。

traffic.show(); //显示路况图层
traffic.hide(); //隐藏路况图层
示例
中心
常见
问题
智能
客服