Hărţile MS Live: lucrul cu straturi


Continuăm să ne jucăm cu SDK-ul de la hărţile oferite de Microsoft. Ele stau mai bine la capitolul România decât ce oferă Yahoo sau Google. Am văzut în materialele trecute cum putem afişa nişte puncte pe hartă, precum şi cum ne putem afişa o legendă proprie. Astăzi vom explora o altă facilitate: straturile (layer-ele). Ca într-un editor grafic, putem avea mai multe straturi pe care le adăugăm hărţii cu AddShapeLayer. Apoi adăugăm elementele (shapes) la acel layer în loc să le adăugăm pe hartă. Un layer are metodele Show() şi Hide() care evident arată, respectiv ascund acel strat. Aceasta ne permite ca la încărcare să ne definim câte straturi dorim, dar să le afişăm atunci când dorim. De exemplu la un eveniment tip click. Veţi vedea în exemplul de mai jos că, suplimentar, am făcut o recentrare (SetMapView), astfel că atunci când schimbăm layer-ul harta să se aşeze singură în poziţia şi cu zoom-ul potrivit.

În fine, a doua noutate adusă în exemplul de mai jos e folosirea unui… să îi zicem toolbar, unde am pus nişte instrumente: zoom in, zoom out, schimbarea layer-ului, schimbarea tipului de hartă. Pentru toate aceste operaţii veţi găsi mai jos echivalentul în cod (chiar dacă nu e comentat, am pus funcţii cu titluri intuitive). Atenţie: nu e cea mai optimizată soluţie. Am căutat să scriu un cod care să se poată înţelege… el poate fi rescris mai eficient cu siguranţă. Şi ca în celelalte cazuri, ca să nu pară teorie plictisitoare, puteţi vedea codul în acţiune: click aici. Nu uitaţi să daţi click pe cele patru instrumente (iconiţe rotunde) din stânga-sus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Legenda la o harta Microsoft Live</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<link href="harta2.css" rel="stylesheet" type="text/css" />
</style>
<script type="text/javascript">
    var harta = null;
    var legenda = null;
    var instrumente = null;
    var hartal1 = null;
    var hartal2 = null;
    var CentrulTarii;
    var shapes1=new Array();
    var harta1=new Array();
    var shapes2=new Array();
    var harta2=new Array();
    var points1 = new Array();
    var points2 = new Array();
    function Initializari(){
        CentrulTarii = new VELatLong(45.817315, 25.037842);
        harta1[0]=new Array(44.4342,26.102955,'Bucureşti','Aceasta este <strong>capitala României</strong>.');
        harta1[1]=new Array(45.753425,21.223275,'Timişoara','Un oraş <strong><font color=#cc0000>foarte occidental<font></strong>.');
        harta1[2]=new Array(46.770143,23.596885,'Cluj-Napoca','Oraşul meu de <em>adopţie</em>.');
        harta1[3]=new Array(47.137608,27.5556,'Iaşi','Şi o oprire la Iaşi şi cu o mică imagine.<br><img src=iasi.jpg>');
        harta2[0]=new Array(44.318877,23.80172,'Craiova','Nu am fost pe aici...');
        harta2[1]=new Array(44.63285,22.6563,'Drobeta-Turnu Severin','Nici pe aici...');
        harta2[2]=new Array(44.850996,24.879775,'Piteşti','OK, nici pe aici...');
        for(i=0;i<harta1.length;i++)
            points1[i] = new VELatLong(harta1[i][0],harta1[i][1]);
        for(i=0;i<harta2.length;i++)
            points2[i] = new VELatLong(harta2[i][0],harta2[i][1]);
    }
    function IncarcaHarta(){
        Initializari();
        harta = new VEMap('hartaMea');
        harta.HideDashboard();
        harta.LoadMap(CentrulTarii, 7, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
        hartal1 = new VEShapeLayer();
        hartal1.SetTitle("Situatia prima");
        harta.AddShapeLayer(hartal1);
        PuneHarta1();
        hartal2 = new VEShapeLayer();
        hartal2.SetTitle("Situatia a doua");
        hartal2.Hide();
        harta.AddShapeLayer(hartal2);
        PuneHarta2();
        AdaugaLegenda();
        AdaugaInstrumente();
    }
    function PuneHarta1(){
        for(i=0;i<harta1.length;i++){
            punct = new VELatLong(harta1[i][0],harta1[i][1]);
            shapes1[i] = new VEShape(VEShapeType.Pushpin, punct);
            shapes1[i].SetTitle(harta1[i][2]);
            shapes1[i].SetDescription(harta1[i][3]);
            shapes1[i].SetCustomIcon('<div class=pinStyle2><div class=text>'+(i+1)+'</div></div>');
            hartal1.AddShape(shapes1[i]);
        }
    }
    function PuneHarta2(){
        for(i=0;i<harta2.length;i++){
            punct = new VELatLong(harta2[i][0],harta2[i][1]);
            shapes2[i] = new VEShape(VEShapeType.Pushpin, punct);
            shapes2[i].SetTitle(harta2[i][2]);
            shapes2[i].SetDescription(harta2[i][3]);
            shapes2[i].SetCustomIcon('<div class=pinStyle2><div class=text>'+(i+1)+'</div></div>');
            hartal2.AddShape(shapes2[i]);
        }
    }
    function AdaugaLegenda(){
        if(legenda == null){
            var el = document.createElement("div");
            el.className = "legenda";
            el.style.left = 0 + "px";
            el.style.top = 34 + "px";
            inner = "";
            if(hartal1.IsVisible()){
                inner += "Localităţi vizitate<ol>";
                for(i=0;i<harta1.length;i++)
                    inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shapes1["+i+"]);'>"+harta1[i][2]+"</a></li>";
            }
            else {
                inner += "Localităţi nevizitate<ol>";
                for(i=0;i<harta2.length;i++)
                    inner += "<li><a href=# onClick='javascript:harta.HideInfoBox();harta.ShowInfoBox(shapes2["+i+"]);'>"+harta2[i][2]+"</a></li>";
            }
            inner += "</ol>";
            leg = document.getElementById("legendaid");
            el.innerHTML = inner
            harta.AddControl(el);
            legenda = el;
        }
    }
    function AdaugaInstrumente(){
        if(instrumente == null){
            var el = document.createElement("div");
            el.className = "legenda";
            el.style.left = 0 + "px";
            el.style.top = 0 + "px";
            inner = "";
            inner += "<a href=# onClick='javascript:harta.ZoomIn();'><img src=plus.png border=0 align=absmiddle></a>";
            inner += "<a href=# onClick='javascript:harta.ZoomOut();'><img src=minus.png border=0 align=absmiddle></a>";
            if(hartal1.IsVisible())
                inner += "<a href=# onClick='javascript:hartal1.Hide();hartal2.Show();harta.SetMapView(points2);harta.DeleteControl(legenda);legenda=null;AdaugaLegenda();harta.DeleteControl(instrumente);instrumente=null;AdaugaInstrumente();'><img src=schimba.png border=0 align=absmiddle></a>";
            else
                inner += "<a href=# onClick='javascript:hartal2.Hide();hartal1.Show();harta.SetMapView(points1);harta.DeleteControl(legenda);legenda=null;AdaugaLegenda();harta.DeleteControl(instrumente);instrumente=null;AdaugaInstrumente();'><img src=schimba.png border=0 align=absmiddle></a>";
            style = harta.GetMapStyle();
            if(style == VEMapStyle.Aerial)
                inner += "<a href=# onClick='javascript:harta.SetMapStyle(VEMapStyle.Road);harta.DeleteControl(instrumente);instrumente=null;AdaugaInstrumente();'><img src=stil.png border=0 align=absmiddle></a>";
            else
                inner += "<a href=# onClick='javascript:harta.SetMapStyle(VEMapStyle.Aerial);harta.DeleteControl(instrumente);instrumente=null;AdaugaInstrumente();'><img src=stil.png border=0 align=absmiddle></a>";
            el.innerHTML = inner
            harta.AddControl(el);
            instrumente = el;
        }
    }
</script>
</head>
<body onload="IncarcaHarta();">
    <div id='hartaMea' style="position: relative; width: 800px; height: 600px; "></div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

1 comentariu

  1. Toma spune:

    Va salut,

    Gasesc pagina dvs EXCELENTA. Pacat ca am gasit-o greu… Tot Gogu este vinovatul… As dori sa va rog sa-mi dati un sfat. Pentru uzul meu personal doresc sa-mi fac o mica harta in layere, ceva f simplu, in care sa plec de la un layer de baza, unde am conturul Romaniei si judetele, apoi layerul 2 cu drumurile, sosele, etc, apoi un layer cu punctele localitatilor, si altul cu o legenda proprie, ceva genul celui in care dvs ati pus parohiile… As dori sa plec de la produse simple freeware, acum am descarcat draw de la openoffice, care lucreaza cu layere… Am pornit de la niste harti luate de pe net jpg, dar partea propasta este ca atunci cand dau zoom,ajung ca dintr-o linie sa vad un poligon colorat… deci ajung la imprecizii… Nu ca as avea nevoie de precizie… Stiu ca in cazul acesta se poate lucra cu obiecte png…
    Aveti cumva un set de contururi judete, harta Romania, sau layere cu drumurile-soselele… ?!!
    Dati-mi va rog un sfat util .. nu vreau sa ma complic daca nu e nevoie…!!!
    Multumesc !
    PAX !


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *