# Frontend # # Visualización tridimensional # #OD 线 发展 #
- Creación de capa básica
- Creación de línea OD (vector y textura)
- Acoplamiento de gran volumen de datos
Introducción: Los gemelos digitales se han expandido gradualmente desde el campo de la fabricación a los espacios urbanos. Las ciudades gemelas digitales son mucho más complicadas que la fabricación industrial y corresponden a ciudades físicas. No es 100% realista, sino construir un modelo de información urbana unificado, ¡permitiendo que las ciudades digitales y las ciudades reales "combinen la realidad"! El modelo dinámico urbano 3D contiene elementos geográficos como puntos, líneas y áreas, que se combinan en un mapa digital de información, que ayuda a mejorar el nivel digital de planificación urbana, construcción, transporte, energía y otros campos.
Enlace de demostración:http://www.thingjs.com/guide/?m=sample
Línea OD (Línea Origen-Destino) se refiere a la conexión entre el punto de inicio y el punto final, y se utiliza para indicar una cierta relación entre dos puntos, como rutas de vuelo, migración de población, flujo de tráfico, intercambios económicos, etc. A partir de esta semana, China ha entrado lentamente en el pico de la temporada de viajes del Festival de Primavera, que se puede llamar un evento de migración de población explosiva. El mapa de migración de viajes del Festival de Primavera generalmente usa la línea OD para indicar:
En el lugar de origen, la línea OD converge en una dirección, como la ciudad de Haikou, como destino de la migración. 
Al salir del destino, la línea OD se extiende en diferentes direcciones, pero el punto de partida es el mismo lugar, como la población que sale de Harbin. 
GeoLine es un elemento de línea con una ubicación geográfica. Puede agregar campos de atributos para almacenar otra información. Se puede dividir en tres tipos de líneas diferentes. La diferencia en las líneas OD es que limitan los puntos inicial y final, que se pueden formar en SIG. Dibujar líneas OD tridimensionales requiere Cuales son las precauciones? ¿Cuál es la diferencia entre crear una línea OD y otras líneas?
Vea la demostración para la experiencia de desarrollo de líneas OD:http://www.thingjs.com/guide/?m=sample
1. Creación de capas básicas
Una vez que el componente terrestre se carga dinámicamente, se obtienen diferentes capas superpuestas y se realiza un desarrollo secundario más flexible en la capa de servicio ThingLayer. Cree una capa ThingLayer y agregue ThingLayer a la imagen inferior, obtenga la posición de coordenadas startPos del punto de partida y muestre el efecto de la difusión hacia afuera desde puntos y superficies.
var startPos = [116,39139175415039, 39,906082185995366];
2. Creación de línea OD
El renderizador ThingJS proporciona dos tipos de renderizado, renderizado vectorial y renderizado de imágenes. Para obtener la línea OD, primero consulte la ruta de migración desde la capa ThingJS, como Beijing-Jinan, y luego modifique el estilo de esta ruta.
(1) Representación de estilo vectorial
El renderizador establece el color de la línea del vector vectorial. El ejemplo muestra cómo usar la matriz rgb [255,0,0]. También puede usar la cadena rgb "rgb (255,0,0)", cadena hexadecimal "# ff0000 ".
La velocidad del efecto de flujo es 0 por defecto, que es un efecto estático; el valor puede ser positivo o negativo, representando direcciones de flujo tanto positivas como negativas. El estilo de textura también es aplicable.
renderer: {
lineType: 'Line',
type: 'vector', // 代表纯色渲染
color: [255, 0, 0],
// opacity:0.2 ,// 设置不透明度 默认是1
// speed: 1 ,// 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}
});(2) Representación de estilo de imagen
Obtenga la url para generar la línea OD del tipo de textura. El color y otros estilos los posee la propia textura. El ancho de línea se puede expandir modificando el número de superposición de canales de textura numPass. En términos generales, cuanto mayor sea el valor, más brillante será la línea.
Utilice la función de efecto para activar el efecto especial de iluminación de línea, que juega un papel importante en el mapa.
renderer: {
lineType: 'Line',
type: 'image', // 代表贴图渲染
imageUrl: '/guide/image/uGeo/path.png',
numPass: 3,
speed: 0.5, // 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}3. Acoplamiento de gran volumen de datos
Vale la pena señalar que las líneas OD con grandes volúmenes de datos generalmente requieren una representación del lado del navegador de al menos cientos de miles o más de un millón. Tanto la transmisión de datos como la representación de datos requieren métodos más eficientes : la plataforma ThingJS proporciona big data dinámico Interfaz, utilizando WebSocket (nivel de millones), interfaz de datos MQTT (nivel de diez millones de una sola máquina) para lograr una comunicación dúplex fluida y un fácil desarrollo en línea con el SDK de front-end.
Sobre ThingJS
ThingJS proporciona componentes de visualización 3D de Internet de las cosas para facilitar el desarrollo 3D. El script 3D de llamada directa de Javascript, basado en 200 ejemplos de código fuente de desarrollo 3D, le permite comprender completamente la lógica de desarrollo visual del Internet de las cosas. El servicio integral de uso de construcción de escenarios, desarrollo de scripts 3D, acoplamiento de datos, implementación de proyectos hace que el desarrollo sea más eficiente y se convierte en un innovador de tecnología de gemelos digitales con 200.000 desarrolladores.