hartă simplă pe openlayers

Nu cu mult timp în urmă, a avut loc o conferință. Sistem dedicat deschis informațional geografic (GIS). Acum, materialele conferinței disponibile on-line - Vă sfătuiesc să se uite, vă puteți aduna o mulțime de lucruri interesante. Si din moment ce subiectul este foarte curent (și pentru a adăuga material în limba rusă, care este de multe ori nu este suficient), am decis să înceapă o sesizare pentru gisam și să facă o hartă pe OpenLayers.

O altă bibliotecă de popular open source pentru lucrul cu hărți este Pliant. Este mult mai ușor în comparație cu OpenLayers și are un set de cele mai comune funcții care acoperă nevoile majorității utilizatorilor. Și dacă ai nevoie de mai mult - sigur veți găsi funcționalitatea lipsă într-una dintre multele plugin-uri. De ce este alegerea mea a căzut pe OpenLayers. Tocmai a lansat recent o nouă versiune (de fapt, o bibliotecă rescrisă complet în comparație cu linia 2.x) și este interesant pentru a vedea ce vom multumi dezvoltatori OpenLayers 3.

Mai departe direct pe hartă. Pentru a începe, descărcați OpenLayers. Din arhiva descărcată, avem nevoie de stil ol.css și biblioteca în sine ol.js. Conectați-le la pagina:

Acum, containerul este situat pe pagina, în cazul în care va fi afișată harta:

Până în prezent, totul este simplu și clar (deși va continua să fie puțin mai complicat). Acum trece la inițializa cartela:

Parametrul specifică ce va fi plasat carte DOM-elementul - aceasta este înainte de a ne-am creat un element div cu id egal cu harta. Acum, pe un card gol pentru a adăuga un strat de OpenStreetMap:

OpenLayers suportă mai multe formate, familiarizat cu acestea mai multe mai aproape. Atâta timp suficient să se știe că am conectat un strat de țiglă, care servește ca o sursă de OpenStreetMap predefinite. Pentru mai curios există o documentație.

centru - este, desigur, centrul hărții (coordonatele sunt preluate de la Moscova), și zoom - este nivelul de aproximare. Este mai mare valoarea, cu cât ne apropiem și mai detaliată harta devine. După instalarea centrului putem vedea harta în forma dorită:

Ei bine, începe. exemple și tehnici vor deveni din ce în ce mai greu, iar dacă nu vom merge dincolo de „hărți primitive.“ Exemplul de lucru pus pe GitHub

Un card simplu pentru OpenLayers