ArcGIS Maps SDK for JavaScript: Guia de Edição 3D

O ArcGIS, desenvolvido pela Esri, é uma plataforma líder no mercado de sistemas de informação geográfica (GIS), amplamente utilizada para criar, visualizar e analisar dados geoespaciais em mapas interativos. Seja em 2D ou 3D, o ArcGIS permite aplicações que vão desde visualizações simples até análises sofisticadas, especialmente com o ArcGIS Maps SDK for JavaScript, uma biblioteca poderosa para desenvolvedores web. Recentemente, dois artigos da Esri chamaram a atenção da comunidade técnica: um sobre as camadas de objetos 3D e outro detalhando as novidades da versão 4.32 do SDK. Este post mergulha nesses tópicos, trazendo insights e exemplos práticos para quem quer tirar o máximo proveito dessas atualizações.

Camadas de Objetos 3D: Edição Avançada no Navegador

As camadas de objetos 3D (3D Object Layers) representam um marco na evolução do ArcGIS Maps SDK for JavaScript. Diferentemente das camadas de cena tradicionais, focadas em visualização, essas novas camadas permitem edição direta de geometrias 3D no navegador. Desde a versão 4.30, quando saiu da fase beta, o recurso suporta manipulação de Mesh geometry, possibilitando ajustes detalhados em modelos como edifícios ou estruturas complexas. Isso é especialmente útil em cenários como planejamento urbano ou simulações arquitetônicas.

Um destaque é a integração com o Editor widget. Veja um exemplo básico de como iniciar uma edição em uma camada 3D:

require([
  "esri/widgets/Editor",
  "esri/layers/SceneLayer"
], (Editor, SceneLayer) => {
  const layer = new SceneLayer({
    url: "https://seuservidor/arcgis/rest/services/Edificios3D/SceneServer",
    editingEnabled: true
  });

  const editor = new Editor({
    view: mapView,
    layerInfos: [{
      layer: layer,
      formTemplate: { // Define atributos editáveis
        elements: [{ type: "field", fieldName: "altura", label: "Altura" }]
      }
    }]
  });
  mapView.ui.add(editor, "top-right");
});

Para um hack avançado, considere exportar um modelo editado para glTF. Após manipular a geometria com o SDK, é possível usar a API para extrair os dados do mesh e convertê-los:

async function exportToGLTF(graphic) {
  const mesh = graphic.geometry; // Assume Mesh geometry
  const gltfData = await mesh.toGLTF(); // Hypothetical method, requires custom parsing
  downloadGLTF(gltfData, "modelo_editado.gltf");
}

function downloadGLTF(data, filename) {
  const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.click();
}

mbora o SDK não forneça um toGLTF() nativo, desenvolvedores podem parsear os dados de vértices e faces do mesh manualmente, aproveitando bibliotecas como Three.js para a conversão. Isso abre portas para workflows híbridos entre ArcGIS e ferramentas de modelagem 3D.

Versão 4.32: Filtros, Destaques e Rotas Otimizadas

A versão 4.32 do ArcGIS Maps SDK for JavaScript trouxe melhorias significativas, detalhadas no artigo da Esri. Um dos recursos mais notáveis é o display filters, que permite filtrar dados em camadas sem recarregar o mapa. Ideal para datasets grandes, ele pode ser configurado no ArcGIS Pro ou diretamente no código. Aqui está um exemplo simples:

require(["esri/layers/FeatureLayer"], (FeatureLayer) => {
  const layer = new FeatureLayer({
    url: "https://seuservidor/arcgis/rest/services/Populacao/FeatureServer/0"
  });
  layer.definitionExpression = "populacao > 100000"; // Filtro básico
  layer.displayFilters = [{
    expression: "renda_media > 5000",
    active: true
  }];
  map.add(layer);
});

Para um hack mais avançado, combine filtros dinâmicos com interações do usuário. Este trecho atualiza o filtro baseado em um slider:

const layer = new FeatureLayer({ url: "..." });
const slider = document.getElementById("pop-slider");
slider.addEventListener("input", (e) => {
  layer.displayFilters[0].expression = `populacao > ${e.target.value}`;
  layer.refresh();
});

Outro recurso interessante da 4.32 é o suporte a múltiplos destaques visuais (highlights) em uma camada. Veja como aplicar destaques distintos:

view.whenLayerView(layer).then((layerView) => {
  const query = layer.createQuery();
  query.where = "estado = 'SP'";
  layer.queryFeatures(query).then((result) => {
    layerView.highlight(result.features, { color: [0, 255, 0, 0.5] }); // Verde
    view.on("pointer-move", (event) => {
      view.hitTest(event).then((response) => {
        if (response.results[0]) {
          layerView.highlight(response.results[0].graphic, { color: [255, 255, 0, 0.8] }); // Amarelo
        }
      });
    });
  });
});

Por fim, o componente de rotas (Directions) agora suporta edição interativa. Um hack útil é personalizar o cálculo de rotas com restrições dinâmicas:

require(["esri/widgets/Directions"], (Directions) => {
  const directions = new Directions({
    view: mapView,
    routeServiceUrl: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
  });
  directions.viewModel.routeParameters.restrictionAttributes = ["Height Restriction"];
  directions.viewModel.routeParameters.restrictions = "Height Restriction < 4"; // Máximo 4 metros
  mapView.ui.add(directions, "top-right");
});

Considerações Finais

O ArcGIS Maps SDK for JavaScript continua a se consolidar como uma ferramenta essencial para desenvolvedores geoespaciais. As camadas de objetos 3D oferecem possibilidades avançadas de edição e integração, enquanto a versão 4.32 refina a experiência com filtros eficientes, destaques visuais e rotas interativas. Os exemplos e hacks apresentados aqui são apenas o começo — a documentação oficial da Esri e os release notes oferecem ainda mais detalhes para explorar.

Quem trabalha com GIS ou desenvolvimento web tem nas mãos uma biblioteca que não para de evoluir. Já experimentou esses recursos em projetos reais? Os comentários estão abertos para trocar ideias!