Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
VYUŽITÍ ARCGIS API FOR JAVASCRIPT PRO PUBLIKACI MAPOVÝCH SLUŽEB ÚRM
Mgr. Pavel Ečer Útvar rozvoje hl. m. Prahy
2
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:
3
Prvotní aplikace Import API a stylů:
<link rel="stylesheet" ref=" <link rel="stylesheet" href=" <script src=" Skript pro základní zobrazení mapy: <script> dojo.require("esri.map"); var map, spatialRef, orto, zaklMapa; var lods = [{"level":0,"resolution": ,"scale":750000},{"level":1,"resolution": ,"scale":500000},{"level":2,"resolution": ,"scale":350000},{"level":3,"resolution": ,"scale":200000},{"level":4,"resolution": ,"scale":100000},{"level":5,"resolution": ,"scale":75000},{"level":6,"resolution": ,"scale":50000},{"level":7,"resolution": ,"scale":25000},{"level":8,"resolution": ,"scale":20000},{"level":9,"resolution": ,"scale":15000},{"level":10,"resolution": ,"scale":10000},{"level":11,"resolution": ,"scale":7500},{"level":12,"resolution": ,"scale":5000},{"level":13,"resolution": ,"scale":3500},{"level":14,"resolution": ,"scale":2000},{"level":15,"resolution": ,"scale":1500},{"level":16,"resolution": ,"scale":1000},{"level":17,"resolution": ,"scale":750},{"level":18,"resolution": ,"scale":500}]; spatialRef = new esri.SpatialReference({wkid:102067}); map = new esri.Map("map", {extent: new esri.geometry.Extent({xmin: ,ymin: ,xmax: ,ymax: ,spatialReference:spatialRef}),fitExtent:true, lods:lods, logo: false, fitExtent: false, sliderStyle: "large",zoom:3}); orto = new esri.layers.ArcGISTiledMapServiceLayer( " {id:"orto",visible:true}); zaklMapa = new esri.layers.ArcGISDynamicMapServiceLayer( {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>
4
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(" 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 - dojo.connect(map, "onClick", doIdentify); identifyLimity = new esri.tasks.IdentifyTask(" 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
5
Vložení vlastních grafických objektů
var vlastniGrafika = new esri.layers.GraphicsLayer(); var myPolygon = {"geometry":{"rings":[[[ ], [ ], [ ], [ ]]],"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":[[[ ], [ ]]], "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": ,"y": , "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ě
Podobné prezentace
