Mappa in 5 passi
Piccolo esempio di codice HTML che utilizza le API Javascript di ESRI
Ricordiamo in sintesi gli step che devono sempre essere presenti per una WebGIS Application con le API ESRI per Javascript:
1. Referenziare le API Javascript di ESRI ed i file css.
2. Nel tag body Aggiungere un riferimento al foglio di stile;
3. Creare un Container per la mappa;
4. Usare dojo.require per importare le risorse
5. Creare uno script di inizializzazione per i parametri di setup e quindi chiamare la funzione dojo.addOnLoad().
I 5 step sono sintetizzate nelle seguenti righe di codice:
———————————————————————————————————————————————
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=7,IE=9” />
<title>Mappa Topografica</title>
<!— Reference ai Style Sheet —>
<link rel=”stylesheet” type=”text/css” href=”http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css“>
<!— Reference alle API Javascript —>
<script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6“></script>
<script type=”text/javascript”>
dojo.require(“esri.map”); /*riga per importare le risorse per l’applicazione*/
function init(){
/* funzione di inizializzazione eseguita dopo che tutti gli elementi della pagina sono stati caricati
Si usa l’ID che è stato assegnato al tag <div>per piazzare la mappa nel container <div>, naturalmente
dopo aver creato la mappa con la linea map = new esri.Map (“map”) */
map = new esri.Map (“map”);
var imageParameters = new esri.layers.ImageParameters();
imageParameters.format = “jpeg”;
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(“http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer”, {“opacity”:0.5, “imageParameters”:imageParameters});
map.addLayer(dynamicMapServiceLayer);
}
dojo.addOnLoad (init);
</script>
</head>
<body class=”claro”> <!— riferimento al tema css di Dojo —>
<!— div è il contenitore della mappa e deve avere un proprio ID per essere richiamabile da funzioni javascript —>
<div id=”map” style=”width:1024px; height:512px; border:1px solid #000;”></div>
</body>
</html>
———————————————————————————————————————————————
Per sapere come ogni tema modifica l’aspetto è disponibile un theme tester messo a
disposizione da Dojo.org:http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
Ma quali sono le risorse usate normalmente:
esri.map Mappa, geometria, graphics, e symboli
esri.layers.agsdynamic ArcGISDynamicMapServiceLayer
esri.layers.agstiled ArcGISTiledMapServiceLayer
esri.tasks.find Task di ricerca
esri.tasks.geometry Task per la geometria
esri.tasks.gp Task per il Geoprocessing
esri.tasks.identify Task per l’Identify
esri.tasks.locator Task per il localizzaotore
esri.tasks.query Task per le Query
esri.toolbars.draw Disegnare
esri.toolbars.navigation Navigazione
Prima di finire una nota sul Costruttore per la classe Mappa è:
esri.Map(divID,option?)
dove divID è una referenziazione al container per la mappa (di solito <div>) e options
specifica uno o + parametri opzionali come l’extent iniziale.
Esempio:
var map = new esri.Map (“map”, (extent : new esri.geometry.Extent (8,44,9.46));
