Ejemplo oficial de ThingJS (9): Desarrolle un script de mapa 3D a través de la URL transferida desde CityBuilder

# Desarrollo frontal ## Visualización 3D ## IoT #

1. Identificar la ubicación de la escena virtual
2. Desarrollo secundario de exportación de Citybuilder
3. Configuración y modificación de parámetros básicos
   

CityBuilder ( herramienta de construcción de escenas a nivel de ciudad ) es lo suficientemente simple de usar y se adapta a los hábitos de uso del diseñador. Entonces, ¿cómo llevar la escena a nivel de ciudad trabajadora al desarrollo y usarla de manera flexible en los enlaces posteriores?

La plataforma ThingJS ha considerado este problema durante mucho tiempo, unificó los datos de la plataforma y admite que CityBuilder transfiera URL; después de que la plataforma cargue el componente de mapa, puede desarrollarlo fácilmente nuevamente. Analicemos los pasos a continuación. Si tiene alguna pregunta, deje un mensaje.

Identificar la ubicación de la escena virtual

La tierra tridimensional se basa en el sistema de coordenadas del mundo. Las escenas a nivel de ciudad o de parque seleccionarán ubicaciones reales para la carga. Los desarrolladores deben modificar las coordenadas de tres puntos del fondo de la aplicación para proporcionar un posicionamiento preciso del mapa.

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

Desarrollo secundario de exportación de Citybuilder

Una vez que el script del componente del mapa se carga dinámicamente, el mapa se puede crear a través de la URL transferida desde Citybuilder para el desarrollo secundario, lo que incluye agregar capas comerciales y modificar los parámetros de los objetos en segundo plano. La descripción del ejemplo es simple y fácil de entender, lo que permite a los desarrolladores comprender más claramente el valor de la función. ¡Vea más demostraciones e ingrese al sitio web oficial para registrarse !

Tenga en cuenta que es más conveniente utilizarlo con la herramienta de mapas CityBuilder. Los diseñadores pueden usar componentes de visualización para establecer estilos de capa, admitir la importación de escenas arquitectónicas en 3D y luego generar URL de proyectos e importar ThingJS ( plataforma PaaS de visualización 3D de Internet de las cosas-plataforma de visualización de gemelos digitales ), como se muestra a continuación Mostrado.

// 引用地图组件脚本
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;
                });
            });

Configuración y modificación de parámetros básicos

Los objetos de capa en una escena 3D generalmente se configuran de antemano en citybuilder. Los parámetros básicos incluyen nombre, largo, ancho, alto, color y otros parámetros. Después de importarlos a la plataforma thingjs, se pueden modificar directamente usando el código de front-end. Se usan comúnmente para ancho de línea, tamaño de punto y altura de edificio.

parámetros de configuración de citybuilder

Herramienta de construcción de escenas a nivel de ciudad

ThingJS modifica el código del parámetro

Más vista de demostración

// 先根据名称查询图层对象 名称是在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 usa url para desarrollar escenas terrestres y se combina con CityBuilder para hacerlo más fácil. ¡Tanto los diseñadores como los desarrolladores pueden cooperar mejor y completar el lanzamiento del proyecto 3D!

Sobre ThingJS

La plataforma ThingJS proporciona componentes de visualización 3D para Internet de las cosas, ¡lo que facilita 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. Creación de escenas: desarrollo de scripts 3D, acoplamiento de datos, implementación de proyectos, servicio integral para hacer el desarrollo más eficiente y convertirse en un innovador de tecnología de gemelos digitales con 200.000 desarrolladores. Actividad de flor de frijol mágico, bienvenido a hacer clic para ingresar al sitio web oficial >>