地图中最重要的元素是线条,起到很好的指导作用,用户的眼睛按照线条变化走动,实现交互效果。ThingJS的地图搭建工具Citybuilder快速实现3D渲染,让你的体验更好。
空间数据在地图上以图层(Layer)的形式呈现,图层通过符号和标注来呈现数据。图层可以是不同类型的内容形式,例如点、线、面、栅格、图片等内容。
线条定义为由画笔绘出来的标记,或两个对象或元素相交处创建的线条。它定义了绘画的主题,并帮助我们暗示事物的运动。
什么是"线"?瑞士著名艺术家保罗克利(1879-1940)给出了迄今为止最好的描述::“用一根线条去散步,一根线条可以成为一幅画中的重要因素之一。它可以有他自己的一种生命,一种表现力,以及它自己的个性特征。”它是如此真实的陈述和一点智慧,激发了几代人对艺术的追求。然而,我们必须变得更正式一点。线条是几乎每一件艺术作品所依赖的最基本的设计工具。线条有长度、宽度、音调和纹理。它可以划分空间,定义形式,描述轮廓,或建议方向。你可以在每种艺术中找到一条直线。当然,还有线条画,甚至最抽象的绘画也是以线条为基础的。没有线条,形状不能被注意到,纹理不能被发现,音调不能增加深度。当然,你所做的每一个标记都是一行,只要它不是一个点。一组线(或点)可以做成一个形状,一系列线(或点)可以做成一个图案。
GeoLine是带有地理位置(coordinates)的线要素,也可以添加属性字段(userdata)以存储其他信息。
GeoLine的样式,按线的形状,可分为:像素线(Line)、管状线(PipeLine)、片状线(Plane);按渲染类型,可分为:矢量渲染(vector)和贴图渲染(image)
下面分别讲一下不同的线要素类型,是如何实现其样式的。
像素线(Line)
vector
var geoLine = app.create({
type
name
coordinates
],
renderer
lineType
type
color
}
});
参数说明
lineType : ’Line’
type : 'vector'
color :
opacity :
speed :
effect :
Image
renderer
lineType
type
imageUrl
numPass
speed
}
参数说明
· lineType : ’Line’代表 线的形状类型为 像素线
· type : 'image'代表 线渲染类型为贴图渲染
· imageUrl : 使用贴图的url地址
· numPass : 贴图通道叠加数(默认为1)一般来说该数值越大,线越亮
· speed : 设置流动效果速度,默认是0(不流动),speed可正可负,正负代表流动方向
· effect : 设置是否开启线发光效果,默认为false(不开启发光特效)
管状线(PipeLine)
图9.5 管状线效果图
type
name
coordinates
renderer
lineType
type
width
color
});
renderer参数中:
· lineType:’Pipe’代表 线的形状类型为 管状线
· type:'vector'代表 线渲染类型为矢量纯色渲染
· width:设置管线的半径(单位为米)
· color:设置线的颜色,可为rgb数组([255,0,0])、rgb字符串(’rgb(255,0,0)’)、十六进制字符串(‘#ff0000’)
· opacity:设置线的不透明度,默认是1
· effect:设置是否开启线发光效果,默认为false(不开启发光特效)
注意事项
注意:矢量纯色渲染的管状线暂不支持设置speed(即展示流动效果)
片状线
图9.6 片状线效果图
type
name
coordinates
renderer
lineType
type
width
color
});
renderer参数中:
· lineType:’Plane’代表 线的形状类型为 片状线
· type:'vector'代表 线渲染类型为矢量纯色渲染
· width:设置线宽(单位为像素)
· color:设置线的颜色,可为rgb数组([255,0,0])、rgb字符串(’rgb(255,0,0)’)、十六进制字符串(‘#ff0000’)
· opacity:设置线的不透明度,默认是1
· speed:设置流动效果速度,默认是0(不流动),speed可正可负,正负代表流动方向
· effect:设置是否开启线发光效果,默认为false(不开启发光特效)
Image样式
type
name
coordinates
[116.36808335781097, 39.90337231918103],
[116.37653768062592, 39.90334351388183],
[116.38541042804717, 39.90359864611045],
[116.3970512151718, 39.903997802691165],
[116.40042006969452, 39.904104792719636],
[116.40524268150331, 39.90425293248321],
[116.41170680522919, 39.90442987678102]
],
renderer
lineType
type
width
imageUrl
numPass
speed
// effect: true //
}
});
renderer参数中:
· lineType:’Plane’代表 线的形状类型为 像素线
· ype:'image'代表 线渲染类型为贴图渲染
· imageUrl:使用贴图的url地址
· width:设置线宽(单位为像素)
· numPass:贴图通道叠加数(默认为1)一般来说该数值越大,线越亮
· speed:设置流动效果速度,默认是0(不流动),speed可正可负,正负代表流动方向
· effect:设置是否开启线发光效果,默认为false(不开启发光特效)
以上就是ThingJS之Citybuilder三种地理位置线条的设置方法。
快速完成地图场景搭建,就选CityBuilder工具,ThingJS的城市场景专家!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。