#Frontend# #Three-dimensional visualization# #OD线发展#
- Basic layer creation
- OD line creation (vector and texture)
- Large data volume docking
Introduction: Digital twins have gradually expanded from the manufacturing field to urban spaces. Digital twin cities are much more complicated than industrial manufacturing and correspond to physical cities. It is not 100% realistic, but to build a unified urban information model, allowing digital cities and real cities to "combine reality"! The 3D city dynamic model contains geographic elements such as points, lines, and areas, which are combined into an information digital map, which helps to improve the digital level of urban planning, construction, transportation, energy and other fields.
Demo link:http://www.thingjs.com/guide/?m=sample
OD line (Origin-Destination Line) refers to the connection between the start point and the end point, and is used to indicate a certain relationship between two points, such as flight routes, population migration, traffic flow, economic exchanges, etc. Starting this week, China has slowly entered the peak of the Spring Festival travel season, which can be called an explosive population migration event. The Spring Festival travel migration map usually uses the OD line to indicate:
In the place of origin, the OD line converges to one direction, such as Haikou City, as the destination of the migration. 
Moving out of the destination, the OD line spreads to different directions, but the starting point is the same location, such as the population moving out of Harbin. 
GeoLine is a line element with a geographic location. You can add attribute fields to store other information. It can be divided into three different line types. The difference in OD lines is that they limit the start and end points, which can be formed in GIS. Drawing 3D OD lines requires What are the precautions? What is the difference between creating an OD line and other lines?
See demo for OD line development experience:http://www.thingjs.com/guide/?m=sample
1. Basic layer creation
After the earth component is dynamically loaded, different layer overlays are obtained, and more flexible secondary development is performed on the ThingLayer service layer. Create a ThingLayer layer, and add the ThingLayer to the bottom image, get the coordinate position startPos of the starting point, and show the effect of outward diffusion from points and surfaces.
var startPos = [116.39139175415039, 39.906082185995366];
2. OD line creation
The ThingJS renderer provides two rendering types, vector rendering and image rendering. To obtain the OD line, first query the migration path from the ThingJS layer, such as Beijing-Jinan, and then modify the style of this path.
(1) Vector style rendering
The renderer sets the color of the Vector vector line. The example shows how to use the rgb array [255,0,0]. You can also use the rgb string "rgb (255,0,0)", hexadecimal string "# ff0000".
The flow effect speed is 0 by default, which is a static effect; the value can be positive or negative, representing both positive and negative flow directions. The texture style is also applicable.
renderer: {
lineType: 'Line',
type: 'vector', // 代表纯色渲染
color: [255, 0, 0],
// opacity:0.2 ,// 设置不透明度 默认是1
// speed: 1 ,// 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}
});(2) Image style rendering
Get the url to generate the OD line of the texture type. The color and other styles are possessed by the texture itself. The line width can be expanded by modifying the overlay number of texture channels numPass. Generally speaking, the larger the value, the brighter the line.
Use the effect function to turn on the line lighting special effect, which plays an important role in the map.
renderer: {
lineType: 'Line',
type: 'image', // 代表贴图渲染
imageUrl: '/guide/image/uGeo/path.png',
numPass: 3,
speed: 0.5, // 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}3. Large data volume docking
It is worth noting that the OD line with large data volume generally requires browser-side rendering at least hundreds of thousands or more than one million. No matter data transmission or data rendering, a more efficient way is needed- ThingJS platform provides dynamic big data generation Interface, using WebSocket (millions of magnitude), MQTT (single machine tens of millions) data interface to achieve smooth duplex communication, and easy online development with front-end SDK!
About ThingJS
ThingJS provides 3D visualization components of the Internet of Things to make 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. The one-stop service of using scene construction-3D script development-data docking-project deployment makes development more efficient, and becomes a digital twin technology innovator with 200,000 developers!