<\/HEAD>
<\/P>
Pokud jste nikdy nepoužili Leaflet<\/A>, je to fantastická lehká knihovna pro mapování, která v průběhu let získala na popularitě, hlavně díky jednoduchosti API. Má spoustu pluginů a ovládacích prvků, které lze s ní používat, včetně pluginu Esri-Leaflet<\/A>, který vám umožňuje pracovat se službami ArcGIS Server a ArcGIS Online.<\/P><\/P>
V
příkladech<\/A> pro Esri-Leaflet je spousta skvělých věcí, jak začít, ale někdy se mě ptají jak by vývojář mohl začlenit tuto knihovnu do svého vývojového workflow<\/EM>. Příklady jsou skvělé pro seznámení s projektem, ale jak aplikace roste, věci mohou být trochu komplikované. Chtěl jsem vám jen ukázat, jak můžete začít od nuly s robustnějším řešením.<\/P><\/P>
Automatizujte to<\/H2>Nyní otevřete soubor package.json<\/STRONG> a upravme sekci 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>Tato sekce scripts vám umožní spouštět příkazy pomocí npm. Je to velmi užitečné pro rychlé nastavení vývojového prostředí. Sekce start<\/_STRONG> spustí lokální vývojový server na adrese localhost:8080<\/_EM>. Sekce watch<\/_STRONG> bude sledovat změny ve specifikovaných souborech a pomocí browserify je sloučí do jednoho souboru bundle.js, který zkompiluje veškerý potřebný JavaScript do jednoho souboru.<\/_p>
Poznámka -
Pokud nejste na Windows, měli byste být schopni změnit řádek na watchify src/*js místo vyjmenování každého souboru, ale na mém Windows stroji jsem musel vyjmenovat každý sledovaný soubor.
Tímto je vaše vývojové prostředí připraveno automatizovat balení vašeho JavaScriptu a spustit lokální server.
Spusťte následující příkaz a pokračujme dál: npm run start-dev
Napište nějaký kód
Otevřete soubor src/popup.js a napišme nějaký kód.
var L = require('leaflet');
var popupTemplate = '<h3>{NAME}</h3>{ACRES} Akry<br><small>ID nemovitosti: {PROPERTYID}</small>';
module.exports = function(feature){
return L.Util.template(popupTemplate, feature.properties);
};
Když vám to přijde divné, nebojte se. Toto je syntaxe commonjs pro psaní modulárního JavaScriptu. Zde je skvělý úvod do commonjs modulů na egghead.io. Pokud jste zvyklí používat AMD s Dojo v ArcGIS API for JavaScript, může vás to trochu zmást, ale funguje to docela dobře. V modulu je to, co definujete jako module.exports, to se exportuje z tohoto modulu. V tomto případě exportujeme funkci, která vrací šablonu popupu pro Leaflet.
Nyní otevřete soubor src/index.js a upravme ho.
var L = require('leaflet'); // přidej Leaflet
require('esri-leaflet'); // přidej esri-leaflet
var popupTemplate = require('./popup.js'); // přidej náš popup který jsme právě definovali
var node = L.DomUtil.create('div', 'map-div', document.body); // vytvoř element pro mapu
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);
Toto vše je standardní kód, který byste viděli v Esri-Leaflet příkladech. Jediný rozdíl je ten, že používáme require, abychom přidali moduly do aplikace. Dokonce jsme přidali dříve vytvořený soubor popup.js. Všimněte si, že require zde funguje jinak než v Dojo.
Co se právě stalo?
Mohli jste si nevšimnout, ale zatímco jste upravovali své JavaScriptové soubory, měli byste vidět zprávy ve vašem terminálu o vytváření souboru bundle.js. To proto, že npm skripty které jsme napsali dříve jsou nastaveny tak, aby sledovaly jakékoliv změny těchto JavaScriptových souborů a znovu je kompilovaly do jediného souboru bundle.js, který vaše aplikace potřebuje. Pokud otevřete svůj prohlížeč na adrese localhost:8080 *držím palce*, měli byste vidět něco takového.
Blaženě gratuluji! Právě jste nastavili velmi jednoduché vývojové prostředí pro tvorbu vašich Esri-Leaflet aplikací. Jak budete přidávat další moduly nebo organizovat svůj kód, stačí upravit watch skript v package.json podle potřeby a pokračujte v kódování.<\/P>
<\/P>
Zde je celá aplikace na githubu<\/A>.<\/P><\/P>
Toto je velmi jednoduché nastavení, ale upřímně byste mohli
udělat hodně<\/A> s npm skripty<\/A>, jak jsou aktuálně navrženy. Pokud byste chtěli proniknout do robustnějších nástrojů, můžete se podívat na věci jako gulp<\/A>, grunt<\/A> nebo webpack<\/A>. Ponořte se do toho a naučte se milovat své build nástroje.<\/P><\/P>
Pro více tipů a triků z geodev navštivte
můj blog<\/A>.<\/P><\/BODY><\/HTML>
