Share
În acest tutorial, vă vom arăta cum să utilizați OpenLayers, o bibliotecă JavaScript open source ușor de folosit pentru a încărca, a afișa și a redacta hărți, cu GeoNames.org WFS pentru a afișa marcaje pe hartă, la fel cum vedeți pe Google Hărți. Tot ce este nevoie este un HTML, CSS și JavaScript - asta este!
Înainte de a face ceva, trebuie să vă configurați mai întâi contul GeoNames.org. GeoNames WebServices vă permite să faceți cereri în valoare de 30000 de puncte de credit pe zi, o limită orară de 2000 de credite. Diferitele interogări necesită puncte de credit diferite, fără ca interogarea să "costeze" mai mult de 4. Pentru multe site-uri mici și pentru teste simple de dezvoltare, acest lucru ar trebui să fie mai mult decât suficient. Ei oferă servicii Premium la un preț, dar astăzi vom avea de a face cu lucrurile gratuite. Libera este mereu drăguță, nu-i așa??
Pentru a vă crea contul, accesați datele de conectare GeoNames.org și configurați-vă contul gratuit. Va trebui să confirmați contul în e-mail, dar acest lucru ar trebui să meargă destul de repede. Odată ce ați confirmat, sunteți gata să plecați.
"Există peste 30 de tipuri diferite de interogări pe care le puteți face cu GeoNames WebServices. O listă a acestora poate fi găsită aici."
Apoi va trebui să luăm codul sursă și imaginile OpenLayers. Acestea pot fi găsite pe pagina de pornire OpenLayers. Puteți descărca fie .zip, fie .tar.gz. Pentru acest tutorial, avem nevoie doar de fișierul OpenLayers.js și de folderul img. Pentru o aromă și o utilizare mai ușoară, vom include JScrollPane de la Kelvin Luck și pluginurile jQuery de la mouse-ul de la Brandon Aaron, doar pentru a spori și a înfrumuseța rezultatele div. Luați js și css de la JScrollPane. Am facut cateva modificari minore ale css-ului, doar pentru a se potrivi cu stilul pe care l-am dorit pentru acest tutorial, dar stilul asa cum ti-ar placea. Luați pluginul mouse-ului de la GitHub. Nu în ultimul rând, apucați ultima versiune a jQuery.
"Desigur, toate fișierele necesare pentru acest tutorial pot fi găsite în link-ul de descărcare a fișierelor sursă din partea de sus."
Tutorialul de astazi se va adresa findNearbyPostalCodes. Acum, să începem să scriem un cod!
Mergeți mai departe și creați o structură de directoare pentru aplicația dvs. Am numit-o pe a mea GeoNames. În interiorul geonames, includeți trei dosare suplimentare: img, js și css. Imaginile de la OpenLayers vor merge în folderul img, fișierele JavaScript din OpenLayers, JScrollPane și jQuery mousewheel, iar jQuery va merge în folderul js, iar foaia de stil din JScrollPane va merge în folderul css. De asemenea, câteva imagini create și un cuplu apucat de iconfinder pot fi găsite în fișierele sursă. Puneți-i în img dosar, de asemenea.
Aici avem o pagină simplă cu câteva elemente HTML. Cea mai mare parte a cărnii noastre va fi în JavaScript, deci această parte este destul de scurtă. Salvați acest fișier ca index.html.
Openlayers / Geonames Tutorial Căutare
Rezultate
Iată CSS-ul pe care l-am creat pentru utilizare în acest tutorial. Nimic nu prea strălucitor aici, doar un stil. Salvați acest fișier ca style.css în css dosarul pe care l-ați creat.
Accentsconagua
* font-family: Helvetica; culoarea neagra; html înălțime: 100%; marja: 0; overflow-y: parcurgere; corp fundal-culoare: alb; font: normal 13px arial, sans-serif; înălțime: 100%; marja: 0; #map background: #ccc; înălțime: 100%; poziția: absolută; lățime: 100%; z-index: 1; #searchContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; fundal-culoare: rgba (247,247,247,0.5); frontieră: 1px solid #ffffff; box-shadow: 0 0 3px # C5C5C5; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; height: 158px; lățime: 250px; Poziția: absolută; z-index: 2; top: 20px; dreapta: 20px; umplutura: 4px 4px 4px 4px; #searchBox background-color: rgba (247,247,247,0.7); border-bottom-stânga-rază: 2px; border-bottom-dreapta-rază: 2px; frontieră: 1px solid #ffffff; height: 136px; lățime: 250px; text-align: centru; linia-înălțime: 44px; #resultContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; fundal-culoare: rgba (247,247,247,0.5); frontieră: 1px solid #ffffff; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; box-shadow: 0 0 3px # C5C5C5; lățime: 252px; Poziția: absolută; z-index: 2; top: 208px; dreapta: 20px; umplutura: 4px 4px 4px 4px; afișare: niciunul; #resultHeader, #searchHeader width: 250px; înălțime: 20px; border-top-stânga-rază: 2px; border-top-dreapta-rază: 2px; frontieră-stânga: 1px solid #ffffff; frontieră: 1px solid #ffffff; frontieră-dreapta: 1px solid #ffffff; poziție: relativă; background-repeat: repeat-x; fundal: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (C2DCFD), până la (#DDECFD)); fundal: -webkit-gradient linear (top, #DDECFD, # C2DCFD); fundal: -moz-linear-gradient (sus, #DDECFD, # C2DCFD); fundal: -ms-gradient linear (top, #DDECFD, # C2DCFD); fundal: -o-gradient linear (top, #DDECFD, # C2DCFD); text-align: centru; font-size: 16px; text-shadow: 0px 0px 1px # 96B0BB; #resultBox background-color: rgba (247,247,247,0.7); border-bottom-stânga-rază: 2px; border-bottom-dreapta-rază: 2px; frontieră: 1px solid #ffffff; max-height: 418px; min-height: 250px; lățime: 250px; overflow: auto; .item0, .item1 float: left; umplutură: 5px 4px 5px 4px; lățime: 242px; frontieră: 1px solid #dcdcdc; .item1 background-color: #FFFFFF; . clar clar: ambele; .olPopupCloseBox background: url ("... /img/close.gif") nu-repeta; cursor: pointer; .olFramedCloudPopupContent padding: 5px; overflow: auto; În acest moment, pagina dvs. ar trebui să arate astfel:
Nu este o mulțime de a privi, așa că hai să intrăm în lucrurile bune.
var $ r = $ ('# rezultate'), $ rContainer = $ ('# rezultatContainer'), $ rBox = $ ('# resultBox'); Întotdeauna doriți să setați obiectele jQuery la variabile. Întotdeauna cele mai bune practici!
var Observație = funcție (țintă) _target = țintă; _arrObservers = []; var binder = funcție (observator) _arrObservers.push (observator); ; var inform = funcția () pentru (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ; return binder: binder, inform: inform ;
Aceasta este doar o funcție simplă de ascultător pe care am creat-o. Atunci când creăm evenimentul pe care dorim să-l ascultăm, îi transmitem obiectul la care vrem să ascultăm; Am numit acest argument: ţintă. Acesta conține două variabile: _ţintă - o variabilă pe care o stabilim egală cu argumentul nostru și _arrObservers - o matrice goală pe care o vom folosi pentru a popula cu ascultătorii. Observarea conține, de asemenea, două funcții: liant și informa.
var binder = funcție (observator) _arrObservers.push (observator); ;
Funcţie liant adaugă fiecărui ascultător sau observator la o serie de ascultători. În acest tutorial vom crea doar un singur eveniment personalizat, dar adăugarea fiecărui ascultător într-o matrice vă permite să atribuiți mai mulți ascultători cu o funcție.
var inform = funcția () pentru (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ;
Funcţie informa declanșează un mesaj către ascultător, permițându-i să știe că evenimentul are loc. În cele din urmă, după cum vedeți mai sus, vom returna ambele funcții astfel încât acestea să fie disponibile pentru utilizare.
var makeGeoNamesModel = funcție () var _results = , țară = 'SUA', rază = 30, username = 'openlayers_tutorial', maxRows = 20; var notifySearchComplete = observare nouă (acest lucru); var caută = funcție (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', date: postal code: val, country: country, radius: radius, username: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = funcție (geoData) _results = geoData; notifySearchComplete.inform (); ; var getResults = funcție () returnează rezultate; ; var clar = funcția () _results = ; ; retur notifySearchComplete: notifySearchComplete, căutare: căutare, geoNamesResponse: geoNamesResponse, getResults: getResults, clar: clar; ;
Aici avem modelul nostru GeoNames. Acest model se va ocupa de crearea, stocarea și returnarea valorii cererii noastre GeoNames WebServices.
var _results = , țară = 'SUA', rază = 30, username = 'openlayers_tutorial', maxRows = 20;
Acestea sunt doar câteva variabile pe care le vom folosi, mai ales în solicitarea noastră ajax. Pentru a folosi tutorialul nostru, vom căuta doar Statele Unite (îmi pare rău, sunt părtinitoare), dar vă puteți modifica cererea de acceptare a codului de țară dacă doriți. Raza maximă pe care o avem în contul nostru gratuit este de 30 de kilometri. De asemenea, am setat maximum de locații returnate la 20, deși poți să ajungi la valoarea respectivă dacă vrei. Şir openlayers_tutorial este numele contului pe care l-am configurat pentru acest tutorial, deci schimbați acest șir la numele de utilizator pe care l-ați creat atunci când ați configurat contul de mai sus. În cele din urmă, pregătim modelul nostru cu un obiect gol numit _results care urmează să fie umplută mai târziu.
var notifySearchComplete = observare nouă (acest lucru); var caută = funcție (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', date: postal code: val, country: country, radius: radius, username: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = funcție (geoData) _results = geoData; notifySearchComplete.inform (); ;
Aici avem toate solicitările importante de servicii web: căutare și notificarea evenimentului nostru. Deoarece aceasta este o cerere terță parte, am setat dataType la 'jsonp' și trecem cererea variabilele noastre pe care le-am definit anterior. Argument Val va fi definit mai târziu în opinia noastră. De asemenea, vom seta explicit numele funcției de apel invers - geoNamesResponse - și să se ocupe de cererea de succes. Aș fi putut adăuga un cod pentru a gestiona o intrare eronată, dar pentru acest tutorial, vom presupune că veți introduce un cod poștal corect de 5 cifre. Transmitem GeoNames codul postal pe care la introdus utilizatorul, dar pentru această interogare specială, ați putea trece latitudinea și longitudinea ca lat și LNG daca ai vrut. În acest moment, vom notifica, de asemenea, ascultătorului nostru că această căutare a fost finalizată.
var getResults = funcție () returnează rezultate; ; var clar = funcția () _results = ; ;
Ultima parte a modelului nostru gestionează returnarea rezultatelor când le-am cerut, și, de asemenea, golirea obiectului rezultat atunci când utilizatorul face clic pe butonul "Clear Markers".
var makeGeoNamesFormController = funcția () return handleSearch: funcția (txtVal, geoNamesModel) geoNamesModel.search (txtVal); , handleClear: funcție (geoNamesModel) geoNamesModel.clear (); , handleResult: funcție (geoNamesModel) testResults = geoNamesModel.getResults (); return testResults; ; ;
Controlorul nostru nu face altceva decât să acceseze funcții și returnează variabile din modelul nostru GeoNames pe baza intrărilor din interfața cu utilizatorul. Revenim trei funcții:
handleSearch - acest lucru ia valoarea de intrare a utilizatorului și geoNamesModel ca argumente, și invocă geoNamesModel lui căutare funcția, transmiterea acesteia valoarea pe care dorim să o trimitem la GeoNames WebServices.
handleClear - acest lucru invocă modelul geoNamesModel clar astfel încât să putem clarifica obiectul rezultat.
handleResult - acest lucru invocă modelul geoNamesModel getResults astfel încât să putem accesa rezultatele cererii noastre WFS.
var makeGeoNamesFormView = function (initGeoNamesModel, initOpenLayersMapModel, initGeoNamesFormController, initOpenLayersMapController) var _geoNamesModel = initGeoNamesModel, _openLayersMapModel = initOpenLayersMapModel, _geoNamesFormController = initGeoNamesFormController, _openLayersMapController = initOpenLayersMapController, $ txtSearch = $ ( '# txtSearch'), $ btnSearch = $ ( '# btnSearch '), $ btnClear = $ (' # btnClear '); $ btnSearch.on ("click", functie () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleSearch ($ txtSearch.val (), geoNamesModel); ); $ btnClear.on ("click", funcția () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ rContainer.slideUp 500);); $ (fereastră) .on ("încărcare", funcție () _openLayersMapController.render (_openLayersMapModel);); var showPoints = funcție () var olPoints = _geoNamesFormController.handleResult (_geoNamesModel); var olResults = _openLayersMapController.handleMarkers (_openLayersMapModel, olPoints); $ ( '# ResultContainer') slideDown (500).; $ r.append (olResults.join (")); $ rBox.jScrollPane (showArrows: true, autoReinitialise: true); _geoNamesModel.notifySearchComplete.binder (function () showPoints; Vizualizarea GeoNames definește evenimentele noastre de clicuri și gestionează numirea funcțiilor controlerului pentru a manipula vizualizarea noastră. Funcționează îndeaproape cu controlerul, dar lasă modelul să acceseze și să manipuleze controlerul.
var _geoNamesModel = initGeoNamesModel, _openLayersMapModel = initOpenLayersMapModel, _geoNamesFormController = initGeoNamesFormController, _openLayersMapController = initOpenLayersMapController, $ txtSearch = $ ( '# txtSearch'), $ btnSearch = $ ( '# btnSearch'), $ btnClear = $ ( '# btnClear');
Tot ceea ce facem aici este setarea variabilelor egale cu argumentele funcțiilor respective și, ca întotdeauna, setați obiectele jQuery la variabile.
$ btnSearch.on ("click", functie () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleSearch ($ txtSearch.val (), geoNamesModel); ); $ btnClear.on ("click", funcția () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ rContainer.slideUp 500);); $ (fereastră) .on ("încărcare", funcție () _openLayersMapController.render (_openLayersMapModel);); Acestea sunt doar două evenimente de clic, plus un eveniment de încărcare a ferestrelor. Primul se leagă de butonul "Căutare GeoNames.org" și trimite la caseta de text și modelul pe care dorim să-l ocupăm pentru a gestiona munca. Cel de-al doilea se leagă de butonul "Clear Markers" pe care l-am menționat în secțiunea Model GeoNames. Acest eveniment solicită curățarea obiectului de rezultate din modelul GeoNames, precum și marcajele din vizualizare, pe care le vom adresa mai jos. În cele din urmă, de asemenea, actualizează formularul și secțiunea de rezultate în viziunea noastră și ascunde rezultatele deoarece acea zonă este acum goală. Evenimentul de încărcare a ferestrei se ocupă de redarea hărții atunci când fereastra sa încărcat complet.
var showPoints = funcție () var olPoints = _geoNamesFormController.handleResult (_geoNamesModel); var olResults = _openLayersMapController.handleMarkers (_openLayersMapModel, olPoints); $ ( '# ResultContainer') slideDown (500).; $ r.append (olResults.join (")); $ rBox.jScrollPane (showArrows: true, autoReinitialise: true); _geoNamesModel.notifySearchComplete.binder (function () showPoints (); Partea finală a Vizualizării noastre GeoNames se ocupă de luarea rezultatelor și de manipularea vizualizării rezultatelor și a hărții. Vederea știe că trebuie să actualizeze harta și afișarea rezultatelor, deoarece sa abonat la modelul GeoNames notifySearchComplete eveniment după cum putem vedea mai sus. După finalizarea evenimentului, vizualizarea a sunat showPoints și gestionează actualizarea rezultatelor div și afișarea marcatorilor pe hartă.
var makeOpenLayersMapModel = function () var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centrat pe Lambert St Louis International pentru că sunt părtinitoare zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers .Class (OpenLayers.Popup.FramedCloud, 'autoSize': true), dimensiune = new OpenLayers.Size (iconSize, iconSize), calculateOffset = functie (dimensiune) return New OpenLayers.Pixel (-size.w / -size.h / 2); , pictogram = nou OpenLayers.Icon ('img / redpin.png', mărime, null, calculateOffset); var renderMap = funcție () var opțiuni = controale: [new OpenLayers.Control.Navigation (), new OpenLayers.Control.PanZoomBar (), noi OpenLayers.Control.KeyboardDefaults ()], unități: "km", numZoomLevels: numZoomLevels, maxExtent: OpenLayers.Bounds nou (-170.0, 10, -60, 80), centru: centru; map = nou OpenLayers.Map ("harta", opțiuni); wmslayer = OpenLayers.Layer.WMS nou ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); marcatori = noi OpenLayers.Layer.Markers ("Marcatori de coduri poștale"); map.addLayers ([wmslayer, markeri]); map.zoomTo (zoomLevel); ; var addMarker = funcție (ll, pictogramă, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (marcator); marker.events.register ('mousedown', marker, function (evt) pentru (var i = map.popups.length-1; i> = 0; i -) map.removePopup ); var popup = new OpenLayers.Popup.FramedCloud (null, marker.lonlat, null, popupContentHTML, null, true, null); popup.closeOnMove = true; map.addPopup (popup); OpenLayers.Event.stop evt);); ; var buildMarkers = funcția (pts) var rHTML = [], y = 0; $ e (pts.postalCodes, functie (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = .lng; markerIcon = icon.clone (); lonLatMarker = new OpenLayers.LonLat (longit, latit); popupClass = autoSizeFramedCloud; popupContentHTML = ''+ v.placeName +', '+ v.adminCode1 +' + v.postalCode + '
„; rHTML [y ++] = '„; rHTML [y ++] = (i + 1) + ')' + v.placeName + ',' + v.adminCode1 + '+ v.postalCode +
„; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '„; addMarker (lonLatMarker, markerIcon, popupClass, popupContentHTML); ); map.setCenter (newCenterLL, 12); returnați rHTML; ; var = funcția () pentru (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (centru, zoomLevel); ; întoarceți renderMap: renderMap, addMarker: addMarker, buildMarkers: buildMarkers, clar: clar; Aici avem modelul nostru OpenLayers. Acest model se va ocupa de crearea hărții OpenLayers, a marcatorilor de hartă pentru a descrie setul de rezultate GeoNames WebServices, precum și pentru eliminarea acelor marcaje de pe harta noastră.
var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centralizat pe Lambert St Louis International pentru că sunt părtinitoare zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers.Class (OpenLayers.Popup. FramedCloud, 'autoSize': true), dimensiune = nou OpenLayers.Size (iconSize, iconSize), calculateOffset = functie (dimensiune) return New OpenLayers.Pixel (-size.w / 2, -size.h / ; , pictogram = nou OpenLayers.Icon ('img / redpin.png', mărime, null, calculateOffset); Am predefinit câteva valori pentru harta noastră - zoomLevel este variabila la care vom seta zoom-ul nostru initial. Numărul de nivele de zoom crește pe măsură ce vă apropiați și mai aproape de Pământ. După cum probabil puteți ghici, numZoomLevels este numărul de niveluri de zoom pe care această hartă o va permite. Pentru markerele noastre de împingere, trebuie să declarăm mărimea marcatorului, deci iconSize, fără să spună explicit acest lucru, este setat la 32, iar OpenLayers înțelege această valoare să fie în pixeli. Celelalte elemente pe care le vedeți aici sunt specifice OpenLayers. calculateOffset spune pur și simplu pictograma pentru a compensa imaginea pictogramei astfel încât imaginea să fie centrat pe latitudinea și longitudinea punctului, nu în stânga sus sau în dreapta sus. OpenLayers.Size constructor creează o dimensiune bazată pe iconSize pe care o dorim. În cele din urmă, OpenLayers.Icon constructor definește pictograma pe care o vom folosi ca markeri pe hartă.
var renderMap = funcție () var opțiuni = controale: [new OpenLayers.Control.Navigation (), new OpenLayers.Control.PanZoomBar (), noi OpenLayers.Control.KeyboardDefaults ()], unități: "km", numZoomLevels: numZoomLevels, maxExtent: OpenLayers.Bounds nou (-170.0, 10, -60, 80), centru: centru; map = nou OpenLayers.Map ("harta", opțiuni); wmslayer = OpenLayers.Layer.WMS nou ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); marcatori = noi OpenLayers.Layer.Markers ("Marcatori de coduri poștale"); map.addLayers ([wmslayer, markeri]); map.zoomTo (zoomLevel); ; Aici este codul important pentru a crea harta noastră. OpenLayers.Map constructorul are doi parametri, obiectul DOM care va găzdui harta și opțiunile, care este un obiect opțional cu proprietăți pe care harta le va avea. Să aruncăm o privire la opțiunile pe care le-am inclus.
OpenLayers vă oferă flexibilitatea de a utiliza mai multe surse diferite pentru plăcile dvs. de hartă.
controale adăugați pur și simplu interacțiunea mouse-ului și a tastaturii cu harta. Acestea includ, de asemenea, bara de zoom și butoanele direcționale deasupra hărții. Unități sunt în kilometri, deși în scopul acestui tutorial, această opțiune nu este cu adevărat necesară, deoarece nu facem calcule cu OpenLayers, ci doar cu GeoNames. numZoomLevels stabilește numărul de niveluri de zoom pe care această hartă va avea. centru spune harta unde să se centreze după randare. maxExtent opțiunea este setată la un element OpenLayers numit Bounds. Pur și simplu declarați un nou OpenLayers.Bounds, și ne dăm cei 4 parametri - Southwest Longitude, Southwest Latitude, North East Longitude și NorthEast Latitude. Acest lucru ne oferă, ceea ce numim în lumea GIS, o cutie de legătură. Deoarece avem de-a face cu Statele Unite în acest tutorial, am stabilit limitele să includă America de Nord doar în afișarea hărții. Dacă doriți să arătați întreaga lume, pur și simplu lăsați această opțiune afară. În acest moment avem harta noastră pregătită. Acum putem începe să adăugăm straturi pe hartă.
OpenLayers vă oferă flexibilitatea de a utiliza mai multe surse diferite pentru plăcile dvs. de hartă. Unele dintre acestea includ Maps Bing, Google Maps și OpenStreetMap. De asemenea, puteți utiliza propriile plăci de hărți dacă aveți astfel de configurații. În scopul acestui tutorial, vom folosi aceleași hărți OSGeo pe care OpenLayers le utilizează în propriile lor exemple. Noi facem acest lucru prin crearea unui nou OpenLayers.Layer.WMS constructor. WMS reprezintă serviciile Web Mapping. Îi oferim un titlu, o adresă URL care să indice dale și parametrii care sunt specifici pentru gazda țiglă. Apoi vom crea un strat de marcator folosind OpenLayers.Layer.Markers constructor. Tot ce trebuie să facem în acest moment este să-i dăm un nume. În final, vom adăuga aceste două straturi pe care le-am creat pe harta noastră cu addLayers și vom mări până la nivelul de zoom corespunzător pe care l-am definit.
var addMarker = funcție (ll, pictogramă, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (marcator); marker.events.register ('mousedown', marker, function (evt) pentru (var i = map.popups.length-1; i> = 0; i -) map.removePopup ); var popup = new OpenLayers.Popup.FramedCloud (null, marker.lonlat, null, popupContentHTML, null, true, null); popup.closeOnMove = true; map.addPopup (popup); OpenLayers.Event.stop evt);); ; addMarker funcția are informațiile despre marker pe care le vom furniza în secțiunea următoare și creează markere și nori pop-up care vor fi adăugați pe harta noastră. Mai întâi facem markerul nostru cu OpenLayers.Marker constructor. Tot ce trebuie să facem este să îi transmitem variabila LonLat și pictograma pe care dorim să o folosim. Apoi pur și simplu folosim addMarker funcția cu variabila marker ca argument și marcatorul va fi adăugat pe hartă. Pentru a obține o fereastră pop-up care să funcționeze dacă faceți clic pe marcator, înregistram un eveniment pentru acest marcator. Facem asta prin apelarea evenimente de proprietate a acestui marcator și de a folosi Inregistreaza-te funcția de a lega evenimentul ca în jQuery. Popup este creat folosind OpenLayers.Popup.FramedCloud constructor, care are șapte parametri: id, lonlat, contentSize, contentHTML, anchor, closeBox, closeBoxCallback. Tot ceea ce avem nevoie este lonlat, contentHTML și abilitatea de a închide pop-ul, astfel încât orice altceva poate fi nul. Pentru a adăuga pop-up, pur și simplu folosim funcția addPopup trecând variabila popup. Este la fel de simplu ca asta.
var buildMarkers = funcția (pts) var rHTML = [], y = 0; $ e (pts.postalCodes, functie (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = .lng; markerIcon = icon.clone (); lonLatMarker = new OpenLayers.LonLat (longit, latit); popupClass = autoSizeFramedCloud; popupContentHTML = ''+ v.placeName +', '+ v.adminCode1 +' + v.postalCode + '
„; rHTML [y ++] = '„; rHTML [y ++] = (i + 1) + ')' + v.placeName + ',' + v.adminCode1 + '+ v.postalCode +„; addMarker (lonLatMarker, markerIcon, popupClass, popupContentHTML); ); map.setCenter (newCenterLL, 12); returnați rHTML; ;
„; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '
buildMarkers funcționează JSON-ul și buclele prin setul de rezultate. Pentru simplitate, presupunem că primul punct returnat de cererea GeoNames WebServices va fi cel mai probabil punctul pe care l-ați căutat, așa că facem acest nou punct central și setăm acest lucru la OpenLayers.LonLat obiect. Am creat deja pictograma noastră OpenLayers, astfel încât să o folosim din nou și din nou, vom apela clona care face pur și simplu o copie a acelei icoane. Restul bucla scrie pur și simplu câteva HTML într-o matrice pe care am văzut-o în formularul GeoNames Forma de vizualizare se utilizează pentru a crea rezultatele div. Scrierea mai multor rânduri de cod HTML și împingerea acestora într-o matrice reprezintă o modalitate rapidă de a crea dinamic cod HTML fără a trebui să accesați DOM din nou și din nou. La sfârșitul acestei buclă, vom invoca addMarker funcție pe care am creat-o mai sus. Odată ce ne-am creat markerele și bucla a fost finalizată, vom concentra și vom mări rezultatele noastre cu setCenter funcţie.
var = funcția () pentru (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (centru, zoomLevel); ;
Această funcție are rolul de a șterge cleștii de pe hartă, precum și de a le elimina de pe stratul markerilor. distruge funcția elimină marcatorul de pe hartă. removeMarker funcția elimină marcatorul de pe stratul de markere. Observați că suntem decrementing în bucla noastră pentru mai degrabă decât să creștem ca în mod normal. Facem asta deoarece folosim OpenLayer distruge și removeMarker , obiectul de marcare se actualizează. De exemplu, dacă am avea 5 markeri pe care am vrut să le ștergem și ne-am sporit buclele, după primul distrug, am avea 4 markeri rămași. După a doua distrugere, am avea 3 marcatori rămași. După a treia distrugere, am avea 2 marcatori rămași. În acel moment, totuși, markerii rămași se află la pozițiile 1 și 2, așadar ștergerea celui de-al 4-lea marker nu ar avea niciun efect deoarece această poziție nu există, prin urmare le eliminăm începând de la final și lucrăm înainte.
var makeOpenLayersMapController = functie () retur render: functie (openLayersMapModel) openLayersMapModel.renderMap (); , handleMarkers: funcție (openLayersMapModel, mrkr) openLayersMapModel.buildMarkers (mrkr); , handleClear: funcția (openLayersMapModel) openLayersMapModel.clear (); ; ;
Acest controler, ca și cel de mai sus, nu face decât să acceseze funcții și returnează variabile din model bazat pe intrarea din interfața utilizatorului, numai de această dată din modelul nostru OpenLayers. Revenim trei funcții:
face - acest lucru face de fapt harta OpenLayers pe ecran. handleMarkers - acest lucru invocă funcția buildMarkers a lui openLayersMapModel astfel încât să putem lua rezultatul nostru GeoNames WFS și să creăm pixurile noastre pe hartă. handleClear - acest lucru invocă funcția clară a openLayersMapModel, astfel încât să putem șterge harta marcatorilor noștri. Când se execută acest cod de hartă, pagina dvs. ar trebui să arate astfel:
În cele din urmă, tot ce trebuie să facem este să ne instanțiăm modelele, opiniile și contollerele noastre.
(Funcția () var geoNamesModel = makeGeoNamesModel (); var openLayersMapModel = makeOpenLayersMapModel (); var geoNamesFormController = makeGeoNamesFormController (); var openLayersMapController = makeOpenLayersMapController (); var geoNamesFormView = makeGeoNamesFormView (geoNamesModel, openLayersMapModel, geoNamesFormController, openLayersMapController);) ( );
Mai întâi vom instantiza modelele noastre, apoi controlorii noștri și, în final, punctul nostru de vedere. Vizualizarea GeoNames trece atât modelele, cât și cele două controlere, deoarece este un fel de vedere super, pentru lipsa unui termen mai bun. Am înfășurat acest lucru într-o funcție anonimă și ați terminat cu toții! Rezultatul dvs. ar trebui să pară așa: după
