VYUŽITÍ ARCGIS API FOR JAVASCRIPT PRO PUBLIKACI MAPOVÝCH SLUŽEB ÚRM Mgr. Pavel Ečer Útvar rozvoje hl. m. Prahy ecer@urm.praha.eu
Představení JSAPI Jednoduchý způsob pro implementaci mapových služeb a geoprocessingových nástrojů do webových aplikací Podpora hlavních moderních browserů (IE 7-9, Chrome, Firefox, Safari 3+) Mapové aplikace také pro mobilní zařízení Podpora HTML5 a CSS3 Pro vývoj postačí jakýkoliv webový server Oficiální web: http://help.arcgis.com/en/webapi/javascript/arcgis/
Prvotní aplikace Import API a stylů: <link rel="stylesheet" ref="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css"> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script> Skript pro základní zobrazení mapy: <script> dojo.require("esri.map"); var map, spatialRef, orto, zaklMapa; var lods = [{"level":0,"resolution":198.437896875794,"scale":750000},{"level":1,"resolution":132.291931250529,"scale":500000},{"level":2,"resolution":92.6043518753704,"scale":350000},{"level":3,"resolution":52.9167725002117,"scale":200000},{"level":4,"resolution":26.4583862501058,"scale":100000},{"level":5,"resolution":19.8437896875794,"scale":75000},{"level":6,"resolution":13.2291931250529,"scale":50000},{"level":7,"resolution":6.61459656252646,"scale":25000},{"level":8,"resolution":5.29167725002117,"scale":20000},{"level":9,"resolution":3.96875793751588,"scale":15000},{"level":10,"resolution":2.64583862501058,"scale":10000},{"level":11,"resolution":1.98437896875794,"scale":7500},{"level":12,"resolution":1.32291931250529,"scale":5000},{"level":13,"resolution":0.926043518753704,"scale":3500},{"level":14,"resolution":0.529167725002117,"scale":2000},{"level":15,"resolution":0.396875793751588,"scale":1500},{"level":16,"resolution":0.264583862501058,"scale":1000},{"level":17,"resolution":0.198437896875794,"scale":750},{"level":18,"resolution":0.132291931250529,"scale":500}]; spatialRef = new esri.SpatialReference({wkid:102067}); map = new esri.Map("map", {extent: new esri.geometry.Extent({xmin:-772968.925913318,ymin:-1058655.20203325,xmax:-707031.098428387,ymax:-1033344.78950008,spatialReference:spatialRef}),fitExtent:true, lods:lods, logo: false, fitExtent: false, sliderStyle: "large",zoom:3}); orto = new esri.layers.ArcGISTiledMapServiceLayer( "http://mpp.praha.eu/ArcGIS/rest/services/MAP/letecke_snimky_posledni_snimkovani_cache/MapServer", {id:"orto",visible:true}); zaklMapa = new esri.layers.ArcGISDynamicMapServiceLayer(http://mpp.praha.eu/ArcGIS/rest/services/MAP/Zakladni_mapa/MapServer, {id:"zakladniMapa","showAttribution":false}); zakladniMapa.setVisibleLayers([1,12]); zakladniMapa.setVisibility(true); map.addLayers([orto,zakladniMapa]); </script> Inicializace knihovny a definice proměnných Definice zobrazovaných měřítek a systému souřadnic Inicializace mapy Definice cacheované a dynamické mapové služby Přidání vrstev do mapy HTML kód <body class=“claro"> <div id="map" style="width:900px; height:600px"></div> </body>
Nástroje pro vyhledávání a funkci „íčka“ Task Query <table class='vyhledavani'> <tr><td>Katastr</td><td>Parcela</td></tr> <tr><td><select id="katastr"><script type="text/javascript" src="katastry.js"></script></select></td> <td><input type="text" id="parcela" size="5" value="" "></td> <td><input type="button" value="Hledat" onclick="hledejParcelu();"></td> </tr></table> var searchParcela = new esri.tasks.QueryTask("http://mpp.praha.eu/ArcGIS/rest/services/APP_Vyhledavani/vyhledavani/MapServer/1"); var query = new esri.tasks.Query(); function hledejParcelu () { query.returnGeometry = true; query.outFields = ['OBJECTID','PARCELA','KATUZE_KOD']; var katastr = dojo.byId("katastr").value; var cis_parc = dojo.byId("parcela").value; query.where = "KATUZE_KOD = " + katastr + "and (PARCELA = '" + cis_parc + "' or PARCELA like '" + cis_parc + "/%')"; searchParcela.execute(query, vysledkyParcela1); } Spuštění hledání z HTML stránky Definice tasku vyhledávání Nastavení parametrů a spuštění dotazu Task Identify - http://wgp.urm.cz/limity/ dojo.connect(map, "onClick", doIdentify); identifyLimity = new esri.tasks.IdentifyTask("http://mpp.praha.eu/ArcGIS/rest/services/UAP/UAP_Limity/MapServer"); limityParams = new esri.tasks.IdentifyParameters(); limityParams.tolerance = 1; limityParams.returnGeometry = true; limityParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL; function doIdentify(evt) { limityParams.layerIds = [0,1,2]; limityTask.execute(limityParams, function(idResults) { addToMap(idResults, evt); }); } function addToMap(idResults, evt) { //funkce, ktera zobrazi infowindow s odpovidajicim obsahem if(idResults.length > 0) { for (var i=0, il=idResults.length; i<il; i++) { var idResult = idResults[i]; var graphic = idResult.feature; content0 += "<div class='ickovysledek'>"; content0 += "<div class = 'vystup_text_n'><span class='vystup_span'>" + limity.layerInfos[typ[j]].name + "</span><\/div>"; dojo.byId('vysledkyBlok').innerHTML = content0; Nastavení funkce, která se má spustit po kliknutí do mapy Nastavení parametrů tasku Identify Spuštění tasku a zpracování výsledků dotazu
Vložení vlastních grafických objektů var vlastniGrafika = new esri.layers.GraphicsLayer(); var myPolygon = {"geometry":{"rings":[[[-737265.91010000 -1035457.93990000], [-737266.06010000 -1035459.47980000], [-737259.18990000 -1035460.27980000], [-737265.91010000 -1035457.93990000]]],"spatialReference":{"wkid":102067}}, "symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255], "width":1,"type":"esriSLS","style":"esriSLSSolid"}, "type":"esriSFS","style":"esriSFSSolid"}}; var graPolygon = new esri.Graphic(myPolygon); var myLine ={geometry:{"paths":[[[-737265.91010000 -1035457.93990000], [-737266.06010000 -1035459.47980000]]], "spatialReference":{"wkid":102067}}, "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}}; var graPolyline= new esri.Graphic(myLine); var myPoint = {"geometry":{"x": -737265.91010000,"y": -1035457.93990000, "spatialReference":{"wkid":102067}},"attributes":{“Nazev":“Nazev mista"},"symbol":{"color":[255,0,0,128], "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS", "style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1, "type":"esriSLS","style":"esriSLSSolid"}}}; var graPoint= new esri.Graphic(myPoint); vlastniGrafika.add(graPolygon); vlastniGrafika.add(graPolyline); vlastniGrafika.add(graPoint); map.addLayer(vlastniGrafika); Definice grafické vrstvy Definice polygonu Definice linie Definice bodu s atributem Přidání grafických prvků do grafické vrstvy a její vykreslení v mapě