# Frontend # # Visualisation en trois dimensions # #OD 线 发展 #
- Création de couches de base
- Création de lignes OD (vecteur et texture)
- Station d'accueil de gros volumes de données
Introduction: Les jumeaux numériques se sont progressivement étendus du domaine de la fabrication aux espaces urbains.Les villes jumelles numériques sont beaucoup plus complexes que la fabrication industrielle et correspondent à des villes physiques. Ce n'est pas 100% réaliste, mais de construire un modèle d'information urbain unifié, permettant aux villes numériques et aux villes réelles de «combiner la réalité»! Le modèle dynamique urbain 3D contient des éléments géographiques tels que des points, des lignes et des zones, qui sont combinés dans une carte numérique d'information, ce qui contribue à améliorer le niveau numérique de l'urbanisme, de la construction, des transports, de l'énergie et d'autres domaines.
Lien de démonstration:http://www.thingjs.com/guide/?m=sample
La ligne OD (Origin-Destination Line) fait référence à la connexion entre le point de départ et le point d'arrivée, et est utilisée pour indiquer une certaine relation entre deux points, tels que les itinéraires de vol, la migration de la population, le flux de trafic, les échanges économiques, etc. À partir de cette semaine, la Chine est entrée lentement dans le pic de la saison touristique de la Fête du Printemps, que l'on peut qualifier d'événement de migration explosive de la population. La carte des migrations touristiques de la Fête du Printemps utilise généralement la ligne OD pour indiquer:
Au lieu d'origine, la ligne OD converge vers une direction, telle que Haikou City, comme destination de la migration. 
En quittant la destination, la ligne OD se propage dans différentes directions, mais le point de départ est le même endroit, comme la population quittant Harbin. 
GeoLine est un élément de ligne avec un emplacement géographique. Vous pouvez ajouter des champs attributaires pour stocker d'autres informations. Il peut être divisé en trois types de ligne différents. La différence entre les lignes OD est qu'elles limitent les points de départ et d'arrivée, qui peuvent être formés dans le SIG. Le dessin de lignes OD en trois dimensions nécessite Quelles sont les précautions? Quelle est la différence entre la création d'une ligne OD et d'autres lignes?
Voir la démo pour l'expérience de développement de ligne OD:http://www.thingjs.com/guide/?m=sample
1. Création de couches de base
Une fois le composant terrestre chargé dynamiquement, différentes superpositions de couches sont obtenues et un développement secondaire plus flexible est effectué sur la couche de service ThingLayer. Créez un calque ThingLayer et ajoutez le ThingLayer à l'image du bas, obtenez la position des coordonnées startPos du point de départ et montrez l'effet de la diffusion vers l'extérieur à partir des points et des surfaces.
var startPos = [116,39139175415039, 39,906082185995366];
2. Création de la ligne OD
Le moteur de rendu ThingJS propose deux types de rendu, le rendu vectoriel et le rendu d'image. Pour obtenir la ligne OD, commencez par interroger le chemin de migration à partir de la couche ThingJS, telle que Beijing-Jinan, puis modifiez le style de ce chemin.
(1) Rendu de style vectoriel
Le moteur de rendu définit la couleur de la ligne vectorielle Vector. L'exemple montre comment utiliser le tableau rgb [255,0,0]. Vous pouvez également utiliser la chaîne rgb "rgb (255,0,0)", chaîne hexadécimale "# ff0000 ".
La vitesse de l'effet d'écoulement est 0 par défaut, ce qui est un effet statique. La valeur peut être positive ou négative, représentant à la fois des directions d'écoulement positives et négatives. Le style de texture est également applicable.
renderer: {
lineType: 'Line',
type: 'vector', // 代表纯色渲染
color: [255, 0, 0],
// opacity:0.2 ,// 设置不透明度 默认是1
// speed: 1 ,// 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}
});(2) Rendu du style d'image
Obtenez l'URL pour générer la ligne OD du type de texture. La couleur et les autres styles sont possédés par la texture elle-même. La largeur de la ligne peut être étendue en modifiant le nombre de couches de texture de superposition numPass. De manière générale, plus la valeur est élevée, plus la ligne est lumineuse.
Utilisez la fonction d'effet pour activer l'effet spécial d'éclairage de ligne, qui joue un rôle important dans la carte.
renderer: {
lineType: 'Line',
type: 'image', // 代表贴图渲染
imageUrl: '/guide/image/uGeo/path.png',
numPass: 3,
speed: 0.5, // 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
// effect: true // 线发光效果 默认为 false 不开启
}3. Station d'accueil de gros volumes de données
Il convient de noter que la ligne OD avec un grand volume de données nécessite généralement un rendu côté navigateur d'au moins des centaines de milliers ou plus d'un million. Peu importe la transmission ou le rendu des données, un moyen plus efficace est nécessaire - La plate-forme ThingJS fournit une génération dynamique de Big Data Interface, utilisant WebSocket (des millions de magnitude), une interface de données MQTT (une seule machine, des dizaines de millions) pour obtenir une communication duplex fluide et un développement en ligne facile avec le SDK frontal!
À propos de ThingJS
ThingJS fournit des composants de visualisation 3D de l'Internet des objets pour faciliter le développement 3D! Le script 3D d'appel direct Javascript, basé sur 200 exemples de code source de développement 3D, vous permet de comprendre pleinement la logique de développement visuel de l'Internet des objets. Le service unique d'utilisation de la construction de scénarios, du développement de scripts 3D, du déploiement de projets d'ancrage des données, rend le développement plus efficace et devient un innovateur technologique jumeau numérique avec 200 000 développeurs!