最近高德API新推出了3D地图,JS API 3D 地图是基于矢量地图数据提供的新的地图视图效果,相比 2D 地图增加了对旋转、视角倾斜等地图功能的支持。3D 地图基于 WEBGL 开发,在保证流畅度的同时,增加了对无级别缩放等功能的支持
首先
- 开启 3D 地图视图效果,需要引用JSAPI
v1.4.0
以上版本的JSAPI,同时在 Map 初始化的时候给地图添加viewMode:3D
属性
<script src="http://webapi.amap.com/maps?v=1.4.0&key=你的key"></script>
- 创建地图代码编写如下
//3D地图 var map = new AMap.Map('container',{ pitch:75, //修改地图的初始俯仰角度,俯仰角的有效范围为0度-83度。 viewMode:'3D', //设置viewMode属性为3D zoom:17, //缩放等级 expandZoomRange:true, //当 expandZoomRange 为 true 时, zooms的最大级别在PC上可以扩大到20级 zooms:[3,20], //在PC上,默认为[3,18],取值范围[3-18];在移动设备上,默认为[3,19],取值范围[3-19],移动端还是高清19/非高清20 center:[119.1664,29.02523] //中心点位置 });
注意事项:
- 3D地图效果下,如果使用自定义栅格图,需要保证栅格图片服务返回的图片资源是带有Access-Control-Allow-Origin:*的响应Header的,否在将无法加载自定义栅格图
- 3D地图目前兼容windows、Mac、iOS、Android等多平台下的众多浏览器,但是由于地图绘制依赖WebGL等前端环境,如果终端环境无法满足3D绘制的要求,我们将仍然使用原有2D视图进行绘制。
- 3D地图基于V1.4.0版本提供,目前如下功能没有提供支持:
AMap.ImageLayer(图片图层)
AMap.MarkerCluster(工具类)
AMap.Polygon(不支持绘制带洞的多边形)
AMap.MassMarker(图层)
AMap.CustomLayer(自定义图层)
AMapCloudLayer(云图图层)
AMap.IndoorMap(室内地图)
PointSimplifier(海量点展示组件)
PathSimplifier(轨迹展示组件)
DistrictExploer(行政区划分浏览)
DistrictCluster(行政区聚合)