高德地图 JS API—3D立体图形线 Line - 北京炫码科技有限公司

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

线 Object3D.Line

Line 的使用方法与Mesh类雷同，区别在于它们geometry的attribute属性中表述顶点索引的属性略有不同，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 就可以了。JavaScript

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使用一组经纬度、一组高度值组成的空间路径和一个像素宽度值来表述一条带宽度的线条。比如：JavaScript

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

0 0 投票数

文章评分