示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 开发指南 > 在地图上绘制 > 图层 >

高德 开发 地图 JS API 开发指南 在地图上绘制 图层

更新时间:2017年10月12日

亲手试一试

高德地图JavaScript API支持丰富的图层展示,如卫星图、路网图、实时交通图、3D楼块图、图片等,同时可以根据自己的实际情况实现自定义栅格图层和自定义图层,下面结合几个场景介绍一下使用方法

场景一、叠加实时交通图层

有的时候,我们的APP需要使用多个图层才能有满足需求。比如在出行类APP中,实时交通图层就是一个很有用的图层,在地图上叠加了实时交通图层之后,用户可以在出行前查看实时路况,避开拥堵线路,节约交通时间,实时路况图层类是AMap.TileLayer.Traffic。

绿色代表畅通,黄色代表轻微拥堵,红色代表比较拥堵,紫红色代表非常拥堵。灰色表示无路况信息。

使用的时候,只需要new一个实例出来,通过setMap方法添加到地图上即可:

var trafficLayer = new AMap.TileLayer.Traffic();
trafficLayer.setMap(map);

也可以在地图初始化之后直接设置layers属性:

var defaultLayer = new AMap.TileLayer({textIndex:15});
var traffic = new AMap.TileLayer.Traffic();
var map = new AMap.Map('container',{
    zoom: 18,
    layers: [
        defaultLayer,//默认图层
        traffic//实时交通图层
    ],
    center: [116.39,39.9]
});

参数名称

类型

说明

map

Map

要显示该图层的地图对象

zIndex

Number

图层叠加的顺序值,0表示最底层,默认zIndex:4

opacity

Float

图层的透明度,取值范围[0,1],1代表完全不透明,0代表完全透明

zooms

Array

支持的缩放级别范围,默认范围[3-17],取值范围[3-17];在手机、平板等高清设备上,默认取值范围为[3-16]

detectRetina

Boolean

是否区分高清屏,默认是true,会在高清屏幕采用技术手段保证清晰度。

Traffic图层专有参数

参数名称

类型

说明

autoRefresh

Boolean

是否设置可以自动刷新实时路况信息,默认为false,每3分钟刷新一次

interval

Number

设置刷新间隔时长,单位:秒,默认值:180s

场景二、使用自己的栅格图

如果你有想使用非高德官方的栅格图片,那么你也可以自己指定栅格图的URL,只需要构造一个新的TileLayer对象,并设定相应的getTileUrl即可, getTileUrl可以是一个URL的拼接字符串,其中的[x],[y],[z]代表切片的xyz坐标位置,也可以是一个返回切片url的function。

举个例子,我们想使用google的地图,可以这么做:

googleLayer = new AMap.TileLayer({
   getTileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil',
   zIndex:2
});
googleLayer.setMap(map);

也可以这么写:

googleLayer = new AMap.TileLayer({
   zIndex:2,
   getTileUrl: function(x,y,z){
      return 'http://mt1.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x='+ x +'&y='+ y +'&z='+ z +'&s=Galil';
   }
});
googleLayer.setMap(map);

参数名称

类型

说明

tileSize

Number

切片大小,取值:256(默认)、128、64等

errorUrl

String

取图错误时的代替地址,可缺省

getTileUrl

String或Function(x,y,z)

获取图块取图地址的字符串或者函数,可缺省

场景三、自己实现图层绘制

有时开发者自己通过canvas、svg甚至其他dom方式绘制了一张‘图画’,期望把它作为一个图层添加到我们的地图之中,这个时候就可以使用我们的自定义图层,JSAPI能够帮助实现其与高德地图的同步平移和缩放,并适时调用开发者的render方法进行图层的重绘。 自定义图层使用CustomLayer类来进行构造,构造函数接受两个参数,第一个参数是作为图层的dom画布,第二个参数是图层的相关属性设定,与图层的一般属性相同,以右侧的demo为例:

创建并指定画布容器

创建一个和地图一样大小的canvas作为图层的‘画布’,进行图层的初始化并添加到地图:

var canvas = document.createElement('canvas');
canvas.width = map.getSize().width;
canvas.height = map.getSize().height;
var customLayer = new AMap.CustomLayer(canvas, {
             zooms: [3, 8],
             zIndex: 12
         });
customLayer.setMap(map);

指定render方法

下面我们只需要给自定义图层指定一个render方法即可,这个方法就是开发者用来实现图层绘制使用的方法,API在图层初次绘制、或者地图移动与缩放结束的时候都将调用这个方法,render方法的关键是更新绘制是使用的容器内像素位置,通常由lnglatToContainer方法来进行转化。

demo中使用行政区查询获得了全国省会的经纬度位置,render方法每次将经纬度转换为地图容器坐标,autoSize方法周期性的生成不停变化的每个位置圆点的大半径并调用draw方法(如果不需要类似的煽动,则不需要autoSize类似的方法),draw方法使用的容器坐标和圆点半径在canvas上绘制不同大小的蓝色或红色的点(由canvas绘制生成):

function onRender() {
    for (var i = 0; i < provinces.length; i += 1) {
        provinces[i].containerPos = map.lngLatToContainer(provinces[i].center);
    }
    draw();
    if(!started){
        autoSize();
        started = true;
    }
}
customLayer.render = onRender;

函数名称

返回类型

说明

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)


设置要显示图层的地图对象

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