ArcGIS Location Platform é nossa oferta para Developer integrar serviços de localização poderosos como exibição de mapas, roteamento, geocodificação e busca de Places diretamente em aplicações web inovadoras. Neste artigo, damos uma olhada detalhada no repositório oficial GitHub-Demo-Repository da Esri Inc. e explicamos como as funções individuais são implementadas tecnicamente e funcionam bem juntas.
A aplicação é baseada em HTML e JavaScript e utiliza nosso ArcGIS Maps SDK for JavaScript. O arquivo central main.js contém toda a lógica para inicialização do mapa, integração de dados e interação com os Location Services.
Ao iniciar a aplicação, um mapa com uma Basemap selecionável é carregado. Isso acontece através da inicialização de um objeto Map com o tipo de mapa desejado. No exemplo de código a seguir, uma Basemap otimizada para navegação é usada:
const map = new Map({
basemap: "arcgis/navigation"
});
Em seguida, é criado um MapView que renderiza o mapa em um contêiner HTML. A posição inicial é definida para Palm Springs:
const view = new MapView({
container: "viewDiv",
map: map,
center: [-116.5453, 33.8303],
zoom: 13
});
Um recurso central da demo é o carregamento de Points of Interest (POIs) a partir de um arquivo CSV. Este arquivo é previamente carregado em um Feature-Service. O código a seguir mostra como este serviço é incorporado como FeatureLayer :
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/026/FeatureServer/0",
popupTemplate: {
title: "{Name}",
content: "{Description}"
},
renderer: {
type: "unique-value",
field: "Type",
uniqueValueInfos: [...]
}
});
map.add(featureLayer);
A propriedade popupTemplate define quais informações são exibidas ao clicar em um objeto. O renderer garante que diferentes tipos de POIs sejam exibidos de forma distinta.
Para o cálculo da rota, é usado um RouteTask, ao qual são passados os pontos inicial e final. Após o cálculo bem-sucedido, a rota é exibida como um Graphic no mapa:
route.solve(routeParams).then(function(data) {
const routeResult = data.routeResults[0].route;
routeLayer.add(new Graphic({
geometry: routeResult.geometry,
symbol: routeSymbol
}));
});
Os routeParams contêm, entre outras coisas, as geometrias dos pontos inicial e final, bem como configurações opcionais como informações de tráfego.
A aplicação também permite mostrar ou ocultar dados de tráfego do nosso ArcGIS Living Atlas of the World. Isso é feito por meio de um simples interruptor de visibilidade:
trafficLayer.visible = !trafficLayer.visible;
ArcGIS Location Platform permite consultar a elevação em um ponto específico. Para isso, usamos nosso Elevation-Service, que retorna a coordenada Z (elevação) para um ponto dado:
elevationLayer.queryElevation(point).then(function(result) {
console.log("Elevation:", result.geometry.z);
});
É importante notar que essa função só funciona com certas Basemaps que contêm informações de elevação.
Finalmente, a aplicação também oferece acesso ao nosso Places-Service, que permite buscar locais próximos de categorias específicas. No exemplo abaixo, locais como cafés ou museus próximos ao centro do mapa são consultados:
placesService.searchNearby({
location: view.center,
categories: ["Coffee shop", "Museum"],
maxResults: 10
}).then(showResults);
Ao trabalhar com ArcGIS Location Platform, Developers devem estar atentos a alguns casos especiais. Por exemplo, uma API-Key válida deve ser criada no secret.js para usar os Location Services correspondentes. Além disso, pode haver problemas ao usar arquivos CSV próprios se eles não estiverem codificados em UTF-8 ou contiverem caracteres especiais. Os dados de tráfego também funcionam apenas com certas Basemaps, o que deve ser considerado na configuração.
ArcGIS Location Platform oferece uma impressionante variedade de funções que podem ser integradas em aplicações web modernas com poucas linhas de código. Seja roteamento, busca de Places ou exibição de dados de tráfego – é uma ferramenta poderosa para todos que querem valorizar informações geográficas.
Se você deseja desenvolver uma aplicação com nossos Location Services, recomendamos fazer fork do repositório oficial Demo-Repository e experimentar com seus próprios casos de uso. A documentação é clara e os exemplos são fáceis de adaptar.
Dê uma olhada em nosso Developer Hub.