Exemplo oficial ThingJS (9): Desenvolva um script de mapa 3D por meio da URL transferida do CityBuilder

#Front Development ## Visualização 3D ## IoT #

1. Identifique a localização da cena virtual
2. Desenvolvimento secundário de exportação Citybuilder
3. Configuração e modificação de parâmetros básicos
   

CityBuilder ( ferramenta de construção de cenários em nível de cidade ) é simples de usar e se adapta aos hábitos de uso do designer. Então, como entregar o cenário de cidade trabalhado para desenvolvimento e usá-lo de maneira flexível em links subsequentes?

A plataforma ThingJS considerou este problema por muito tempo, unificou os dados da plataforma e suporta CityBuilder para transferência de URLs; depois que a plataforma carrega o componente do mapa, ele pode ser facilmente desenvolvido novamente. Vamos analisar as etapas abaixo. Se você tiver alguma dúvida, deixe uma mensagem.

Identifique a localização da cena virtual

A terra tridimensional é baseada no sistema de coordenadas mundial, e as cenas no nível da cidade ou no nível do parque selecionam os locais reais para o carregamento. Os desenvolvedores devem modificar as coordenadas de três pontos de app.background para fornecer um posicionamento preciso do mapa.

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

Desenvolvimento secundário de exportação Citybuilder

Depois que o script do componente do mapa é carregado dinamicamente, o mapa pode ser criado por meio do url transferido do Citybuilder para desenvolvimento secundário, incluindo a adição de camadas de negócios e a modificação dos parâmetros do objeto em segundo plano. A descrição do exemplo é simples e fácil de entender, permitindo que os desenvolvedores entendam mais claramente o valor da função. Veja mais demos e entre no site oficial para se registrar !

Observe que é mais conveniente usar com a ferramenta de mapa CityBuilder. Os designers podem usar componentes de visualização para definir estilos de camada, suportar a importação de cenas arquitetônicas 3D e, em seguida, gerar urls de projeto e importar ThingJS ( plataforma PaaS de visualização 3D da Internet das Coisas - plataforma de visualização dupla digital ), conforme mostrado abaixo Mostrando.

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

Configuração e modificação de parâmetros básicos

Os objetos de camada em uma cena 3D geralmente são configurados antecipadamente no citybuilder. Os parâmetros básicos incluem nome, comprimento, largura, altura, cor e outros parâmetros. Depois de importar para a plataforma thingjs, eles podem ser modificados diretamente usando o código de front-end. Eles são comumente usados ​​para largura de linha, tamanho de ponto e altura de construção.

parâmetros de configuração do citybuilder

Ferramenta de construção de cenários em nível de cidade

Código do parâmetro de modificação ThingJS

Mais visualização de demonstração

// 先根据名称查询图层对象 名称是在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 desenvolver cenas terrestres e combina com CityBuilder para torná-lo mais fácil. Os designers e desenvolvedores podem cooperar melhor para concluir o lançamento do projeto 3D!

Sobre ThingJS

A plataforma ThingJS fornece componentes de visualização 3D para a Internet das Coisas, tornando o desenvolvimento 3D mais fácil! O script 3D de chamada direta de Javascript, baseado em 200 exemplos de código-fonte de desenvolvimento 3D, permite que você entenda completamente a lógica de desenvolvimento visual da Internet das Coisas. Criação de cena - desenvolvimento de script em 3D - implantação de projeto de encaixe de dados - serviço único para tornar o desenvolvimento mais eficiente e se tornar um inovador de tecnologia dupla digital com 200.000 desenvolvedores! Atividade de flor de feijão mágico, bem-vindo ao clicar para entrar no site oficial >>