Esta é uma postagem de convidado de Calvin Allen. Calvin é um desenvolvedor .NET em Columbus, OH, que gosta de projetar software que não apenas resolva problemas comerciais, mas que também seja fácil de usar, dentro do orçamento e do prazo. Se ele não está projetando software, está aprendendo a ser um desenvolvedor de software melhor. Para ele, isso não é apenas uma carreira - é também um estilo de vida.
Acompanhe a postagem do Calvin em verificar o código-fonte e o GitHub e Baixando a última versão de visualização para desenvolvedores do Couchbase.
O que é GeoJSON? GeoJSON.org o define como:
"GeoJSON é um formato para codificar uma variedade de estruturas de dados geográficos"
Mas o que isso realmente significa? Basicamente, é um formato padrão, usando a estrutura JSON, para definir objetos geográficos. Esses "objetos geográficos" podem ser vários itens diferentes, desde um simples "Ponto" até um objeto mais complexo, como um "Polígono".
Aqui está um exemplo simples de um "ponto em um mapa" para as "Ilhas Dinagat":
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "tipo": "FeatureCollection" (Coleção de recursos), "recursos": [ { "tipo": "Recurso", "geometria": { "tipo": "Ponto", "coordenadas": [ 125.6, 10.1 ] }, "propriedades": { } } ] } |
Agora que você já conhece toda a história, pode estar se perguntando: "Por que eu preciso do GeoJSON?". A resposta simples é que ele é um padrão atualmente suportado em várias tecnologias de mapeamento, como o Google Maps. Com seus dados já no formato GeoJSON, você pode fornecer esses dados diretamente para o Google Maps e renderize seu objeto conforme descrito. Isso não apenas evita que você tenha que "desenvolver seu próprio" formato, mas outros provedores já estão oferecendo suporte a ele, o que pode ser aproveitado conforme desejado.
Vamos começar com o código!
Demonstrarei o formato GeoJSON usando um aplicativo .NET MVC, o Couchbase (Community) Server (e o SDK do .NET) e o Google Maps - vou ter que presumir que você tem algum conhecimento prático de todos esses utilitários.
Não entrarei em detalhes sobre como criar o projeto MVC ou instalar/configurar o Couchbase, pois há muitos outros tutoriais/artigos que descrevem como realizar esses itens, especialmente em Blog do Couchbase de Matthew Groves.
Uma coisa que vou mencionar agora é que chamei o bucket do Couchbase de "recursos" e o pré-carreguei (tudo por meio do Console do Couchbase) com dois documentos - um para um polígono em torno de Roma e outro com um ponto sobre as Ilhas Dinagat (como visto acima). Esses dois arquivos json podem ser encontrados no repositório do github, para o qual criarei um link mais adiante neste artigo.
Com o novo site MVC carregado no Visual Studio, abra o console do gerenciador de pacotes NuGet e digite o seguinte comando para carregar o SDK do Couchbase .NET:
|
1 |
Instalar-Pacote cliente de base de sofá |
Quando o SDK do Couchbase .NET terminar de ser instalado, execute o seguinte comando para instalar a biblioteca geojson:
|
1 |
Instalar-Pacote geojson.rede |
O primeiro pacote, "couchbasenetclient", será usado para se comunicar com nosso servidor Couchbase local para gerenciar nossos documentos GeoJSON. Essa é uma biblioteca criada e suportada pela equipe do Couchbase. A próxima, "geojson.net", é uma biblioteca auxiliar para criar/ler documentos GeoJSON. Nos bastidores, a biblioteca geojson.net utiliza o JSON.Net para serialização/deserialização de json dos tipos .NET que a biblioteca nos fornece. Sem dúvida, você poderia passar sem esse pacote/biblioteca e gerenciar os tipos por conta própria, mas, para simplificar, optei por utilizá-lo.
A primeira coisa que precisamos fazer é conectar nosso controlador. Vou reutilizar o "HomeController" que já existe no projeto.
Primeiro, adicionarei um construtor, que usaremos para armazenar nosso balde:
|
1 2 3 4 5 6 7 8 9 |
público classe HomeController : Controlador { privado somente leitura IBucket _bucket; público HomeController() { _bucket = Ajudante de cluster.GetBucket("recursos"); } } |
Agora, vou precisar de três pontos de extremidade -
- Um para obter uma lista de todos os recursos
- Um que funcionará como um simples roteamento para a página do mapa (você verá o que quero dizer)
- E, por fim, um para o qual a API do Google Maps fará uma chamada direta, a fim de obter o JSON para o recurso.
Aqui estão os três:
First (Primeiro) - é a ação que retorna a lista completa de recursos no meu bucket do Couchbase. Essa é apenas uma consulta N1QL simples para obter os IDs dos recursos como uma lista de cadeias de caracteres. (Eu só me importo com o ID do recurso na página da lista)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
público Resultado da ação Recursos() { var solicitação = Solicitação de consulta.Criar("SELECT META().id as `id` FROM `features` as f"); solicitação.Consistência de varredura(Consistência de varredura.RequestPlus); var featureIds = _bucket .Consulta<dinâmico>(solicitação) .Fileiras .Selecione(x => x.id.ToString()) .ToList(); retorno Ver(featureIds); } |
Esse é o método de roteamento simples que utilizo ao navegar na página da lista para manter o ID do recurso solicitado no qual o usuário clicou.
|
1 2 3 4 |
público Resultado da ação MapFeature(string id) { Bolsa de visualização.FeatureId = id; retorno Ver(); } |
E, finalmente, esse método é chamado por meio da API do Google Maps na página MapFeature para obter o JSON do recurso que o usuário deseja mapear (novamente, usando o objeto FeatureCollection da biblioteca geojson.net - isso usa o Json.Net para serializar esse objeto, que também vem com seus próprios serializadores na biblioteca).
|
1 2 3 4 5 6 |
público Resultado do conteúdo GetFeatureJson(string id) { var recurso = _bucket.Obter<Coleção de recursos>(id).Valor; var json = JsonConvert.SerializeObject(recurso); retorno Conteúdo(json, "application/json"); } |
Agora, vamos às páginas de visualização propriamente ditas (há apenas duas)
Na página "Features" (Recursos), que é apenas uma listagem dos recursos em nosso bucket do Couchbase, apenas geramos cada um dos IDs dos recursos em um link de ação dentro de uma lista não ordenada:
|
1 2 3 4 5 6 7 8 9 |
@modelo Lista<string> <h2>Recursos</h2> <ul> @antes de (var recurso em Modelo) { <li>@Html.ActionLink(recurso, "MapFeature", "Casa", novo { id = recurso }, nulo)</li> } </ul> |
A última página, MapFeature, é a que faz o "trabalho pesado":
|
1 2 3 4 5 6 |
<h2>Mapa Recurso</h2> @{ var id = Bolsa de visualização.FeatureId; } |
$(function () {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6
});
map.data.loadGeoJson('/Home/GetFeatureJson/@id');
//a chamada de retorno para cada um dos recursos no loop - o último vence
function forEachGeometry(feature) {
feature.getGeometry().forEachLatLng(resetCenter);
};
//pega a latitude e a longitude de cada geometria e redefine o ponto central no mapa - o último vence - totalmente ineficiente
função resetCenter(latLng) {
map.setCenter(latLng);
};
//sempre que um recurso for adicionado ao mapa, faça um loop sobre a coleção - completamente ineficiente, mas deve dar uma ideia
map.data.addListener('addfeature', function (e) {
map.data.forEach(forEachGeometry);
});
});
