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

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

3D地图最后更新时间: 2021年01月22日

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

类名说明
AMap.Map这里仅列出和3D相关的属性,其他Map属性请查阅
AMap.Lights.AmbientLight用于设置地图的环境光源,目前仅会作用于MeshAcceptLightsPrism、室内地图、楼块
AMap.Lights.DirectionLight用于设置地图的平行光照,目前仅会作用于MeshAcceptLightsPrism、室内地图、楼块
AMap.Object3DLayer图层类,用于添加所有Object3D类型
AMap.Object3D.Mesh用于创建三维Mesh的基础类型,支持纹理,需要自己构建Geometry的各种顶点信息
AMap.Object3D.MeshLine用于创建支持宽度和高度的3D线段
AMap.Object3D.MeshAcceptLights用于创建接受光照的三维Mesh的基础类型,接受光照、支持纹理,需要自己构建Geometry的各种顶点信息
AMap.Object3D.Prism基于Mesh封装的创建棱柱的简单类型,接受光照、不支持纹理,不再需要自己构建Geometry的各种顶点信息只需要传入经纬度路径和颜色即可
AMap.Object3D.Line用于创建三维线条的基础类型,支持纹理,不支持宽度,需要自己构建Geometry的各种顶点信息
AMap.Object3D.ThinLine基于Line封装的创建细线的简单类型,不支持宽度和纹理,不再需要自己构建Geometry的各种顶点信息只需要传入经纬度的路径和颜色即可
AMap.Object3D.Points用于创建三维点阵的基础类型,支持纹理,需要自己构建Geometry的各种顶点信息
AMap.Object3D.RoundPoints基于Points继承出来的用于创建三维圆点的基础类型,支持纹理,不支持宽度,需要自己构建Geometry的各种顶点信息

AMap.Map

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

属性名类型说明
viewModeString在MapOptions中设置,可选值有’3D’、’2D’,缺省为’2D’,设置为3D时将在webgl环境满足条件的的浏览器中显示为三维地图
pitchNumber在MapOptions中设置地图的倾角,0-83
maxPitchNumber在MapOptions中设置地图的最大倾角
rotationNumber在MapOptions中设置地图的旋转角度
AmbientLightAMap.Lights.AmbientLight用于设置地图的默认环境光源,仅会作用于MeshAcceptLights和Prism和室内地图,需在Map初始化之后设置,如map.AmbientLight = new AMap.Lights.AmbientLight([1,1,1],0.4);
DirectionLightAMap.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坐标
geodeticCoordToLngLat(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 正方向朝东,y 正方向朝南,z 正方向朝下color用来描述光照的颜色,为一个三个元素的数组,每个元素代表RGB的三个分量,每个分量的取值范围[0,1];intensity用来描述光照强度,取值范围[0,1];如: var dir = new M.Lights.DirectionLight([0, -1, 1],[1, 1, 1],0.1)描述了一个从正南方斜向下照射的一道平行光
方法名返回值说明
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对象
属性名类型说明
geometryMeshGeometry描述mesh的几何信息的对象,只读,修改其属性来描述mesh的几何信息
texturesArray给Mesh设置纹理贴图,数组中可以放入图片url和canvas对象,宽高需要为 2的n次方 乘 2的m次方纹理示例
needUpdateBoolean当修改了geometry信息或者textures之后设置为true,同时调用本实例的reDraw方法使修改生效
transparentBoolean表示是否使用了透明颜色,并进行颜色混合
DEPTH_TESTBoolean表示绘制当前对象时是否需要开启深度检测
MeshGeometry的属性类型说明
verticesArray一维数据,每三个元素描述一个顶点的xyz信息,只可修改元素,不可直接赋值
vertexColorsArray一维数据,每四个元素描述一个顶点颜色的RGBA分量信息,所有分量取值范围[0,1],只可修改元素的值,不可直接赋值
vertexUVsArray一维数据,每两个元素描述一个顶点的纹理坐标信息,纹理坐标以图片左上角为原点。只可修改元素,不可直接赋值
facesArray一维数据,每三个元素描述一个面的信息,每个元素分别为构成面的顶点的索引值,如不想使用ELEMENT_ARRAY_BUFFER方式,可不设值,此时其他数组按面依次设值即可只可修改元素,不可直接赋值
textureIndicesArray一维数据,每个元素描述一个顶点的纹理索引信息,多纹理时使用,取值范围[0-7]。单纹理或者无纹理时不需要设值。只可修改元素,不可直接赋值
方法说明
reDraw()当修改了geometry信息或者textures之后设置needUpdate为true,同时调用该方法使修改生效

AMap.Object3D.MeshLine

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

构造函数说明
AMap.Object3D.Prism(opts)创建MeshLine对象,opts是Prism的构造参数
构造参数类型说明
pathArray<LngLat>设置meshline的路径,path是一个AMap.LngLat的数组
widthNumber设置meshline的宽度,单位是像素,默认值是2
heightArray|Number设置meshline路径上各点的高度,height有两种类型:传入一个数值数组,数组中每个元素对应path参数下相同位置的点的高度传入一个数值,则meshline的路径上所有点都以此为高度默认值0
colorString设置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的属性类型说明
vertexNormalsArray一维数据,每三个元素描述一个顶点法向量的xyz信息,只可修改元素,不可直接赋值

AMap.Object3D.Prism

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

构造函数说明
AMap.Object3D.Prism(opts)创建MeshLine对象,opts是Prism的构造参数

示例代码JavaScript

    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
    });

AMap.Object3D.Line

细线,不支持宽度

构造函数说明
AMap.Object3D.Line()创建一个Mesh对象
属性名类型说明
geometryLineGeometry描述Line的几何信息的对象,只读,修改其属性来描述Line的几何信息
texturesArray给Line设置纹理贴图,数组中可以放入图片url和canvas对象,宽高需要为 2的n次方 乘 2的m次方纹理示例
needUpdateBoolean当修改了geometry信息或者textures之后设置为true,同时调用本实例的reDraw方法使修改生效
transparentBoolean表示是否使用了透明颜色,并进行颜色混合
DEPTH_TESTBoolean表示绘制当前对象时是否需要开启深度检测
LineGeometry的属性类型说明
verticesArray一维数据,每三个元素描述一个顶点的xyz信息,只可修改元素,不可直接赋值
vertexColorsArray一维数据,每四个元素描述一个顶点颜色的RGBA分量信息,所有分量取值范围[0,1],只可修改元素的值,不可直接赋值
vertexUVsArray一维数据,每两个元素描述一个顶点的纹理坐标信息,纹理坐标以图片左上角为原点。只可修改元素,不可直接赋值
segmentsArray一维数据,每两个个元素描述一个线段的信息,每个元素分别为构成面的顶点的索引值,如不想使用ELEMENT_ARRAY_BUFFER方式,可不设值,此时其他数组按线段顺序依次设置即可只可修改元素,不可直接赋值
textureIndicesArray一维数据,每个元素描述一个顶点的纹理索引信息,多纹理时使用,取值范围[0-7]。单纹理或者无纹理时不需要设值。只可修改元素,不可直接赋值

AMap.Object3D.ThinLine

细线,不支持宽度,基于AMap.Object3D.Line

构造函数说明
AMap.Object3D.ThinLine(ThinLineOptions)创建一个Mesh对象
ThinLineOptions字段类型说明
path[LngLat]经纬度数组
colorString符合css语法的颜色值,或者[1,1,1,0.2]格式的数组

AMap.Object3D.Points

点阵,用于创建一堆点,基于webgl的POINT图元绘制

构造函数说明
AMap.Object3D.Points()创建一个Points对象,可展示一组方点
属性名类型说明
geometryPointsGeometry描述Points的几何信息的对象,只读,修改其属性来描述Points的几何信息
texturesArray给点设置纹理贴图,数组中可以放入图片url和canvas对象,宽高需要为 2的n次方 乘 2的m次方纹理示例
needUpdateBoolean当修改了geometry信息或者textures之后设置为true,同时调用本实例的reDraw方法使修改生效
transparentBoolean表示是否使用了透明颜色,并进行颜色混合
DEPTH_TESTBoolean表示绘制当前对象时是否需要开启深度检测
borderColorArray点的边框颜色,诸如 [0.6, 0.8, 1, 1]的rgba数组格式
borderWeightNumber点的边框宽度,单位px
PointsGeometry的属性类型说明
verticesArray一维数组,每三个元素描述一个顶点的xyz信息,只可修改元素,不可直接赋值
vertexColorsArray一维数组,每四个元素描述一个顶点颜色的RGBA分量信息,所有分量取值范围[0,1],只可修改元素的值,不可直接赋值
pointSizesArray一维数组,每一个元素描述一个点的大小
pointAreasArray一维数组,每四个元素描述一个点的有效区域,纹理、颜色、边框等样式将仅在此有效区域内生效四个元素分别代表left、top、width、height与Size的比值,取值范围[0,1]不设置的时候有效区域为整个点的正方形范围。
vertexUVsArray一维数组,每四个元素描述一个圆点有效区域的左上角和右下角的纹理坐标信息
textureIndicesArray一维数组,每个元素描述一个点的纹理索引信息,多纹理时使用,取值范围[0-7]。单纹理或者无纹理时不需要设值。只可修改元素,不可直接赋值

AMap.Object3D.RoundPoints

点阵,用于创建一堆圆点,基于webgl的POINT图元绘制

构造函数说明
AMap.Object3D.RoundPoints()创建一个RoundPoints对象,可展示一组圆点
属性名类型说明
geometryRoundPointsGeometry描述Points的几何信息的对象,只读,修改其属性来描述Points的几何信息
texturesArray给点设置纹理贴图,数组中可以放入图片url和canvas对象,宽高需要为 2的n次方 乘 2的m次方纹理示例
needUpdateBoolean当修改了geometry信息或者textures之后设置为true,同时调用本实例的reDraw方法使修改生效
transparentBoolean表示是否使用了透明颜色,并进行颜色混合
DEPTH_TESTBoolean表示绘制当前对象时是否需要开启深度检测
borderColorArray点的边框颜色,诸如 [0.6, 0.8, 1, 1]的rgba数组格式
borderWeightNumber点的边框宽度,单位px
PointsGeometry的属性类型说明
verticesArray一维数组,每三个元素描述一个顶点的xyz信息,只可修改元素,不可直接赋值
vertexColorsArray一维数组,每四个元素描述一个顶点颜色的RGBA分量信息,所有分量取值范围[0,1],只可修改元素的值,不可直接赋值
pointSizesArray一维数组,每一个元素描述一个点的大小
vertexUVsArray一维数组,每四个元素描述一个圆点的左上角和右下角的纹理坐标信息
textureIndicesArray一维数组,每个元素描述一个点的纹理索引信息,多纹理时使用,取值范围[0-7]。单纹理或者无纹理时不需要设值。只可修改元素,不可直接赋值
0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x