Share
I denne opplæringen viser jeg deg hvordan du bruker OpenLayers, et enkelt å bruke open source JavaScript-bibliotek for å laste, vise og gjengi kart, med GeoNames.org WFS for å vise markører på kartet, akkurat som du ser på Google Maps. Alt som trengs er noen HTML, CSS og JavaScript - det er det!
Før vi gjør noe, må vi først opprette vår GeoNames.org-konto. GeoNames WebServices lar deg stille forespørsler verdt 30000 kredittpoeng per dag, en timegrense på 2000 studiepoeng. Forskjellige spørringer krever forskjellige kredittpoeng, uten at spørringen koster mer enn 4. For mange små nettsteder og enkel utviklingstesting, bør dette være mer enn nok. De tilbyr premium-tjenester til en pris, men i dag skal vi håndtere de frie greiene. Gratis er alltid hyggelig, er det ikke?
For å opprette din konto, gå til GeoNames.org login og sett opp din gratis konto. Du må bekrefte kontoen i e-posten din, men dette bør gå ganske raskt. Når du er bekreftet, er du klar til å gå.
"Det er over 30 forskjellige typer spørsmål du kan lage med GeoNames WebServices. En liste over dem kan bli funnet her."
Deretter må vi ta tak i OpenLayers kildekode og bilder. Disse finner du på OpenLayers hjemmeside. Du kan enten laste ned .zip eller .tar.gz. For denne opplæringen er alt vi trenger, filen OpenLayers.js og img-mappen. For ekstra smak og brukervennlighet, vil vi inkludere Kelvin Lucks JScrollPane og Brandon Aarons jQuery mousewheel plugins, for bare å forbedre og forskjønne våre resultater div. Ta tak i js og css fra JScrollPane. Jeg har gjort noen små endringer i css, bare for å passe stilen jeg ønsket for denne opplæringen, men stil det slik du vil. Ta tak i mousewheel-pluginet fra GitHub. Sist, men ikke minst, ta tak i den nyeste versjonen av jQuery.
"Selvfølgelig kan alle nødvendige filene for denne opplæringen finnes i Kildefiler nedlastingslenken øverst."
Dagens opplæring vil adressere findNearbyPostalCodes. La oss nå begynne å skrive noen kode!
Gå videre og opprett en katalogstruktur for søknaden din. Jeg har kalt min yr.no er hentet fra. Inne i geonames, inkluderer tre ekstra mapper: img, js og css. Bildene fra OpenLayers vil gå i img-mappen, JavaScript-filene fra OpenLayers, JScrollPane og jQuery mousewheel, og jQuery vil gå i js-mappen, og stilarket fra JScrollPane vil gå i css-mappen. Også noen få bilder jeg har laget, og et par som er tatt fra ikonfinder, finnes i kildefilene. Sett dem i img mappe også.
Her har vi en enkel side med enkelte HTML-elementer. Det meste av kjøttet vil være i vårt JavaScript, så denne delen er ganske kort. Lagre denne filen som index.html.
Openlayers / Geonames Tutorial Søke
resultater
Her er CSS vi har laget for bruk i denne opplæringen. Ingenting fryktelig banebrytende her, bare noen styling. Lagre denne filen som style.css i css mappe du opprettet.
Accentsconagua
* font-family: Helvetica; farge svart; html høyde: 100%; margin: 0; overflow-y: scroll; kropp bakgrunnsfarge: hvit; font: normal 13px arial, sans-serif; høyde: 100%; margin: 0; #kart bakgrunn: #ccc; høyde: 100%; posisjon: absolutt; bredde: 100%; z-indeks: 1; #searchContainer border-radius: 2px; -moz-grense-radius: 2px; -grense-radius: 2px; -webkit-grense-radius: 2px; bakgrunnsfarge: rgba (247.247.247,0.5); grense: 1px solid #ffffff; bokseskygge: 0 0 3px # C5C5C5; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-boks-skygge: 0 0 3px # C5C5C5; høyde: 158px; bredde: 250px; stilling: absolutt; z-indeks: 2; topp: 20px; høyre: 20px; polstring: 4px 4px 4px 4px; #searchBox bakgrunnsfarge: rgba (247.247.247,0.7); border-rste venstre-radius: 2 piksler; border-bottom-høyre-radius: 2 piksler; grense: 1px solid #ffffff; høyde: 136px; bredde: 250px; tekst-align: center; linjehøyde: 44px; #resultContainer border-radius: 2px; -moz-grense-radius: 2px; -grense-radius: 2px; -webkit-grense-radius: 2px; bakgrunnsfarge: rgba (247.247.247,0.5); grense: 1px solid #ffffff; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-boks-skygge: 0 0 3px # C5C5C5; bokseskygge: 0 0 3px # C5C5C5; bredde: 252px; stilling: absolutt; z-indeks: 2; topp: 208px; høyre: 20px; polstring: 4px 4px 4px 4px; skjerm: ingen; #resultHeader, #searchHeader width: 250px; høyde: 20 piksler; grense øverste venstre-radius: 2 piksler; border-top-right-radius: 2 piksler; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; grense-høyre: 1px solid #ffffff; stilling: relativ; bakgrunnsrepetisjon: gjenta-x; bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# C2DCFD), til (#DDECFD)); bakgrunn: -webkit-lineær-gradient (topp, #DDECFD, # C2DCFD); bakgrunn: -moz-lineær-gradient (topp, #DDECFD, # C2DCFD); bakgrunn: -ms-lineær gradient (topp, #DDECFD, # C2DCFD); Bakgrunn: -O-lineær-gradient (topp, #DDECFD, # C2DCFD); tekst-align: center; font-size: 16px; tekstskygge: 0px 0px 1px # 96B0BB; #resultBox bakgrunnsfarge: rgba (247.247.247,0.7); border-rste venstre-radius: 2 piksler; border-bottom-høyre-radius: 2 piksler; grense: 1px solid #ffffff; max-høyde: 418px; min-høyde: 250 px; bredde: 250px; overløp: auto; .item0, .item1 float: left; polstring: 5px 4px 5px 4px; bredde: 242px; border-top: 1px solid #dcdcdc; .item1 bakgrunnsfarge: #FFFFFF; .clear clear: both; .olPopupCloseBox bakgrunn: url ("... /img/close.gif") no-repeat; markør: pointer; .olFramedCloudPopupContent polstring: 5px; overløp: auto; På dette tidspunktet bør siden din se slik ut:
Det er ikke mye å se på, så la oss komme inn i de gode greiene.
var $ r = $ ('# resultater'), $ rContainer = $ ('# resultContainer'), $ rBox = $ ('# resultBox'); Du vil alltid sette jQuery-objektene dine til variabler. Alltid beste praksis!
var Observasjon = funksjon (mål) _target = target; _arrObservers = []; var bindemiddel = funksjon (observatør) _arrObservers.push (observatør); ; var inform = funksjon () for (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ; return binder: binder, inform: inform ;
Dette er bare en enkel lytterfunksjon som vi har opprettet. Når vi lager arrangementet som vi vil lytte til, sender vi det objektet som vi vil høre på; Jeg har kalt dette argumentet: mål. Den inneholder to variabler: _mål - en variabel vi setter lik vår argumentasjon og _arrObservers - et tomt utvalg som vi skal bruke for å fylle med lyttere. Observasjon inneholder også to funksjoner: binder og informere.
var bindemiddel = funksjon (observatør) _arrObservers.push (observatør); ;
Funksjon binder legger til hver lytter, eller observatør til en rekke lyttere. I denne opplæringen skal vi bare skape en tilpasset hendelse, men å legge til hver lytter til en matrise lar deg tilordne flere lyttere med en funksjon.
var inform = funksjon () for (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ;
Funksjon informere brenner en melding til lytteren slik at den vet at hendelsen skjer. Til slutt, som du ser over, returnerer vi begge disse funksjonene, slik at de er tilgjengelige for bruk.
var makeGeoNamesModel = funksjon () var _results = , country = 'US', radius = 30, brukernavn = 'openlayers_tutorial', maxRows = 20; var notifySearchComplete = ny observasjon (dette); var søk = funksjon (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', data: postnummer: val, land: land, radius: radius, brukernavn: brukernavn, maxRows: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = funksjon (geoData) _results = geoData; notifySearchComplete.inform (); ; var getResults = function () return _results; ; var klart = funksjon () _results = ; ; return notifySearchComplete: notifySearchComplete, søk: søk, geoNamesResponse: geoNamesResponse, getResults: getResults, clear: clear; ;
Her har vi vår GeoNames-modell. Denne modellen håndterer oppretting, lagring og retur av verdien av vår GeoNames WebServices-forespørsel.
var _results = , country = 'US', radius = 30, brukernavn = 'openlayers_tutorial', maxRows = 20;
Dette er bare noen få variabler vi skal bruke, for det meste i vår ajax-forespørsel. For bruk av vår veiledning, skal vi bare søke i USA (beklager, jeg er partisk), men du kan endre søknaden din for å godta landskodeinngang hvis du vil. Maksimal radius vi tillater med vår gratis konto er 30 kilometer. Jeg har også satt maksimalt antall returnerte steder til 20, men du kan opp den verdien hvis du vil. string openlayers_tutorial er navnet på kontoen jeg opprettet for denne opplæringen, så endre denne strengen til brukernavnet du opprettet når du konfigurerer kontoen ovenfor. Til slutt forbereder vi modellen vår med en tom gjenstand som heter _results å bli fylt på et senere tidspunkt.
var notifySearchComplete = ny observasjon (dette); var søk = funksjon (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', data: postnummer: val, land: land, radius: radius, brukernavn: brukernavn, maxRows: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = funksjon (geoData) _results = geoData; notifySearchComplete.inform (); ;
Her har vi alle viktige webtjenester forespørsler: Søke og vår hendelsesvarsling. Siden dette er en tredje parts forespørsel, setter vi dataType til 'jsonp' og sender forespørselen våre variabler vi definerte tidligere. Argument val vil bli definert senere i vår oppfatning. Vi skal også eksplisitt sette tilbakeringingsfunksjonsnavnet - geoNamesResponse - og håndter den vellykkede forespørselen. Jeg kunne ha lagt til kode for å håndtere feilinngang, men for denne opplæringen antar vi at du skal legge inn en korrekt 5-sifret postnummer. Vi sender GeoNames postnummeret som brukeren har skrevet inn, men for dette spørsmålet kan du passere breddegrad og lengdegrad som lat og lng hvis du ville ha det. På dette tidspunktet vil vi også varsle vår lytter om at dette søket har fullført.
var getResults = function () return _results; ; var klart = funksjon () _results = ; ;
Den siste delen av modellen håndterer våre resultater når de blir bedt om dem, og tømmer også resultatobjektet når brukeren klikker på "Fjern markører" -knappen.
var makeGeoNamesFormController = funksjon () return handleSearch: function (txtVal, geoNamesModel) geoNamesModel.search (txtVal); , handleClear: funksjon (geoNamesModel) geoNamesModel.clear (); , handleResult: funksjon (geoNamesModel) testResults = geoNamesModel.getResults (); retur testResults; ; ;
Vår kontroller gjør egentlig ikke noe mer enn å få tilgang til funksjoner og returnerer variabler fra vår GeoNames-modell basert på innspill fra brukergrensesnittet. Vi returnerer tre funksjoner:
handleSearch - Dette tar verdien av brukerens innspill og geoNamesModel som argumenter, og påberoper geoNamesModel s Søke funksjon, bestått den verdien vi vil sende til GeoNames WebServices.
handleClear - Dette påkaller geoNamesModel klar fungere slik at vi kan rydde opp resultatobjektet.
handleResult - Dette påkaller geoNamesModel getResults fungere slik at vi får tilgang til resultatene av vår WFS-forespørsel.
Var makeGeoNamesFormView = funksjon (initGeoNamesModel, initOpenLayersMapModel, initGeoNamesFormController, initOpenLayersMapController) var _geoNamesModel = initGeoNamesModel, _openLayersMapModel = initOpenLayersMapModel, _geoNamesFormController = initGeoNamesFormController, _openLayersMapController = initOpenLayersMapController, $ txtSearch = $ ( '# txtSearch'), $ btnSearch = $ ( '# btnSearch '), $ btnClear = $ (' # btnClear '); $ btnSearch.on ("klikk", funksjon () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleSearch ($ txtSearch.val (), _ geoNamesModel); ); $ btnClear.on ("klikk", funksjon () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ rContainer.slideUp 500);); $ (vindu) .on ("last", funksjon () _openLayersMapController.render (_openLayersMapModel);); var showPoints = function () 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 (funksjon () showPoints (););; GeoNames-visningen definerer våre klikkhendelser og håndterer kaller kontrollfunksjonene for å manipulere vårt syn. Det fungerer tett med kontrolleren, men lar modellen få tilgang til og manipulere opp til kontrolleren.
var _geoNamesModel = initGeoNamesModel, _openLayersMapModel = initOpenLayersMapModel, _geoNamesFormController = initGeoNamesFormController, _openLayersMapController = initOpenLayersMapController, $ txtSearch = $ ('# txtSearch'), $ btnSearch = $ ('# btnSearch'), $ btnClear = $ ('# btnClear'); Alt vi gjør her er satt variabler som er lik de respektive funksjonsargumentene, og som alltid setter du jQuery-objektene til variabler.
$ btnSearch.on ("klikk", funksjon () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleSearch ($ txtSearch.val (), _ geoNamesModel); ); $ btnClear.on ("klikk", funksjon () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ rContainer.slideUp 500);); $ (vindu) .on ("last", funksjon () _openLayersMapController.render (_openLayersMapModel);); Dette er våre eneste to klikkhendelser, i tillegg til en vindusbegivenhet. Den første bindes til vår "Søk GeoNames.org" -knapp og sender verdien av tekstboksen og modellen vi vil håndtere med vår kontroller for å håndtere arbeidet. Det andre bindes til vår "Clear Markers" -knappen som vi nevnte i delen GeoNames Model. Denne hendelsen kaller rydding av resultatobjektet i GeoNames-modellen og også markørene i visningen, som vi vil adressere nedenfor. Til slutt oppdateres også vårt skjema og resultatavsnittet i vårt syn, og skjuler resultatene som området er nå tomt. Vinduet last hendelsen håndterer gjengivelse av kartet når vinduet er fullstendig lastet.
var showPoints = function () 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 (funksjon () showPoints ();); Den endelige delen av vår GeoNames-visning omhandler å ta våre resultater og manipulere både resultatvisningen og kartet. Visningen vet at den må oppdatere kartet og resultatvisningen fordi den har abonnert på GeoNames-modellen notifySearchComplete arrangement som vi kan se over. Når den hendelsen fullfører, ringer visningen til showPoints funksjonen, og den håndterer oppdateringen av resultatene div og viser markørene på kartet.
var makeOpenLayersMapModel = funksjon () var kart, senter = nye OpenLayers.LonLat (-90.3658472,38.742575), // Sentrert på Lambert St Louis International fordi jeg er forutinntatt zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers .Class (OpenLayers.Popup.FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), calculateOffset = funksjon (størrelse) returner nye OpenLayers.Pixel (-size.w / 2, -size.h / 2); , ikon = nye OpenLayers.Icon ('img / redpin.png', størrelse, null, calculateOffset); var renderMap = funksjon () var options = kontroller: [nye OpenLayers.Control.Navigation (), nye OpenLayers.Control.PanZoomBar (), nye OpenLayers.Control.KeyboardDefaults ()], enheter: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = nye OpenLayers.Map ('map', alternativer); wmslayer = nye OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = nye OpenLayers.Layer.Markers ("Zip Code Markers"); map.addLayers ([wmslayer, markører]); map.zoomTo (zoomLevel); ; var addMarker = funksjon (ll, ikon, popupClass, popupContentHTML) var markør = ny OpenLayers.Marker (ll, ikon); markers.addMarker (markør); marker.events.register ('mousedown', markør, funksjon (evt) for (var jeg = map.popups.length-1; i> = 0; i -) map.removePopup (map.popups [i] );; var popup = ny OpenLayers.Popup.FramedCloud (null, marker.lonlat, null, popupContentHTML, null, true, null); popup.closeOnMove = true; map.addPopup (popup); OpenLayers.Event.stop evt);); ; var buildMarkers = funksjon (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, funksjon (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = v .lng; markerIcon = icon.clone (); lonLatMarker = nye OpenLayers.LonLat (longit, latit); popupClass = autoSizeFramedCloud; popupContentHTML = ''+ v.placeName +', '+ v.adminCode1 + "+ v.postalCode +'
'; rHTML [y ++] = ''; rHTML [y ++] = (i + 1) + ')' + v.stednavn + ',' + 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); returner rHTML; ; var klart = funksjon () for (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (senter, zoom-nivå); ; return renderMap: renderMap, addMarker: addMarker, buildMarkers: buildMarkers, clear: clear; Her har vi vår OpenLayers-modell. Denne modellen håndterer opprettelsen av OpenLayers-kartet, våre kartmarkører for å skildre resultatsettet for GeoNames WebServices, samt å fjerne markørene fra kartet vårt.
var kart, senter = ny OpenLayers.LonLat (-90.3658472,38.742575), // Sentrert på Lambert St Louis International fordi jeg er partisk zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers.Class (OpenLayers.Popup. FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), calculateOffset = funksjon (størrelse) returner nye OpenLayers.Pixel (-size.w / 2, -size.h / 2) ; , ikon = nye OpenLayers.Icon ('img / redpin.png', størrelse, null, calculateOffset); Vi har forhåndsdefinert noen verdier for kartet vårt - zoomLevel er variabelen som vi vil sette vår første zoom på. Zoomnivået øker når du kommer nærmere og nærmere jorden. Som du sikkert kan gjette, numZoomLevels er antall zoomnivåer som dette kartet tillater. For våre push pin markører, må vi erklære størrelsen på markøren, så iconSize, mens det ikke uttrykkelig er sagt, er satt til 32, og OpenLayers forstår at denne verdien skal være i piksler. De andre elementene du ser her er OpenLayers-spesifikke. De calculateOffset forteller bare ikonet for å kompensere ikonbildet slik at bildet er sentrert på breddegrad og lengdegrad av punktet, ikke til øverst til venstre eller øverst til høyre. De OpenLayers.Size konstruktør lager en størrelse basert på ikonstørrelsen vi vil ha. Til slutt, OpenLayers.Icon konstruktør definerer ikonet som vi vil bruke som markører på kartet.
var renderMap = funksjon () var options = kontroller: [nye OpenLayers.Control.Navigation (), nye OpenLayers.Control.PanZoomBar (), nye OpenLayers.Control.KeyboardDefaults ()], enheter: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = nye OpenLayers.Map ('map', alternativer); wmslayer = nye OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = nye OpenLayers.Layer.Markers ("Zip Code Markers"); map.addLayers ([wmslayer, markører]); map.zoomTo (zoomLevel); ; Her er all viktig kode for å lage vårt kart. De OpenLayers.Map Konstruktøren tar to parametere, DOM-objektet som vil huse kartet, og alternativene, som er en valgfri objekt med egenskaper som kartet vil ha. La oss ta en titt på alternativene jeg har tatt med.
OpenLayers gir deg fleksibiliteten til å bruke flere forskjellige kilder for kartfliser.
De kontroller bare legg til grunnleggende mus- og tastaturinteraksjon med kartet. Disse legger også til zoomlinjen og retningsknappene over kartet. De enheter er i kilometer, men i denne veiledningen er dette alternativet ikke nødvendig, da vi ikke gjør noen beregninger med OpenLayers, bare GeoNames. De numZoomLevels Angir antall zoomnivåer dette kartet vil ha. De senter forteller kartet hvor du skal sitte i sentrum ved gjengivelse. De maxExtent alternativet er satt til et OpenLayers-element som kalles Bounds. Du erklærer bare en ny OpenLayers.Bounds, og vi gir de 4 parametrene - SouthWest Longitude, SouthWest Latitude, NorthEast Longitude og NorthEast Latitude. Dette gir oss det vi kaller i GIS-verdenen, en avgrensningsboks. Siden vi bare arbeider med USA i denne opplæringen, satte jeg grensen til å bare inkludere Nord-Amerika i å vise kartet. Hvis du vil vise hele verden, må du bare forlate dette alternativet. På dette tidspunktet har vi vårt kart klar. Nå kan vi begynne å legge lag til kartet.
OpenLayers gir deg fleksibiliteten til å bruke flere forskjellige kilder for kartfliser. Noen av disse inkluderer Bing Maps, Google Maps og OpenStreetMap. Du kan også bruke dine egne kartfliser hvis du har den typen oppsett. I forbindelse med denne opplæringen bruker vi de generiske OSGeo-kartfliser som OpenLayers bruker i sine egne eksempler. Vi gjør dette ved å opprette en ny OpenLayers.Layer.WMS konstruktør. WMS står for webmapping-tjenester. Vi gir den en tittel, en URL for å peke på fliser og parametrene som er spesifikke for flisens vert. Deretter skal vi opprette et markørlag ved hjelp av OpenLayers.Layer.Markers konstruktør. Alt vi trenger å gjøre på dette punktet, er å gi det et navn. Til slutt legger vi til de to lagene vi har opprettet til kartet vårt med addLayers funksjonen, og vi zoomer til riktig zoomnivå vi har definert.
var addMarker = funksjon (ll, ikon, popupClass, popupContentHTML) var markør = ny OpenLayers.Marker (ll, ikon); markers.addMarker (markør); marker.events.register ('mousedown', markør, funksjon (evt) for (var jeg = map.popups.length-1; i> = 0; i -) map.removePopup (map.popups [i] );; var popup = ny OpenLayers.Popup.FramedCloud (null, marker.lonlat, null, popupContentHTML, null, true, null); popup.closeOnMove = true; map.addPopup (popup); OpenLayers.Event.stop evt);); ; De addMarker Funksjonen tar markørinformasjonen som vi gir i neste avsnitt, og oppretter markører og popup-skyer som skal legges til kartet vårt. Vi lager først vår markør med OpenLayers.Marker konstruktør. Alt vi trenger å gjøre er å sende det til vår LonLat-variabel og ikonet vi vil bruke. Da bruker vi bare addMarker Funger med markørvariabelen som argument, og markøren vil bli lagt til kartet. For å få et popup-vindu til å fungere hvis vi klikker på markøren, registrerer vi bare en hendelse for denne markøren. Vi gjør dette ved å ringe arrangementer Egenskapen til denne markøren og bruk registrere funksjon for å binde hendelsen som vi ville i jQuery. Popupen er opprettet ved hjelp av OpenLayers.Popup.FramedCloud konstruktør, som tar syv parametre: id, lonlat, contentSize, contentHTML, anker, closeBox, closeBoxCallback. Alt vi virkelig trenger er lonlat, contentHTML, og muligheten til å lukke popupen, så alt annet kan være null. For å legge til popupen bruker vi bare funksjonen addPopup passerer popup-variabelen. Det er så enkelt.
var buildMarkers = funksjon (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, funksjon (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = v .lng; markerIcon = icon.clone (); lonLatMarker = nye OpenLayers.LonLat (longit, latit); popupClass = autoSizeFramedCloud; popupContentHTML = ''+ v.placeName +', '+ v.adminCode1 + "+ v.postalCode +'
'; rHTML [y ++] = ''; rHTML [y ++] = (i + 1) + ')' + v.stednavn + ',' + v.adminCode1 + "+ v.postalCode + ''; addMarker (lonLatMarker, markerIcon, popupClass, popupContentHTML); ); map.setCenter (newCenterLL, 12); returner rHTML; ;
'; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '
De buildMarkers funksjonen tar JSON og sløyfer gjennom resultatsettet. For enkelhets skyld antar vi at det første punktet som returneres av GeoNames WebServices-forespørselen, sannsynligvis vil være det punktet du søkte på, slik at vi gjør det til vårt nye senterpunkt og setter det til en OpenLayers.LonLat gjenstand. Vi har allerede opprettet vårt OpenLayers-ikon, så for å bruke det igjen og igjen, ringer vi til klone metode, som bare gjør en kopi av det ikonet. Resten av sløyfen skriver bare noen HTML til en matrise, som vi så i GeoNames Form View blir vant til å opprette resultat div. Å skrive flere linjer med HTML og skyve dem inn i en matrise er en rask måte å dynamisk opprette HTML uten å få tilgang til DOM igjen og igjen. På slutten av denne sløyfen vil vi påberope seg addMarker funksjonen som vi opprettet ovenfor. Når vi har opprettet våre markører og sløyfen er fullført, senterer vi oss på og zoomer inn i resultatene våre med setCenter funksjon.
var klart = funksjon () for (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (senter, zoom-nivå); ;
Denne funksjonen tar seg av å rydde trykknappene fra kartet, samt fjerne dem fra markørlaget. De ødelegge funksjonen fjerner markøren fra kartet. De removeMarker funksjonen fjerner markøren fra markørlaget. Legg merke til at vi reduserer i vår forløp i stedet for å øke som vi normalt ville. Vi gjør dette fordi vi bruker OpenLayer ødelegge og removeMarker Funksjoner, markørobjektet blir oppdatert. For eksempel, hvis vi hadde 5 markører ønsket vi å slette, og vi økte vår løkke, etter den første ødeleggelsen hadde vi 4 markører igjen. Etter 2. ødeleggelse ville vi ha 3 markører igjen. Etter den tredje ødeleggelsen ville vi ha 2 markører igjen. På det tidspunktet er imidlertid de resterende markørene i stillingene 1 og 2, slik at fjerning av den fjerde markøren ikke ville ha noen effekt fordi den posisjonen ikke eksisterer, derfor fjerner vi dem på slutten og arbeider fremover.
var makeOpenLayersMapController = funksjon () return render: function (openLayersMapModel) openLayersMapModel.renderMap (); , handleMarkers: function (openLayersMapModel, mrkr) openLayersMapModel.buildMarkers (mrkr); , handleClear: funksjon (openLayersMapModel) openLayersMapModel.clear (); ; ;
Denne kontrolleren, som med den ovenfor, gjør ikke noe mer enn tilgang til funksjoner og returnerer variabler fra modellen basert på input fra brukergrensesnittet, bare denne gangen fra vår OpenLayers-modell. Vi returnerer tre funksjoner:
gjengi - Dette gjør faktisk OpenLayers-kartet til skjermen. handleMarkers - Dette påkaller openLayersMapModel's buildMarkers-funksjonen, slik at vi kan ta vårt GeoNames WFS-resultat og lage våre trykknåler på kartet. handleClear - Dette påkaller openLayersMapModels klare funksjon, slik at vi kan rydde kartet over våre markører. Når denne kartkoden blir kjørt, bør siden din se slik ut:
Til slutt er alt vi trenger å gjøre for å instantiere våre modeller, synspunkter og contollers.
(Funksjon () var geoNamesModel = makeGeoNamesModel (); Var openLayersMapModel = makeOpenLayersMapModel (); Var geoNamesFormController = makeGeoNamesFormController (); Var openLayersMapController = makeOpenLayersMapController (); Var geoNamesFormView = makeGeoNamesFormView (geoNamesModel, openLayersMapModel, geoNamesFormController, openLayersMapController);) ( );
Først vil vi sette opp våre modeller, deretter våre kontrollører, og til slutt vår oppfatning. GeoNames-visningen passerer begge modellene og begge kontrollerne, da det er en slags supervisning, for manglende bedre term. Vi pakker dette inn i en anonym funksjon, og du er ferdig! Resultatet ditt bør se slik ut når du har søkt etter en postnummer:
Jeg håper du har alle funnet denne opplæringen informativ, men viktigst, enkel å bruke og forstå. GIS er et blomstrende felt, og som jeg har vist deg, kan du gjøre dine egne geospatiale spørringer hjemme med gratis kilde data som GeoNames.org. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene, og jeg vil gjøre mitt beste for å svare på dem!
