开发 地图 JS API 2.0 进阶教程 地图 3D 地图

3D地图 最后更新时间: 2023年11月20日

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

本章将向你介绍:

  • 开启 3D 地图和地形图。
  • 3D 地图兼容性说明。

3D 地图示例

使用说明

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

开启 3D 地图

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

var map = new AMap.Map('container', {
  pitch: 50, //地图俯仰角度,有效范围 0 度- 83 度
  viewMode: '3D', //地图模式
  rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
  pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
  zoom: 17, //初始化地图层级
  rotation: -15, //初始地图顺时针旋转的角度
  zooms: [2, 20], //地图显示的缩放级别范围
  center: [116.333926, 39.997245] //初始地图中心经纬度
});
提示

rotateEnablepitchEnable控制 3D 地图的旋转和倾斜交互,默认值为 true,详见地图的交互与事件

开启 3D 地形图

开启 3D 地形图效果,需要引用 JS API v2.1Beta版本的 JS API,同时在 Map 初始化的时候给地图添加viewMode:'3D'terrain:true属性。3D 地形图相对比 3D 地图主要侧重于展示地球的地形特征。选择使用哪种地图类型取决于你的需求和展示效果的要求。

var map = new AMap.Map('container', {
  viewMode: '3D', //地图模式
  terrain: true //开启地形图
});
提示

3D 地形图 目前仅支持 v2.1Beta

https://webapi.amap.com/maps?v=2.1Beta&key=你申请的key值

JS API 的引入可以查看 JS API 的加载

开启地图缩放和旋转插件

可以通过引入插件来拓展地图的功能,本示例采用AMap.plugin()异步引入,更多引入方式详见插件的使用

AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () { //异步加载插件
  var controlBar = new AMap.ControlBar({ //控制地图旋转插件
      position: {
          right: '10px',
          top: '10px'
      }
  });
  map.addControl(controlBar);
  var toolBar = new AMap.ToolBar({ //地图缩放插件
      position: {
          right: '40px',
          top: '110px'
      }
  });
  map.addControl(toolBar)
});
提示

AMap.ControlBarAMap.ToolBar插件为地图的旋转和缩放工具,你也可以根据自己的业务需求自由选择相关插件详见插件列表

3D 地图兼容性说明

  • 3D 地图效果下,如果使用自定义栅格图,需要保证栅格图片服务返回的图片资源是带有 Access-Control-Allow-Origin:* 响应 Header 的,否则将无法加载自定义栅格图。
  • 3D 地图目前兼容 windows、Mac、iOS、Android 等多平台下的众多浏览器,但是由于地图绘制依赖 WebGL 等前端环境,如果终端环境无法满足 3D 绘制的要求,我们将仍然使用原有 2D 视图进行绘制。
  • JS API v1.4之后的版本开始支持 3D 地图,3D 视图不支持的组件如下:

名称

说明

 PointSimplifier 

 AMmap UI组件,海量点展示组件 

 PathSimplifier 

 AMmap UI组件,轨迹展示组件 

 DistrictExplorer 

 AMmap UI组件,行政区划浏览

 DistrictCluster 

 AMmap UI组件,行政区聚合

本章涉及的属性及方法说明

AMap.Map

参数/方法

说明

类型 

可选择 

默认值

pitch

地图俯仰角度, 2D 地图下无效

Number

0-83

0

viewMode

地图模式

String

'2D' | '3D'

'2D'

rotateEnable

开启地图旋转交互 交互效果:鼠标右键 + 鼠标画圈旋转 或 键盘  Ctrl + 鼠标画圈旋转

Boolean

true | false

true

pitchEnable

开启地图倾斜交互 交互效果:鼠标右键 + 鼠标上下移动或键盘 Ctrl + 鼠标上下移动

Boolean

true | false

true

rotation

初始地图顺时针旋转的角度

Number

0-360

0

terrain

开启地形图

Boolean

true | false

false

AMap.plugin

参数/方法

说明

类型 

AMap.ControlBar()

控制地图旋转插件

Function

AMap.ToolBar()

地图缩放插件

Function

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