高德地图Web端JavaScript API开发(一)---3D地图显示

最近高德API新推出了3D地图，JS API 3D 地图是基于矢量地图数据提供的新的地图视图效果，相比 2D 地图增加了对旋转、视角倾斜等地图功能的支持。3D 地图基于 WEBGL 开发，在保证流畅度的同时，增加了对无级别缩放等功能的支持

首先

• 开启 3D 地图视图效果，需要引用JSAPI v1.4.0以上版本的JSAPI，同时在 Map 初始化的时候给地图添加viewMode:3D属性

• 创建地图代码编写如下
  

  	//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]	//中心点位置
  	});

  
  
  

注意事项：

1. 3D地图效果下，如果使用自定义栅格图，需要保证栅格图片服务返回的图片资源是带有Access-Control-Allow-Origin:*的响应Header的，否在将无法加载自定义栅格图
   
   
2. 3D地图目前兼容windows、Mac、iOS、Android等多平台下的众多浏览器，但是由于地图绘制依赖WebGL等前端环境，如果终端环境无法满足3D绘制的要求，我们将仍然使用原有2D视图进行绘制。
   
   
3. 3D地图基于V1.4.0版本提供，目前如下功能没有提供支持：
   AMap.ImageLayer(图片图层)
   AMap.MarkerCluster(工具类)
   AMap.Polygon(不支持绘制带洞的多边形)
   AMap.MassMarker(图层)
   AMap.CustomLayer(自定义图层)
   AMapCloudLayer(云图图层)
   AMap.IndoorMap(室内地图)
   PointSimplifier(海量点展示组件）
   PathSimplifier(轨迹展示组件)
   DistrictExploer(行政区划分浏览)
   DistrictCluster(行政区聚合)