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

高德 开发 地图 JS API 教程 3D立体图形 线 Line

更新时间:2018年05月28日


网格是基于三角形图元的立体图形,我们也提供了基于线图元的类型Object3D.Line,用于纯粹的不带宽度的线类型的绘制。我们另外基于Mesh扩展了Object3D.MeshLine类型以支持带宽度的线条绘制。

线 Object3D.Line

Line 的使用方法与Mesh类雷同,区别在于它们geometryattribute属性中表述顶点索引的属性略有不同,Mesh通过faces属性来表述顶点索引,Line通过segments属性来表述索引:

Gometry的属性

类型

说明

vertices

Array<Number>

存放顶点位置的一维数组,三个元素代表一个顶点的位置

vertexColors

Array<Number>

存放顶点颜色的一维数组,四个元素代表一个顶点的颜色

segments

Array<Integer>

存放三角形顶点索引的一维数组,两个元素代表一条线段。

segments长度不为0时,按照segments顶点索引来绘制;

否则当segments长度为0时,按照vertices依次绘制三角形面。

vertexUVs

Array<Number>

存放顶点纹理坐标的一维数组,两个元素代表一个顶点的纹理坐标

textureIndices

Array<Integer>

存放顶点纹理索引的一维数组,一个元素元素代表一个顶点的纹理索引。

当Mesh的textures属性的长度大于1时,代表一个mesh使用多个纹理,

textureIndices表示每个顶点使用哪个纹理。

只使用一个纹理时,这个属性可以不设置

参考示例

宽线 Object3D.MeshLine

MeshLine是基于Mesh实现的一种可以带宽度的线状图形,MeshLine使用一组经纬度、一组高度值组成的空间路径和一个像素宽度值来表述一条带宽度的线条。比如:

var path = [
    new AMap.LngLat(115,39),
    new AMap.LngLat(116,39),
    new AMap.LngLat(117,39),
]
var height = [
    100000,
    500000
    100000
]
var meshLine = new AMap.Object3D.MeshLine({
    	path: path ,
    	height: height,
    	color: 'rgba(55,129,240, 0.9)',
    	width: 20
})

参考示例

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