高德官方图层

您所在的位置：网站首页 › 高德地图怎么换模式设置 › 高德官方图层

高德官方图层

2024-07-04 18:50| 来源: 网络整理| 查看: 265

本文介绍高德官方提供的图层及其使用方法，包括：

标准图层 TileLayer卫星图层 TileLayer.Satellite路网图层 TileLayer.RoadNet实时交通图层 TileLayer.Traffic楼块图层 Buildings室内图层 IndoorMap提示

如果你之前还没有了解过关于图层的添加，可以前往覆盖物/图层管理教程

楼块图层示例

亲手试一试

下载完整代码

1、标准图层

你可以按照如下方法声明和创建一个标准图层，然后给地图对象设置layers属性，将其添加到地图中。

//创建标准图层 var layer = new AMap.createDefaultLayer({ zooms: [3, 20], //可见级别 visible: true, //是否可见 opacity: 1, //透明度 zIndex: 0, //叠加层级 }); //将图层添加到地图 var map = new AMap.Map("container", { layers: [layer], //地图图层的数组 });提示

Layers属性值是用于设置地图图层的数组，该数组可以包含一个或多个图层。这个属性是可选的，如果未指定，JS API 会默认添加一个标准图层。

var map = new AMap.Map('container');

查看全部属性和方法

相关示例

2、卫星与路网图层

卫星图层与路网图层通常一起使用，这两个图层的创建和使用方法和TileLayer类似，只需要修改类名为对应的类名即可。

//创建卫星图层 var satellite = new AMap.TileLayer.Satellite(); //创建路网图层 var roadNet = new AMap.TileLayer.RoadNet(); //将图层添加到地图 var map = new AMap.Map("container", { layers: [satellite, roadNet], //地图图层的数组 });

查看全部属性和方法

相关示例

3、实时交通图层

实时交通图层用于展示当前时刻的道路交通状况，不同的颜色代表不同的拥堵程度，暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。作为一种特殊的TileLayer，使用方法同卫星、路网等官方图层一样。特殊之处在于可以通过autoRefresh和interval参数指定是否自动刷新和刷新周期。

//初始化地图 var map = new AMap.Map("container", { zoom: 10, //地图级别 }); //创建实施交通图层 var traffic = new AMap.TileLayer.Traffic({ autoRefresh: true, //是否自动刷新 interval: 180, //刷新间隔，默认180s }); // 通过 add 方法将图层添加到地图 map.add(traffic);提示

除了在地图初始化时设置图层，还可以使用map.add(traffic)方法添加图层，使用map.remove(traffic)方法移除图层。

查看全部属性和方法

相关示例

4、楼块图层

楼块图层用于展示矢量建筑物，与标准图层中的楼块要素的效果相同。二者区别在于，楼块图层可以用来实现一些特殊的效果，如 3D 视图下为楼块指定高度比例系数heightFactor。

提示

楼块图层的有效缩放级别范围为[ 17, 20 ]

注意

创建楼块图层需要在初始化地图的时候设置showBuildingBlock: false属性，此属性会展示默认的楼块图层，此时再创建楼块图层会存在两个楼块图层。

//创建楼块图层 var buildings = new AMap.Buildings({ zooms: [17, 20], zIndex: 10, heightFactor: 2, //2倍于默认高度（3D 视图下生效） }); //将楼块图层添加到地图 var map = new AMap.Map("container", { center: [116.397428, 39.90923], //地图中心点 viewMode: "3D", //地图模式 pitch: 60, //俯仰角度 rotation: -35, //地图顺时针旋转角度 layers: [buildings], //地图图层的数组 zoom: 17, //地图级别 showBuildingBlock: false, });

查看全部属性和方法

相关示例

5、室内图层5.1 默认室内图层

将地图属性 showIndoorMap 设置成 true，即可显示室内地图图层。地图zoom 大于17，并移动到有室内地图的地点就会自动显示室内地图。可以通过监听地图indoor_create事件来获取这个室内图层实例。

//创建地图，设置室内地图图层可见 var map = new AMap.Map("container", { center: [116.519942, 39.924677], //地图中心点 showIndoorMap: true, //是否自动展示室内地图 zoom: 18, //地图级别 }); //监听地图 indoor_create 事件，室内地图图层创建回调中可获取室内地图图层实例 map.on("indoor_create", function () { map.indoorMap.showIndoorMap("B000A8VT15", 4); //显示指定 POI 的室内地图,第一个参数为建筑物 POIID，第二个参数为楼层 });

使用map.indoorMap.showIndoorMap(indoorid,floor，shopid)方法可以显示指定 POI 的室内地图，其中indoorid参数为建筑物 POIID（获取POIID），floor参数为建筑物显示的楼层，shopid参数为商铺 ID。

查看全部属性和方法

相关示例

5.2 独立的室内图层

你也可以使用AMap.IndoorMap插件来自己创建室内图层，这时需要将地图的默认室内图层隐藏，例如：

本例使用异步安装插件，查看插件引入方式前往插件的使用。

//加载室内图层插件 AMap.plugin(["AMap.IndoorMap"], function () { var indoorMap = new AMap.IndoorMap({ alwaysShow: true }); //设定在没有矢量底图的时候也显示，默认情况下室内图仅在有矢量底图的时候显示 var map = new AMap.Map("container", { showIndoorMap: false, //隐藏地图自带的室内地图图层 layers: [indoorMap, AMap.createDefaultLayer()], //地图图层的数组 }); indoorMap.showIndoorMap("B000A856LJ"); //显示指定 POI 的室内地图 });

查看全部属性和方法

相关示例

【本文地址】

高德官方图层

高德官方图层

今日新闻

推荐新闻