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

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

JS API 支持官方图层、三方图层、数据图层等。

本文介绍如何在地图上添加官方图层:实时交通路况图层AMap.TileLayer.Traffic,以及对此图层的其他操作。

交通图层示例

1、实现步骤

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建图层

const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});
3

1.3 加载图层

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [layer], //layer为创建的默认图层
});
提示

若在地图初始时你只需要默认图层,那么地图对象的layers属性可以缺省,JS API 会默认添加一个默认图层。Layers属性值是设置地图图层的数组,数组可以是图层中的一个或多个。

4

1.4 创建实时交通路况图层

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

const traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自动刷新,默认为false
  interval: 180, //刷新间隔,默认180s
});
map.add(traffic); //通过add方法添加图层
提示

添加图层使用map.add(traffic)移除路况图层:map.remove(traffic)此例展示为交通图层配置,更多图层前往 高德官方图层

5

1.5 路况图层的显示和隐藏

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

traffic.show(); //显示路况图层
traffic.hide(); //隐藏路况图层

2、本章涉及的属性及方法说明

2.1 AMap.TileLayer.Traffic

参数/方法

说明

类型 

参数值描述

默认值

autoRefresh

是否自动刷新

Boolean

true | false

false

interval

刷新间隔

Number

自动更新数据间隔的毫秒数

180

返回顶部 示例中心 常见问题 智能客服 公众号
二维码