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

线 Line 最后更新时间: 2021年01月22日


网格是基于三角形图元的立体图形,我们也提供了基于线图元的类型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.ThinLine

为了方便使用,我们还提供了ThinLine类型,这个类型可以用于创建没有宽度的细线,创建的时候只需要设置经纬度路径 path 颜色 color 就可以了。

var path = [
    new AMap.LngLat(115,39),
    new AMap.LngLat(116,39),
    new AMap.LngLat(117,39),
]  
var thinline = new AMap.Object3D.ThinLine({
    path: path,
    color:'#0055ff'
});
object3Dlayer.add(thinline)


宽线 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
})

参考示例

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