ThingJS的3D渲染功能，讓你擁有高顔值的項目

線條有分長短、曲直、粗細，不同的語素表達不同的情感。ThingJS之CityBuilder還提供不同顔色模闆，讓3D畫面更加炫酷。

空間資料在地圖上以圖層（Layer)的形式呈現，圖層通過符号和标注來呈現資料。圖層可以是不同類型的内容形式，例如點、線、面、栅格、圖檔等内容。

線條定義為由畫筆繪出來的标記，或兩個對象或元素相交處建立的線條。它定義了繪畫的主題，并幫助我們暗示事物的運動。

什麼是"線"？瑞士著名藝術家保羅克利（1879-1940）給出了迄今為止最好的描述：:“用一根線條去散步,一根線條可以成為一幅畫中的重要因素之一。它可以有他自己的一種生命,一種表現力,以及它自己的個性特征。”它是如此真實的陳述和一點智慧，激發了幾代人對藝術的追求。然而，我們必須變得更正式一點。線條是幾乎每一件藝術作品所依賴的最基本的設計工具。線條有長度、寬度、音調和紋理。它可以劃分空間，定義形式，描述輪廓，或建議方向。你可以在每種藝術中找到一條直線。當然，還有線條畫，甚至最抽象的繪畫也是以線條為基礎的。沒有線條，形狀不能被注意到，紋理不能被發現，音調不能增加深度。當然，你所做的每一個标記都是一行，隻要它不是一個點。一組線（或點）可以做成一個形狀，一系列線（或點）可以做成一個圖案。

GeoLine是帶有地理位置（coordinates）的線要素，也可以添加屬性字段（userdata）以存儲其他資訊。

GeoLine的樣式，按線的形狀，可分為：像素線（Line）、管狀線（PipeLine）、片狀線（Plane）；按渲染類型，可分為：矢量渲染（vector）和貼圖渲染（image）

下面分别講一下不同的線要素類型，是如何實作其樣式的。

像素線（Line）

vector樣式

var  geoLine = app.create({
type: 'GeoLine',
name: '像素線',
coordinates: [
    [116.36808335781097, 39.90587231918103],
    [116.37653768062592, 39.90584351388183],
    [116.38541042804717, 39.90609864611045],
    [116.3970512151718, 39.90649780269116],
    [116.40042006969452, 39.906604792719634],
    [116.40524268150331, 39.90675293248321],
    [116.41170680522919, 39.90692987678102]
],
renderer: {
    lineType: 'Line',
    type: 'vector', // 代表純色渲染
    color: [255, 0, 0],
    // opacity:0.2 ,// 設定不透明度 預設是1
    // speed: 1 ,// 流動效果速度， 預設是0 不流動；speed 可正可負，正負代表流動方向
    // effect: true // 線發光效果 預設為 false 不開啟
}
});
js           

參數說明

lineType : ’Line’代表 線的形狀類型為 像素線

type : 'vector'代表 線渲染類型為矢量純色渲染

color : 設定線的顔色，可為rgb數組（[255,0,0]）、rgb字元串（’rgb(255,0,0)’）、十六進制字元串（‘#ff0000’）

opacity : 設定線的不透明度，預設是1

speed : 設定流動效果速度，預設是0（不流動），speed可正可負，正負代表流動方向

effect : 設定是否開啟線發光效果，預設為false（不開啟發光特效）

Image樣式

lineType: 'Line',
    type: 'image', // 代表貼圖渲染
    imageUrl: '/guide/image/uGeo/path.png',
    numPass: 3,
    speed: 0.5, // 流動效果速度， 預設是0 不流動；speed 可正可負，正負代表流動方向
    // effect: true // 線發光效果 預設為 false 不開啟
}
           

• lineType : ’Line’代表 線的形狀類型為 像素線

• type : 'image'代表 線渲染類型為貼圖渲染

• imageUrl : 使用貼圖的url位址

• numPass : 貼圖通道疊加數（預設為1）一般來說該數值越大，線越亮

• speed : 設定流動效果速度，預設是0（不流動），speed可正可負，正負代表流動方向

• effect : 設定是否開啟線發光效果，預設為false（不開啟發光特效）

管狀線（PipeLine）

圖9.5 管狀線效果圖

var geoLine = app.create({
    type: 'GeoLine',
    name: '管狀線',
    coordinates: [
        [116.36808335781097, 39.90487231918103],
        [116.37653768062592, 39.90484351388183],
        [116.38541042804717, 39.90509864611045],
        [116.3970512151718, 39.905497802691166],
        [116.40042006969452, 39.905604792719636],
        [116.40524268150331, 39.90575293248321],
        [116.41170680522919, 39.90592987678102]
    ],
    renderer: {
        lineType: 'Pipe',
        type: 'vector', // 代表純色渲染
        width: 10, // 設定管線半徑（機關米）
        color: [0, 0, 255],
        // opacity: 0.2,// 設定不透明度 預設是1
        // effect: true // 線發光效果 預設為 false 不開啟
    }
});
           

renderer參數中：

• lineType：’Pipe’代表 線的形狀類型為 管狀線

• type：'vector'代表 線渲染類型為矢量純色渲染

• width：設定管線的半徑（機關為米）

• color：設定線的顔色，可為rgb數組（[255,0,0]）、rgb字元串（’rgb(255,0,0)’）、十六進制字元串（‘#ff0000’）

• opacity：設定線的不透明度，預設是1

• effect：設定是否開啟線發光效果，預設為false（不開啟發光特效）

注意事項

注意：矢量純色渲染的管狀線暫不支援設定speed（即展示流動效果）

片狀線

圖9.6 片狀線效果圖

var geoLine = app.create({
    type: 'GeoLine',
    name: '片狀線',
    coordinates: [
        [116.36808335781097, 39.90387231918103],
        [116.37653768062592, 39.90384351388183],
        [116.38541042804717, 39.904098646110455],
        [116.3970512151718, 39.90449780269117],
        [116.40042006969452, 39.90460479271964],
        [116.40524268150331, 39.90475293248321],
        [116.41170680522919, 39.904929876781026]
    ],
    renderer: {
        lineType: 'Plane',
        type: 'vector', // 代表純色渲染
        width: 5,// 設定線寬 機關為像素
        color: [0, 255, 0],
        // opacity: 0.2,// 設定不透明度 預設是1
        // speed: 1 ,// 流動效果速度， 預設是0 不流動；speed 可正可負，正負代表流動方向
        // effect: true // 線發光效果 預設為 false 不開啟
    }
});
           

• lineType：’Plane’代表 線的形狀類型為 片狀線

• width：設定線寬（機關為像素）

• speed：設定流動效果速度，預設是0（不流動），speed可正可負，正負代表流動方向

type: 'GeoLine',
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: 'Plane',
type: 'image', // 代表貼圖渲染
width: 5, // 設定線寬 機關為像素
imageUrl: '/guide/image/uGeo/path.png',
numPass: 3,
speed: 0.5, // 流動效果速度， 預設是0 不流動；speed 可正可負，正負代表流動方向
// effect: true // 線發光效果 預設為 false 不開啟
}
});           

• lineType：’Plane’代表 線的形狀類型為 像素線

• ype：'image'代表 線渲染類型為貼圖渲染

• imageUrl：使用貼圖的url位址

• numPass：貼圖通道疊加數（預設為1）一般來說該數值越大，線越亮

以上就是ThingJS之Citybuilder三種地理位置線條的設定方法。

CityBuilder提供了多彩的顔色模闆，幫助線條動效更加炫酷！ThingJS的理念就是助力你的3D項目開發，實作高顔值更簡單了！