Exemplo oficial ThingJS (11): desenvolver linha OD com base no vetor de dados e url de textura

# Frontend # # Visualização tridimensional # #OD 线 发展 #

1. Criação de camada básica
2. Criação de linha OD (vetor e textura)
3. Encaixe de grande volume de dados
   

Introdução: As gêmeas digitais têm se expandido gradualmente do campo da manufatura para os espaços urbanos. As cidades gêmeas digitais são muito mais complicadas do que a manufatura industrial e correspondem às cidades físicas. Não é 100% realista, mas sim construir um modelo unificado de informação urbana, permitindo que cidades digitais e cidades reais “combinem a realidade”! O modelo dinâmico de cidade 3D contém elementos geográficos, como pontos, linhas e áreas, que são combinados em um mapa digital de informações, o que ajuda a melhorar o nível digital de planejamento urbano, construção, transporte, energia e outros campos.

Link de demonstração:http://www.thingjs.com/guide/?m=sample

A linha OD (Linha Origem-Destino) refere-se à conexão entre o ponto inicial e o ponto final, e é usada para indicar uma certa relação entre dois pontos, como rotas de voo, migração de população, fluxo de tráfego, trocas econômicas, etc. A partir desta semana, a China entrou lentamente no pico da temporada de viagens do Festival da Primavera, o que pode ser chamado de um evento explosivo de migração da população. O mapa de migração de viagens do Festival da Primavera geralmente usa a linha OD para indicar:

No local de origem, a linha OD converge para uma direção, como a cidade de Haikou, como destino da migração.

Saindo do destino, a linha OD se espalha em diferentes direções, mas o ponto de partida é o mesmo local, como a população saindo de Harbin.

GeoLine é um elemento de linha com uma localização geográfica. Você pode adicionar campos de atributo para armazenar outras informações. Ele pode ser dividido em três tipos de linha diferentes. A diferença nas linhas OD é que elas limitam os pontos inicial e final, que podem ser formados no GIS. O desenho de linhas OD tridimensionais requer Quais são os cuidados? Qual é a diferença entre criar uma linha OD e outras linhas?

Veja a demonstração da experiência de desenvolvimento de linha OD:http://www.thingjs.com/guide/?m=sample

1. Criação de camada básica

Depois que o componente de terra é carregado dinamicamente, diferentes sobreposições de camada são obtidas e um desenvolvimento secundário mais flexível é executado na camada de serviço ThingLayer. Crie uma camada ThingLayer e adicione ThingLayer à imagem inferior para obter a posição de coordenada startPos do ponto inicial para mostrar o efeito de difusão para fora do ponto e da superfície.
var startPos = [116.39139175415039, 39.906082185995366];

2. Criação de linha OD

O renderizador ThingJS oferece dois tipos de renderização, renderização vetorial e renderização de imagem. Para obter a linha OD, primeiro consulte o caminho de migração da camada ThingJS, como Beijing-Jinan, e então modifique o estilo desse caminho.

(1) Renderização de estilo vetorial

O renderizador define a cor da linha do vetor Vector. O exemplo mostra como usar o array rgb [255,0,0]. Você também pode usar a string rgb "rgb (255,0,0)", string hexadecimal "# ff0000 ".
A velocidade do efeito de fluxo é 0 por padrão, que é um efeito estático; o valor pode ser positivo ou negativo, representando direções de fluxo positivas e negativas. O estilo de textura também é aplicável.

renderer: {
    lineType: 'Line',
    type: 'vector', // 代表纯色渲染
    color: [255, 0, 0],
    // opacity:0.2 ,// 设置不透明度 默认是1
    // speed: 1 ,// 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
    // effect: true // 线发光效果 默认为 false 不开启
}
});

(2) Renderização de estilo de imagem

Obtenha o url para gerar a linha OD do tipo de textura. A cor e outros estilos são possuídos pela própria textura. A largura da linha pode ser expandida modificando o número de sobreposição dos canais de textura numPass. De modo geral, quanto maior o valor, mais brilhante a linha.
Use a função de efeito para ativar o efeito especial de iluminação de linha, que desempenha um papel importante no mapa.

renderer: {
    lineType: 'Line',
    type: 'image', // 代表贴图渲染
    imageUrl: '/guide/image/uGeo/path.png',
    numPass: 3,
    speed: 0.5, // 流动效果速度， 默认是0 不流动；speed 可正可负，正负代表流动方向
    // effect: true // 线发光效果 默认为 false 不开启
}

3. Encaixe de grande volume de dados

É importante notar que a linha OD com grande volume de dados geralmente requer renderização do lado do navegador pelo menos centenas de milhares ou mais de um milhão. Não importa a transmissão de dados ou renderização de dados, é necessária uma maneira mais eficiente - a plataforma ThingJS fornece geração dinâmica de big data Interface, usando WebSocket (milhões de magnitude), interface de dados MQTT (máquina única dezenas de milhões) para alcançar comunicação duplex suave e fácil desenvolvimento online com o SDK de front-end!

Sobre ThingJS

ThingJS fornece componentes de visualização 3D da Internet das Coisas para tornar o desenvolvimento 3D mais fácil! O script 3D de chamada Javascript direta, com base 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. O serviço completo de uso de construção de cenário - desenvolvimento de script 3D - implantação de projeto de encaixe de dados torna o desenvolvimento mais eficiente e se torna um inovador de tecnologia digital dupla com 200.000 desenvolvedores!