开发 地图 JS API 1.4 参考手册 图层

图层 最后更新时间: 2024年09月13日

图层

类名 说明 是否插件
AMap.TileLayer

切片图层类

AMap.TileLayer.Satellite

卫星图层类,继承自TileLayer

AMap.TileLayer.RoadNet

路网图层类,继承自TileLayer

AMap.TileLayer.Traffic

实时交通图层类,继承自TileLayer

AMap.Buildings

楼块图层,独立显示矢量楼块数据的一种图层

AMap.MassMarks

图海量麻点图层类

AMap.Heatmap

热力图插件

AMap.LayerGroup

图层集合,用来包装其它图层类的实例并对集合做批量操作

AMap.LabelsLayer

标注图层,用于添加 LabelMarker 类型标注

TileLayer 类

切片图层类,该类为基础类,不指定getTileUrl时为高德默认底图。

构造函数 说明
AMap.TileLayer(tileOpt:TileLayerOptions) 构造一个切片图层对象,通过TileLayerOptions设置图层属性。
TileLayerOptions 类型 说明
map Map 要显示该图层的地图对象
tileSize Number 切片大小,取值:
256,表示切片大小为256*256,
128,表示切片大小为128*128,
64,表示切片大小为64*64。默认值为256
tileUrl String 切片取图地址(自1.3版本起,该属性与getTileUrl属性合并)
如:'https://abc.amap.com/tile?x=[x]&y=[y]&z=[z]'
[x]、[y]、[z]分别替代切片的xyz。
errorUrl String 取图错误时的代替地址
getTileUrl String/Function(x,y,z) 获取图块取图地址,该属性值为一个字符串或者一个函数
字符串如:'https://abc.amap.com/tile?x=[x]&y=[y]&z=[z]'
函数参数z为地图缩放级别,x,y分别为相应缩放级别下图块横向、纵向索引号,
该属性可以用来改变取图地址,实现自定义栅格图。
zIndex Number 图层叠加的顺序值,0表示最底层。默认zIndex:1
opacity Float 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zooms Array 支持的缩放级别范围,默认范围[3-18],在PC上,取值范围为[3-18];在移动设备上,取值范围为[3-19]
detectRetina Boolean 是否在高清屏下进行清晰度适配,默认为true。
将根据移动设备屏幕设备像素比,采用相应的技术手段,保证图层在不同设备像素比下的清晰度。
方法 返回值 说明
setOpacity(alpha:Float) 设置图层透明度
show( ) 在地图上显示该图层
hide( ) 隐藏图层
getTiles( ) Array 获取当前图层所有切片号。
(自v1.1 新增)
reload( ) 重新加载此图层
setTileUrl( ) 设置图层的取图地址
getZooms( ) Array 获取该图层可显示的级别范围;在PC上,取值范围为[3-18];在移动设备上,取值范围为[3-19]
setzIndex(index:Number) 设置图层叠加的顺序值,默认zIndex:1
setMap(map:Map) 设置要显示图层的地图对象
事件 参数 说明
complete 图块切片加载完成事件

TileLayer.Satellite 类
(自v1.1 新增)

卫星图层类,继承自TileLayer。

构造函数 说明
AMap.TileLayer.Satellite(sateOpt:SatelliteOptions) 构造一个卫星切片图层对象,通过SatelliteOptions设置图层属性。
SatelliteOptions 类型 说明
map Map 要显示该图层的地图对象
zIndex Number 图层叠加的顺序值,0表示最底层,默认zIndex:2
opacity Float 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zooms Array 支持的缩放级别范围,默认范围为[3,18],取值范围[3-18]
detectRetina Boolean 是否在高清屏下进行清晰度适配,默认为false。
将根据移动设备屏幕设备像素比,采用相应的技术手段,保证图层在不同设备像素比下的清晰度。
方法 返回值 说明
setOpacity(alpha:Float) 设置图层透明度
show( ) 在地图上显示该图层
hide( ) 隐藏图层
getTiles( ) Array 获取当前图层所有切片号
reload( ) 重新加载此图层
setTileUrl( ) 设置图层的取图地址
getZooms( ) Array 获取该图层可显示的级别范围,默认取值范围为[3-18]
setzIndex(index:Number) 设置图层叠加的顺序值,默认zIndex:2
setMap(map:Map) 设置要显示图层的地图对象
事件 参数 说明
complete 图块切片加载完成事件

TileLayer.RoadNet 类

路网图层类,继承自TileLayer。

构造函数 说明
AMap.TileLayer.RoadNet(roadnetOpt:RoadNetOptions) 构造路网图层对象,通过RoadNetOptions设置图层属性。
RoadNetOptions 类型 说明
map Map 要显示该图层的地图对象
zIndex Number 图层叠加的顺序值,0表示最底层,默认zIndex:3
opacity Float 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zooms Array 支持的缩放级别范围,默认范围为[3-18],取值范围[3-18];在手机、平板等高清设备上,取值范围为[3-17]
detectRetina Boolean 是否在高清屏下进行清晰度适配,默认为true。
将根据移动设备屏幕设备像素比,采用相应的技术手段,保证图层在不同设备像素比下的清晰度。
方法 返回值 说明
setOpacity(alpha:Float) 设置图层透明度
show( ) 在地图上显示该图层
hide( ) 隐藏图层
getTiles( ) Array 获取当前图层所有切片号
reload( ) 重新加载此图层
setTileUrl( ) 设置图层的取图地址
getZooms( ) Array 获取该图层可显示的级别范围,默认取值范围为[3-18];在平板、手机等高清设备上,取值范围为[3-17]
setzIndex(index:Number) 设置图层叠加的顺序值,默认zIndex:3
setMap(map:Map) 设置要显示图层的地图对象
事件 参数 说明
complete 图块切片加载完成事件

TileLayer.Traffic 类

实时交通图层类,继承自TileLayer。

构造函数 说明
AMap.TileLayer.Traffic(trafficOpt:TrafficOptions) 构造一个实时交通图层对象。
TrafficOptions 类型 说明
map Map 要显示该图层的地图对象
zIndex Number 图层叠加的顺序值,0表示最底层,默认zIndex:4
opacity Float 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zooms Array 支持的缩放级别范围,默认范围[3-17],取值范围[3-17];在手机、平板等高清设备上,默认取值范围为[3-16]
detectRetina Boolean 是否在高清屏下进行清晰度适配,默认为true。
将根据移动设备屏幕设备像素比,采用相应的技术手段,保证图层在不同设备像素比下的清晰度。
autoRefresh Boolean 是否设置可以自动刷新实时路况信息,默认为false
interval Number 设置刷新间隔时长,单位:秒
默认180s刷新一次
方法 返回值 说明
setOpacity(alpha:Float) 设置图层透明度
show( ) 在地图上显示该图层
hide( ) 隐藏图层
getTiles( ) Array 获取当前图层所有切片号
reload( ) 重新加载此图层
setTileUrl( ) 设置图层的取图地址
getZooms( ) Array 获取该图层可显示的级别范围,默认取值范围为[3-17];在平板、手机登高清设备上,取值范围为[3-16]
setzIndex(index:Number) 设置图层叠加的顺序值,默认zIndex:4
setMap(map:Map) 设置要显示图层的地图对象
事件 参数 说明
complete 图块切片加载完成事件

MassMarks 类

此类表示海量点类,利用该类可同时在地图上展示万级别的点,目前仅适用于html5浏览器。

构造函数 说明
AMap.MassMarks(data:Array.<Object>,opts:MassMarksOptions) 创建海量点类。datas为点对象的数组,点对象为包含经纬度lnglat属性的Object,opts为点与点集合的绘制样式。
例data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …]或url串,支持从服务器直接取数据
MassMarksOptions 类型 说明
zIndex Number 图层叠加的顺序值,0表示最底层。默认zIndex:5
opacity Float 图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明
zooms Array 支持的缩放级别范围,默认范围[3-18],在PC上,取值范围为[3-18];
在移动设备上,取值范围为[3-19]
cursor String 指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,
Opera不支持自定义cursor
alwaysRender Boolean 表示是否在拖拽缩放过程中实时重绘,默认true,建议超过10000的时候设置false
style StyleObject
Array.<StyleObject>
用于设置点的样式,当点样式一致时传入StyleObject即可;当需要展示多种点样式时,
传入StyleObject的数组,此时需要为Data中每个元素指定 style字段为该元素要显示
的样式在StyleObject数组中的索引
StyleObjectOptions 类型 说明
anchor Pixel 必填参数,图标显示位置偏移量,以图标的左上角为基准点(0,0)点,例如:anchor:new AMap.Pixel(5,5)
url String 必填参数,图标的地址
size Size 必填参数,图标的尺寸;例如:size:new AMap.Size(11,11)
rotation Number 旋转角度
方法 返回值 说明
setMap(map:Map) 设置显示MassMark的地图对象
getMap() Map 获取Marker所在地图对象
setStyle(StyleObject
Array.<StyleObject>)
设置MassMark的显示样式
getStyle() Object 获取MassMark的显示样式,数据结构同setStyle中的属性一致
setData(data:Object) 设置MassMark展现的数据集,数据集格式为:, data: Array 坐标数据集. 例:data: [{lnglat: [116.405285, 39.904989], name: i,id:1},{}, …],{}, …]}
getData() Object 输出MassMark的数据集,数据结构同setDatas中的数据集
show( ) 显示海量点图层
hide( ) 隐藏海量点图层
clear( ) 清除海量点
事件 参数 说明
complete 海量点加载完成事件
click Object 鼠标左键单击事件
dblclick Object 鼠标左键双击事件
mouseout Object 鼠标移出海量点图标时触发事件
mouseup Object 鼠标在海量点图标上按下后抬起时触发事件
mousedown Object 鼠标在海量点图标按下时触发事件
touchstart Object 触摸开始时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集
touchend Object 触摸结束时触发事件,仅适用移动设备, 数据结构同setDatas中的数据集

AMap.Heatmap 插件

热力图,基于第三方heatmap.js实现,以特殊高亮的形式显示数据密集程度。根据密集程度的不同,图上会呈现不同的颜色,以直观的形式展现数据密度。API引用了heatmap.js最新版本v2.0,v2.0基于新的渲染模型,具有更高的渲染效率和更强的性能。支持chrome、firefox、safari、ie9及以上浏览器。

代码示例

                        
                        var heatmap;
                        var points =[
                        {"lng":116.191031,"lat":39.988585,"count":10},
                        {"lng":116.389275,"lat":39.925818,"count":11},
                        {"lng":116.287444,"lat":39.810742,"count":12},
                        {"lng":116.481707,"lat":39.940089,"count":13},
                        {"lng":116.410588,"lat":39.880172,"count":14},
                        {"lng":116.394816,"lat":39.91181,"count":15},
                        {"lng":116.416002,"lat":39.952917,"count":16}
                        ];
                        map.plugin(["AMap.Heatmap"],function() {      //加载热力图插件
                        heatmap = new AMap.Heatmap({map:map});    //在地图对象叠加热力图
                        heatmap.setDataSet({data:points,max:100}); //设置热力图数据集
                        //具体参数见接口文档
                        }); 
                                            

相关示例

构造函数 说明
AMap.Heatmap( map:Map , opts:HeatmapOptions) 构造一个热力图插件对象,map为要叠加热力图的地图对象,opts属性参考HeatmapOptions列表中的说明。
HeatmapOptions 类型 说明
radius Number 热力图中单个点的半径,默认:30,单位:pixel
gradient Object 热力图的渐变区间,热力图按照设置的颜色及间隔显示热力图,例:
{
0.4:'rgb(0, 255, 255)',
0.65:'rgb(0, 110, 255)',
0.85:'rgb(100, 0, 255)',
1.0:'rgb(100, 0, 255)'
}
其中 key 表示间隔位置,取值范围: [0,1],value 为颜色值。默认:heatmap.js标准配色方案
opacity Array 热力图透明度数组,取值范围[0,1],0表示完全透明,1表示不透明,默认:[0,1]
zooms Array 支持的缩放级别范围,取值范围[3-18],默认:[3,18]
方法 返回值 说明
setMap(map:Map) 设置热力图要叠加的地图对象,也可以在Map中的layers属性中设置为默认显示的图层
setOptions(opts:HeatmapOptions) 设置热力图属性,参考HeatmapOptions列表中的说明
addDataPoint(lng:Lng, lat:Lat, count:Number) 向热力图数据集中添加坐标点,count不填写时默认:1
setDataSet(dataset:Object) 设置热力图展现的数据集,dataset数据集格式为:
{
  max: Number 权重的最大值,
  data: Array 坐标数据集
},
其中max不填则取数据集count最大值
例: {
  max: 100,
  data: [{lng: 116.405285, lat: 39.904989, count: 65},{}, …]
  }
也可以通过url来加载数据,格式为
{
  data:jsonp格式数据的服务地址URL,
  dataParser: 数据格式转换function //当jsonp返回结果和官方结构不一致的时候,用户可以传递一个函数用来进行数据格式转换;
}
例:
{
  data:'http://abc.com/jsonp.js',
  dataParser:function(data){
   return doSomthing(data);//返回的对象结果应该与上面例子的data字段结构相同
  }
}
hide( ) 隐藏热力图
show( ) 显示热力图
getMap( ) Map 获取热力图叠加地图对象
getOptions( ) Object 获取热力图的属性信息
getDataSet( ) Object 输出热力图的数据集,数据结构同setDataSet中的数据集

AMap.LayerGroup 类(自v1.4.2新增)

LayerGroup类用来包装其它图层类的实例, 对实例集合做批量操作, 避免开发者对多个需要设置同样属性的图层实例做循环处理。同时只要对LayerGroup执行过setMap方法后, 新添加到该LayerGroup中的图层会自动将其map属性修改到该group对应的map, 此外从group中移除该图层时,也会将该图层从group对应的map中移除。

构造函数 说明
AMap.LayerGroup(layers: Array) 构造图层集合,传入的参数是一个图层实例的数组
方法 返回值 说明
addLayer(layer: Layer) 添加单个图层到集合中,不支持添加重复的图层
addLayers(layers: Array) 添加图层数组到集合中,不支持添加重复的图层
getLayers() Array 返回当前集合中所有的图层
hasLayer(layer: Layer) Boolean 判断传入的图层实例是否在集合中
removeLayer(layer: Layer) 从集合中删除传入的图层实例
removeLayers(layers: Array) 从集合中删除传入的图层实例数组
clearLayers() 清空集合
eachLayer(iterator: Function) 对集合中的图层做迭代操作,其中iterator的函数定义是:
function(layer, index, collections),相关含义如下:
layer: 当前迭代到的图层
index: 该图层在集合中的序列号(从0开始)
collections: 所有图层实例
setMap(map: Map) Boolean 指定集合中里图层的显示地图
setOptions(opt: LayerOptions) 修改图层属性(包括线样式、样色等等)
show() 在地图上显示集合中图层
hide() 在地图上隐藏集合中图层

事件 说明
集合中对应图层支持的事件 如果对图层集合添加对某个事件的监听或解除监听, 图层集合会对集合中所有图层实例做集合处理, 只要该图层支持此事件, 该事件绑定/解除即对图层生效

AMap.Buildings

楼块图层,单独展示矢量化的楼块图层,兼容IE9以上(不含)的浏览器 ,v1.4.6开始,查看示例

构造函数 说明
AMap.Buildings(opts:BuildingsOptions) 创建楼块图层,BuildingsOptions为初始构造属性对象
BuildingsOptions 类型 说明
zooms [Number, Number] 可见级别范围
opacity Number 不透明度
heightFactor Number 高度比例系数,可控制3D视图下的楼块高度
visible Boolean 是否可见
map AMap.Map 所属的地图对象
zIndex Number 层级,默认8
方法 返回值 说明
setMap(map/null) 设置所属的地图对象,参数为null时从地图中移除
show() 显示
hide() 隐藏
setStyle() 按区域设置楼块的颜色查看示例

AMap.LabelsLayer 类(自v1.4.14新增)

LabelsLayer 类是用于承载 LabelMarker 对象的图层。

构造函数 说明
AMap.LabelsLayer(opts:LabelsLayerOptions) 构造一个标注图层对象,通过LabelsLayerOptions设置图层属性
LabelsLayerOptions 类型 说明
visible Boolean 图层是否可见
zIndex Number 图层的层级
opacity Number 图层的透明度
collision Boolean 是否开启碰撞检测,默认为 true
(自v1.4.15 新增)
animation Boolean 是否开启标注淡入动画,默认为 true
(自v1.4.15 新增)
方法 返回值 说明
getCollision() Boolean 获取该图层是否支持碰撞检测
(自v1.4.15 新增)
setCollision(collision:Boolean) 设置该图层是否支持碰撞检测
(自v1.4.15 新增)
getOpacity() Number 获取该图层透明度
(自v1.4.15 新增)
setOpacity(opacity:Number) 设置该图层透明度
(自v1.4.15 新增)
getzIndex() Number 获取该图层叠加层级
(自v1.4.15 新增)
setzIndex(zIndex:Number) 设置该图层叠加层级
(自v1.4.15 新增)
getAnimation() Boolean 获取该图层标注是否开启淡入动画
(自v1.4.15 新增)
setAnimation(animation: Boolean) 设置该图层标注是否开启淡入动画
(自v1.4.15 新增)
getZooms() Array 获取该图层显示级别
(自v1.4.15 新增)
setZooms(zooms: Array) 设置该图层显示级别
(自v1.4.15 新增)
add(LabelMarker|LabelMarker[]) 图层中添加 LabelMarker
remove(LabelMarker|LabelMarker[])
(自v1.4.15 新增)
图层中移除 LabelMarker
clear() 清空图层
show() 显示图层
hide() 隐藏图层


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