Exemple officiel ThingJS (9): Développer un script de carte 3D via l'URL transférée depuis CityBuilder

# Développement frontal ## Visualisation 3D ## IoT #

1. Identifiez l'emplacement de la scène virtuelle
2. Développement secondaire export Citybuilder
3. Configuration et modification des paramètres de base
   

CityBuilder ( outil de création de scènes au niveau de la ville ) est assez simple à utiliser et s'adapte aux habitudes d'utilisation du concepteur. Ensuite, comment livrer la scène au niveau de la ville au développement et l'utiliser de manière flexible dans les liens suivants?

La plate-forme ThingJS a longtemps considéré ce problème, a unifié les données de la plate-forme et prend en charge CityBuilder pour transférer les URL; une fois que la plate-forme a chargé le composant de carte, vous pouvez facilement le développer à nouveau. Analysons les étapes ci-dessous. Si vous avez des questions, veuillez laisser un message.

Identifiez l'emplacement de la scène virtuelle

La Terre tridimensionnelle est basée sur le système de coordonnées mondial. Des scènes au niveau de la ville ou du parc sélectionneront les emplacements réels pour le chargement. Les développeurs doivent modifier les coordonnées à trois points de app.background pour fournir un positionnement précis sur la carte.

var app = new THING.App();
app.background = [0, 0, 0];

Développement secondaire export Citybuilder

Une fois le script du composant de carte chargé dynamiquement, la carte peut être créée via l'URL transférée depuis Citybuilder pour le développement secondaire, y compris l'ajout de couches métier et la modification des paramètres d'objet en arrière-plan. L'exemple de description est simple et facile à comprendre, permettant aux développeurs de comprendre plus clairement la valeur de la fonction. Regardez plus de démos et entrez sur le site officiel pour vous inscrire !

Notez qu'il est plus pratique à utiliser avec l'outil de carte CityBuilder. Les concepteurs peuvent utiliser des composants de visualisation pour définir des styles de calque, prendre en charge l'importation de scènes architecturales 3D, puis générer des URL de projet et importer ThingJS ( plateforme de visualisation des jumeaux numériques de la plateforme PaaS de visualisation 3D de l'Internet des objets ), comme indiqué ci-dessous Montré.

// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
    app.create({
        type: 'Map',
        // CityBuilder转出的url
        url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TVRFNE9UZz1DaXR5QnVpbGRlckAyMDE5',
        complete: function (event) {
            // 在这里编写业务代码
            var map = event.object;
            // 获取项目中的瓦片图层
            var baseLayers = map.baseLayers;
            // 获取项目中的业务图层
            var userLayers = map.userLayers;
            var buildingLayer = app.query('building')[0];
            buildingLayer.on(THING.EventType.DBLClick, function (e) {
                let obj = e.object;
                app.camera.earthFlyTo({
                    object: obj
                });
            });

            var toolbarWidth = 250;
            var toolbar = new THING.widget.Panel({
                hasTitle: true, // 是否有标题
                titleText: '图层列表',
                width: toolbarWidth
            });
            let clientWidth = app.domElement.clientWidth;
            toolbar.position = [clientWidth - toolbarWidth - 10, 10];
            userLayers.forEach(function (layer) {
                var button = toolbar.addBoolean({ open: true }, 'open').caption(layer.name);// 绑定回调
                button.on('change', function (ev) {
                    layer.visible = ev;
                });
            });

Configuration et modification des paramètres de base

Les objets de calque dans une scène 3D sont généralement configurés à l'avance dans citybuilder. Les paramètres de base incluent le nom, la longueur, la largeur, la hauteur, la couleur et d'autres paramètres. Une fois importés sur la plate-forme thingjs, ils peuvent être modifiés directement à l'aide du code frontal. Ils sont couramment utilisés pour la largeur de ligne, la taille en points et la hauteur du bâtiment.

paramètres de configuration de citybuilder

Outil de création de scènes au niveau de la ville

ThingJS modifier le code de paramètre

Plus de vue démo

// 先根据名称查询图层对象 名称是在CityBuilder中配置的图层的名称
            var primaryRoadLayer = app.query('primary')[0];
            var originWidth = primaryRoadLayer.renderer.width;
            new THING.widget.Button('修改线宽度', function () {
                if (primaryRoadLayer.renderer.width === originWidth) {
                    primaryRoadLayer.renderer.width = 8;
                }
                else {
                    primaryRoadLayer.renderer.width = originWidth;
                }
            });

ThingJS utilise l'URL pour développer des scènes de la terre et se combine avec CityBuilder pour le rendre plus facile.Les concepteurs et les développeurs peuvent mieux coopérer et terminer la sortie du projet 3D!

À propos de ThingJS

La plate-forme ThingJS fournit des composants de visualisation 3D pour l'Internet des objets, facilitant 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. Création de scènes, développement de scripts 3D, amarrage de données, déploiement de projets, un service à guichet unique pour rendre le développement plus efficace et devenir un innovateur de technologie jumelle numérique avec 200 000 développeurs! Activité de fleurs de haricots magiques, bienvenue pour cliquer pour accéder au site officiel >>