nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Começando com Esri-Leaflet

ReneRubalcava

<\/HEAD>

<\/P>

Se você nunca usou Leaflet<\/A>, é uma biblioteca de mapeamento leve fantástica que cresceu em popularidade ao longo dos anos, principalmente devido à simplicidade da API. Ela possui muitos plugins e controles que podem ser usados com ela, incluindo o plugin Esri-Leaflet<\/A> que permite trabalhar com serviços ArcGIS Server e ArcGIS Online.<\/P>

<\/P>

Há muitas coisas ótimas nos

exemplos<\/A> para Esri-Leaflet sobre como começar a usá-lo, mas às vezes me perguntam como um desenvolvedor pode incorporá-lo em seu fluxo de trabalho de desenvolvimento<\/EM>. Exemplos são ótimos para se familiarizar com o projeto, mas conforme uma aplicação cresce, as coisas podem ficar um pouco complicadas. Eu só queria mostrar como você pode começar do zero com uma solução mais robusta.<\/P><\/P>

Obtenha os componentes<\/H2>Para esta demonstração, você vai precisar de node<\/A> e npm<\/A>. Não vamos nos preocupar com toda essa coisa do io.js. Depois de instalar node e npm, crie um diretório na sua máquina para seu projeto. Não precisa estar em um servidor local, nós cuidaremos disso com node<\/EM>. Com esse diretório criado, abra um terminal nele e execute o seguinte comando na sua ferramenta de linha de comando preferida: npm init<\/SPAN><\/P><\/P>Aceite os padrões para as perguntas que forem feitas. Quando isso for feito, você terá um arquivo package.json<\/STRONG> no seu diretório. Agora precisamos instalar alguns módulos para nos ajudar durante o desenvolvimento, incluindo Leaflet e Esri-Leaflet.<\/P>npm install watchify --save-dev<\/SPAN><\/P>npm install http-server --save-dev<\/SPAN><\/SPAN><\/P>npm install leaflet --save<\/SPAN><\/SPAN><\/P>npm install esri-leaflet --save<\/SPAN><\/SPAN><\/P><\/P>

Configuração básica<\/H2>Com os módulos que precisaremos instalados, vamos configurar alguns arquivos básicos.<\/P>Crie um arquivo index.html<\/STRONG> no seu diretório que ficará assim, nada sofisticado.<\/P><!DOCTYPE html>
<html>
    <head>
        <title>Iniciando Esri Leaflet<\/title>
        <link rel="stylesheet" href="http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css<\/A>" \/><\/SPAN>
        <link rel="stylesheet" href="css\main.css" \/>
        <meta http-equiv="content-type" content="text\html; charset=utf-8" \/>
        <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
    <\/head>
    <body>
        <script src="bundle.js"><\/script>
    <\/body>
<\/html><\/PRE>
<\/P>
Em seguida, crie um diretório css<\/STRONG> e vamos fazer um arquivo simples chamado main.css<\/STRONG> lá dentro.<\/P>html, body, .map-div {
width : 100%;
height : 100%;
margin : 0;
}<\/PRE><\/P>Depois crie um diretório src<\/STRONG> no seu projeto e dentro do diretório src<\/STRONG>, crie um arquivo index.js<\/STRONG> e um arquivo popup.js<\/STRONG>. Voltaremos a este arquivo em um segundo.<\/P><\/P>

Automatize isso<\/H2>Agora abra o arquivo package.json<\/STRONG> e vamos fazer algumas edições na seção scripts<\/EM>.<\/P>"scripts": {
"start": "http-server",
"watch": "watchify src\index.js src\popup.js -o bundle.js -dv",
"start-dev": "npm start | npm run watch"
}<\/PRE><\/P>Esta seção scripts permitirá que você execute comandos usando npm. Isso é muito útil para configurar ambientes rápidos de desenvolvimento. A seção start<\/STRONG><\/> irá executar um servidor local de desenvolvimento em localhost:8080<\/> . A seção watch<\/><\/> verificará alterações nos arquivos especificados e os compilará usando browserify em um arquivo único chamado bundle.js, que compilará todo o JavaScript necessário em um único arquivo.<\/> Nota - Se você não estiver no Windows, deve ser possível alterar a linha para watchify src/js em vez de listar cada arquivo, mas na minha máquina Windows precisei listar cada arquivo para assistir.<\/> <\/> Neste ponto, seu ambiente de desenvolvimento está totalmente configurado para automatizar a criação do bundle do seu JavaScript e executar um servidor local.<\/> Execute o seguinte comando e vamos continuar: npm run start-dev<\/> <\/> Escreva algum códigoAbra o arquivo src/popup.js e vamos escrever algum código.var L = require('leaflet');
var popupTemplate = '{NAME}{ACRES} Acres
ID da Propriedade: {PROPERTYID}';
module.exports = function(feature){
return L.Util.template(popupTemplate, feature.properties);
};<\/> Se isso parecer estranho para você, não se preocupe. Esta é a sintaxe commonjs para escrever JavaScript modular. Aqui está uma ótima introdução aos módulos commonjs no egghead.io. Se você está acostumado a usar AMD com Dojo na ArcGIS API for JavaScript isso pode te confundir um pouco, mas funciona muito bem. Em um módulo, tudo que você definir como module.exports é o que será exportado deste módulo. Neste caso, estamos exportando uma função que retorna um template popup para Leaflet.<\/> <\/> Agora abra src/index.js e vamos editar este arquivo.var L = require('leaflet'); // traz Leaflet
require('esri-leaflet'); // adiciona esri-leaflet
var popupTemplate = require('./popup.js'); // traz nosso popup que acabamos de definir
var node = L.DomUtil.create('div', 'map-div', document.body); // cria o nó para o mapa
var map = L.map(node).setView([45.528, -122.680], 13);
L.esri.basemapLayer('Gray').addTo(map);
var parks = new L.esri.FeatureLayer('http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0', {
style: function () {
return { color: '#70ca49', weight: 2 };
}
}).addTo(map);
parks.bindPopup(popupTemplate);<\/> Tudo isso é código padrão que você veria nos exemplos do Esri-Leaflet. A única diferença é que estamos usando require para adicionar módulos à aplicação. Nós até adicionamos o arquivo popup.js que criamos anteriormente. Note que require se comporta diferente aqui do que faz no Dojo.<\/> <\/> O que acabou de acontecer?Você pode não ter notado, mas enquanto editava seus arquivos JavaScript, deveria ter visto algumas mensagens no terminal sobre a criação do arquivo bundle.js. Isso porque os scripts npm que escrevemos anteriormente estão configurados para observar quaisquer mudanças nesses arquivos JavaScript e recompilá-los em um único arquivo bundle.js que sua aplicação precisa. Se você abrir seu navegador em localhost:8080 cruza os dedos* deverá ver algo parecido com isto.<\/> Parabéns! Você acabou de configurar um ambiente de desenvolvimento muito simples para construir suas aplicações Esri-Leaflet. Conforme adicionar mais módulos ou organizar seu código, basta editar o watch script em package.json conforme necessário e continue codificando.Aqui está a aplicação completa no github.Esta é uma configuração muito simples, mas honestamente você poderia fazer muito com os scripts npm como eles estão atualmente projetados. Se você quiser se aprofundar com ferramentas mais robustas, pode olhar para coisas como gulp, grunt ou webpack. Mergulhe de cabeça e aprenda a amar suas ferramentas de build.Para mais dicas e truques geodev, confira meu blog.

Encontre mais publicações marcadas com

GeoDev Adventures

Comentários

There are no comments yet

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.