<\/HEAD>
<\/P>
Als je nog nooit Leaflet<\/A> hebt gebruikt, is het een fantastische lichtgewicht mappingbibliotheek die in de loop der jaren populair is geworden, voornamelijk vanwege de eenvoud van de API. Het heeft talloze plugins en besturingselementen die ermee kunnen worden gebruikt, waaronder de Esri-Leaflet<\/A> plugin waarmee je kunt werken met ArcGIS Server en ArcGIS Online services.<\/P><\/P>
Er is veel geweldige informatie te vinden in de
voorbeelden<\/A> voor Esri-Leaflet over hoe je ermee aan de slag kunt gaan, maar soms word ik gevraagd hoe een ontwikkelaar het zou kunnen integreren in zijn ontwikkelworkflow<\/EM>. Voorbeelden zijn geweldig om vertrouwd te raken met het project, maar naarmate een applicatie groeit, kan het wat ingewikkelder worden. Ik wilde je gewoon laten zien hoe je vanaf nul kunt beginnen met een robuustere oplossing.<\/P><\/P>
Automatiseer het<\/H2>Open nu het package.json<\/STRONG>-bestand en laten we wat wijzigingen aanbrengen in het gedeelte 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>Dit scripts-gedeelte laat je commando's uitvoeren met npm. Dit is erg handig voor het snel opzetten van ontwikkelomgevingen. Het gedeelte start<\/_STRONG> zal een lokale ontwikkelserver draaien op localhost:8080<\/_EM>. Het gedeelte watch<\/_STRONG> controleert op wijzigingen in de opgegeven bestanden en zet ze om met behulp van browserify naar een bundle.js-bestand dat alle benodigde JavaScript compileert tot één bestand.<\/_p>
Aandacht -
Als je niet op Windows werkt, zou je de regel kunnen veranderen naar watchify src/*js, in plaats van elk bestand apart te vermelden, maar op mijn Windows-machine moest ik elk bestand apart vermelden om te kunnen kijken.
Tegen deze tijd is je ontwikkelomgeving helemaal ingesteld om het bundelen van JavaScript te automatiseren en om een lokale server te draaien.
Draai het volgende commando en laten we verder gaan: npm run start-dev
Schrijf wat code
Open het bestand src/popup.js en laten we wat code schrijven.
var L = require('leaflet');
var popupTemplate = '<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}</small>';
module.exports = function(feature){
return L.Util.template(popupTemplate, feature.properties);
};
Als dit vreemd voor je lijkt, maak je geen zorgen. Dit is de syntax van commonjs voor het schrijven van modulaire JavaScript. Hier is een geweldige introductie tot commonjs modules op egghead.io. Als je gewend bent AMD te gebruiken met Dojo in de ArcGIS API for JavaScript kan dit even wennen zijn, maar het werkt heel goed. In een module wordt alles wat je definieert als module.exports geëxporteerd uit deze module. In dit geval exporteren we een functie die een popup-template retourneert voor Leaflet.
Open nu het bestand src/index.js en laten we dit bestand bewerken.
var L = require('leaflet'); // importeer Leaflet
require('esri-leaflet'); // voeg esri-leaflet toe
var popupTemplate = require('./popup.js'); // importeer onze zojuist gedefinieerde popup
var node = L.DomUtil.create('div', 'map-div', document.body); // maak de node voor de kaart
var map = L.map(node).setView([45.528, -122.680], 13);
L.esri.basemapLayer('Gray').addTo(map);
var parks = new L.esri.FeatureLayer('watch script in package.json indien nodig en blijf coderen.<\/P><\/P>
Hier is de volledige applicatie op github<\/A>.<\/P><\/P>
Dit is een zeer eenvoudige opzet, maar eerlijk gezegd kun je
veel doen<\/A> met de npm scripts<\/A> zoals ze momenteel zijn ontworpen. Als je dieper wilt duiken met robuustere tools, kun je kijken naar dingen zoals gulp<\/A>, grunt<\/A> of webpack<\/A>. Ga er helemaal in op en leer van je build tools te houden.<\/P><\/P>
Voor meer geodev tips en trucs, bekijk
mijn blog<\/A>.<\/P><\/BODY><\/HTML>
