示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 3D立体图形 > 绘制步骤 >

高德 开发 地图 JS API 教程 3D立体图形 绘制步骤

更新时间:2018年05月29日

JS API v1.4.5版本开始,提供在3D视图模式下创建和添加三维立体图形的能力,这些立体图形包括网格(Mesh)类型、线类型、点类型等。绘制3D立体图形的一般步骤为:

开启3D视图

在创建地图实例的时候给 Map 添加 viewMode:'3D' 属性,JS API 将根据前端的 WebGL 环境来判断能否开启3D视图。

var map = new AMap.Map('container',{
    viewMode:'3D'
})

设置光照属性

目前楼块图层、室内图层、和 MeshAcceptLightsPrism 几个类型会接收地图全局的光照属性。目前 Map 的光照属性有两个,一个环境光源 AmbientLight,一个平行光源 DirectionLight。默认情况下环境光源为白色光,强度0.9,平行光源方向由南方45度角照射,白色光,强度0.1。如不能满足需求可以按照如下代码进行设置:

map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.9);
map.DirectionLight = new AMap.Lights.DirectionLight([0, -1, 1], [1, 1, 1], 0.1);

添加Object3DLayer

Object3DLayer 为专门承载 Object3D对象的图层,一个 Object3DLayer 可以承载多个Object3D实例对象,绘制 Object3D 对象前先给地图添加一个 Object3DLayer图层:

var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);

创建Object3D类型的实例

这里简单创建一个Prism对象,Object3D各种类型的详细说明请参考其他章节。

var bounds = [
  new AMap.LngLat(116,39),
  new AMap.LngLat(117,39),
  new AMap.LngLat(117,40),
  new AMap.LngLat(116,40)
];
var height = 50000;
var color = '#0088ff';//rgba
var prism = new AMap.Object3D.Prism({
  path:bounds,
  height:height,
  color:color
});

添加Object3D实例到Object3DLayer

再将Object3D实例添加在上面添加的Object3DLayer之中就可以了

object3Dlayer.add(prism);//添加
//object3Dlayer.remove(prism);//移除




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