示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 参考手册 > 3D地图 >

高德 开发 地图 JS API 参考手册 3D地图

更新时间:2018年04月19日

这里列出所有目前已经开放的和3D地图相关的类型或者新增属性,方面各位开发者查阅:

类名

说明

AMap.Map

这里仅列出和3D相关的属性,其他Map属性请查阅

AMap.Lights.AmbientLight

用于设置地图的环境光源,目前仅会作用于MeshAcceptLights和Prism、室内地图

AMap.Lights.DirectionLight

用于设置地图的平行光照,目前仅会作用于MeshAcceptLights和Prism、室内地图

AMap.Object3DLayer

图层类,用于添加所有Object3D类型

AMap.Object3D.Mesh

用于创建三维Mesh的基础类型,支持纹理

AMap.Object3D.MeshLine

用于创建支持宽度和高度的3D线段

AMap.Object3D.MeshAcceptLights

用于创建接受光照的三维Mesh的基础类型,接受光照、支持纹理

AMap.Object3D.Prism

基于Mesh封装的创建棱柱的简单类型,接受光照、不支持纹理

AMap.Map

Map类中和3D相关的属性如下

属性名

类型

说明

viewMode

String

在MapOptions中设置,可选值有'3D'、'2D',缺省为'2D',

设置为3D时将在webgl环境满足条件的的浏览器中显示为三维地图

pitch

Number

在MapOptions中设置地图的倾角,0-83

maxPitch

Number

在MapOptions中设置地图的最大倾角

rotation

Number

在MapOptions中设置地图的旋转角度

AmbientLight

AMap.Lights.AmbientLight

用于设置地图的默认环境光源,仅会作用于MeshAcceptLights和Prism和室内地图,

需在Map初始化之后设置,如

map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],0.4);

DirectionLight

AMap.Lights.DirectionLight

用于设置地图的平行光源,仅会作用于MeshAcceptLights和Prism和室内地图,

需在Map初始化之后设置,如:

map.DirectionLight = new AMap.Lights.DirectionLight([1,0,1],[1,1,1],0.6);

方法名

返回值

说明

getViewMode_()

String

获取当前地图的实际视图模式,地图显示为3D是返回'3D',否则返会'2D'

getObject3DByContainerPos(pixel, layers, all)

Array

用于拾取,获取多个Object3DLayer中处于屏幕某个位置下的的Object3D对象或集合。

pixel为屏幕像素坐标的AMap.Pixel对象;

layers为Object3DLayer的数组,可缺省,缺省时将在所有Object3DLayer中进行拾取;

allBool型,表示是否返回所有图层中被拾取到的对象,true的时候将返回拾取到的每个Object3DLayer处于最前面的Object3D对象;缺省为false,将只返回所有图层中处于最前面的Object3D对象的信息。每个信息中包括如下字段:

{
   object://被拾取到的Object3D对象
   index://射线穿透的三角形面在当前mesh所有面上的索引
   point://被拾取到的对象和拾取射线的交叉点的3D坐标    
   distance://交叉点距透视原点的距离
}


lngLatToGeodeticCoord(lnglat)

Pixel

将经纬度转换为三维坐标系下的xy坐标

lngLatToGeodeticCoord(pixel)

LngLat

将三维坐标系下的xy坐标转换为经纬度

AMap.Lights.AmbientLight

描述一个环境光源,用于为地图设置环境光。

构造函数

参数说明

AMap.Lights.AmbientLight(color,intensity)


color用来描述光照的颜色,为一个三个元素的数组,每个元素代表RGB的三个分量,每个分量的取值范围[0,1];

intensity用来描述光照强度,取值范围[0,1];

如:

map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],0.5);


方法名

返回值

说明

setColor(color)


修改光照的颜色。color用来描述光照的颜色,为一个三个元素的数组,

每个元素代表RGB的三个分量,每个分量的取值范围[0,1];

setIntensity(intensity)


修改光照的强度,intensity用来描述光照强度,取值范围[0,1];

以上方法调用后,请调用Object3DLayer实例的reDraw方法使生效。

AMap.Lights.DirectionLight

描述一个环境光源,用于为地图设置平行光照。

构造函数

参数说明

AMap.Lights.DirectionLight(direction,color,intensity)

direction用来描述光的照射方向,为一个三个元素的数组,分别代表方向的xyz分量。direction为相对于地图平面的方向,x正方向朝东,x正方向朝南,z正方向朝下

color用来描述光照的颜色,为一个三个元素的数组,每个元素代表RGB的三个分量,每个分量的取值范围[0,1];

intensity用来描述光照强度,取值范围[0,1];

如:

map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],0.5);


方法名

返回值

说明

setColor(color)


修改光照的颜色。color用来描述光照的颜色,为一个三个元素的数组,

每个元素代表RGB的三个分量,每个分量的取值范围[0,1];

setIntensity(intensity)


修改光照的强度,intensity用来描述光照强度,取值范围[0,1];

setDirection()


修改光照的照射方向

以上方法调用后,请调用Object3DLayer实例的reDraw方法使生效。

AMap.Object3DLayer

用于承载Object3D对象的图层,继承了一般图层的通用属性和属性的set get方法,比如:mapzIndexopacity

构造函数

说明

AMap.Object3DLayer(opts)

创建一个Object3DLayer,opts可包含图层的通用属性,比如:map、zIndex、opacity

属性名

说明

objects

用于获取该图层内的所有Object3D对象,只读,请勿修改

方法名

返回值

说明

add(object3d)


添加一个Object3D实例到图层

remove(object3d)


从图层删除一个Object3D实例

clear()


清楚所有Object3D实例

reDraw()


重绘,在修改了Object3D实例的数据属性,或者地图的光照信息之后调用,可使变更生效。

AMap.Object3D.Mesh

描述一个三维Mesh对象,支持纹理,查看示例

构造函数

说明

AMap.Object3D.Mesh()

创建一个Mesh对象

属性名

类型

说明

geometry

MeshGeometry

描述mesh的几何信息的对象,只读,修改其属性来描述mesh的几何信息

textures

Array

给Mesh设置纹理贴图,数组中可以放入图片url和canvas对象,宽高需要为 2的n次方 乘 2的m次方

纹理示例

needUpdate

Boolean

当修改了geometry信息或者textures之后设置为true,同时调用本实例的reDraw方法使修改生效

transparent

Boolean

表示是否使用了透明颜色,并进行颜色混合

DEPTH_TEST

Boolean

表示绘制当前对象时是否需要开启深度检测

MeshGeometry的属性

类型

说明

vertices

Array

一维数据,每三个元素描述一个顶点的xyz信息,只可修改元素,不可直接赋值

vertexColors

Array

一维数据,每四个元素描述一个顶点颜色的RGBA分量信息,所有分量取值范围[0,1],

只可修改元素的值,不可直接赋值

vertexUVs

Array

一维数据,每两个元素描述一个顶点的纹理坐标信息,纹理坐标以图片左上角为原点。

只可修改元素,不可直接赋值

faces

Array

一维数据,每三个元素描述一个面的信息,每个元素分别为构成面的顶点的索引值,

如不想使用ELEMENT_ARRAY_BUFFER方式,可不设值,此时其他数组按面依次设值即可

只可修改元素,不可直接赋值

textureIndices

Array

一维数据,每个元素描述一个顶点的纹理索引信息,多纹理时使用,取值范围[0-7]。

单纹理或者无纹理时不需要设值。只可修改元素,不可直接赋值

方法

说明

reDraw()

当修改了geometry信息或者textures之后设置needUpdate为true,同时调用该方法使修改生效

AMap.Object3D.MeshLine

基于路径、宽度和高度构建MeshLine, 从v1.4.6开始支持。 查看示例

构造函数

说明

AMap.Object3D.MeshLine(opts)

创建MeshLine对象,opts是MeshLine的构造参数

构造参数

类型

说明

path

Array<LngLat>

设置meshline的路径,path是一个AMap.LngLat的数组

width

Number

设置meshline的宽度,单位是像素,默认值是2

height

Array|Number

设置meshline路径上各点的高度,height有两种类型:

  1. 传入一个数值数组,数组中每个元素对应path参数下相同位置的点的高度
  2. 传入一个数值,则meshline的路径上所有点都以此为高度

默认值0

color

String

设置meshline的颜色,支持RGBA, HEX 和 英文颜色名称(如 'blue', 'green')

方法

返回值

说明

setPath(path)


修改meshline的path,参数说明和构造参数表格中一致

setWidth(width)


修改meshline的width,参数说明和构造参数表格中一致

setHeight(height)


修改meshline的height,参数说明和构造参数表格中一致

setColor(color)


修改meshline的color,参数说明和构造参数表格中一致

AMap.Object3D.MeshAcceptLights

描述一个接受光照的Mesh对象,支持纹理。继承Mesh的所有属性和方法,查看示例。其geometry特有的属性字段如下

MeshGeometry的属性

类型

说明

vertexNormals

Array

一维数据,每三个元素描述一个顶点法向量的xyz信息,只可修改元素,不可直接赋值

AMap.Object3D.Prism

使用MeshAcceptLights封装的棱柱类型,可使用路径和高度快速构建Mesh,支持光照,不支持纹理,查看示例

构造函数

说明

AMap.Object3D.MeshLine(opts)

创建MeshLine对象,opts是MeshLine的构造参数

示例代码

    var bounds = [
        [//大圈
            new AMap.LngLat(116,39),
            new AMap.LngLat(117,39),
            new AMap.LngLat(117,40),
            new AMap.LngLat(116,40)
        ],
        [//洞1
            new AMap.LngLat(116.5,39.25),
            new AMap.LngLat(116.75,39.5),
            new AMap.LngLat(116.5,39.75),
            new AMap.LngLat(116.25,39.5)
        ],
        [//洞2
            new AMap.LngLat(116.75,39.75),
            new AMap.LngLat(116.9,39.5),
            new AMap.LngLat(116.9,39.75)
        ],
        [//岛1
            new AMap.LngLat(117.5,39.25),
            new AMap.LngLat(117.75,39.5),
            new AMap.LngLat(117.5,39.75),
            new AMap.LngLat(117.25,39.5)
        ],[//岛2
            new AMap.LngLat(118.5,39.25),
            new AMap.LngLat(118.75,39.5),
            new AMap.LngLat(118.5,39.75),
            new AMap.LngLat(118.25,39.5)
        ]
    ]
    // var lnglatToG20 =  function(lnglats) {
    //     for (var i = 0; i < lnglats.length; i += 1) {
    //         var g20 = map.lngLatToGeodeticCoord(lnglats[i]);
    //         lnglats[i] = g20
    //     }
    //     return lnglats;
    // }
    // for (var i = 0; i < bounds.length; i += 1) {
    //     bounds[i] = lnglatToG20(bounds[i]);
    // }
    var height = 300000;
    var color = [0,0,1,0.9];
    var prism = new AMap.Object3D.Prism({
        path:bounds,
        height:height,
        color:color
    });


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