Share
In diesem Tutorial zeige ich Ihnen, wie Sie OpenLayers verwenden, eine einfach zu verwendende Open Source-JavaScript-Bibliothek zum Laden, Anzeigen und Rendern von Karten. Mit GeoNames.org WFS können Sie Markierungen auf Ihrer Karte anzeigen, genau wie Sie es bei Google sehen Karten. Alles was es braucht ist etwas HTML, CSS und JavaScript - das ist es!
Bevor wir etwas tun, müssen wir zuerst unseren GeoNames.org-Account einrichten. Mit GeoNames WebServices können Sie Anfragen im Wert von 30000 Kreditpunkten pro Tag machen. Dies ist ein Stundenlimit von 2000 Credits. Unterschiedliche Abfragen erfordern unterschiedliche Kreditpunkte, wobei die Abfragekosten nicht mehr als 4 kosten. Für viele kleine Websites und einfache Entwicklungstests sollte dies mehr als ausreichend sein. Sie bieten Premium-Dienste zu einem günstigen Preis an, aber heute beschäftigen wir uns mit dem kostenlosen Material. Free ist immer schön, oder??
Um ein Konto zu erstellen, rufen Sie das GeoNames.org-Login auf und richten Sie Ihr kostenloses Konto ein. Sie müssen das Konto in Ihrer E-Mail bestätigen, dies sollte jedoch recht schnell gehen. Sobald Sie bestätigt sind, können Sie loslegen.
"Es gibt über 30 verschiedene Arten von Abfragen, die Sie mit GeoNames WebServices erstellen können. Eine Liste davon finden Sie hier."
Als Nächstes müssen wir uns den OpenLayers-Quellcode und die Bilder holen. Diese finden Sie auf der OpenLayers-Homepage. Sie können entweder die ZIP-Datei oder die .tar.gz-Datei herunterladen. Für dieses Lernprogramm benötigen wir lediglich die Datei OpenLayers.js und den Ordner img. Für mehr Geschmack und Benutzerfreundlichkeit werden wir Kelvin Luck's JScrollPane und Brandon Aarons jQuery-Mausrad-Plugins einschließen, nur um unsere Ergebnisse zu verbessern und zu verschönern. Holen Sie sich die Js und Css von JScrollPane. Ich habe einige kleine Änderungen an der CSS vorgenommen, nur um den Stil zu treffen, den ich für dieses Tutorial wollte, aber stylen Sie es so, wie Sie es möchten. Holen Sie sich das Mausrad-Plugin von GitHub. Zum Schluss die neueste Version von jQuery.
"Natürlich finden Sie alle für dieses Tutorial erforderlichen Dateien im Quellcode-Download-Link oben."
Das heutige Tutorial wird ansprechen findNearbyPostalCodes. Jetzt fangen wir an, Code zu schreiben!
Erstellen Sie eine Verzeichnisstruktur für Ihre Anwendung. Ich habe meine benannt Geonames. Fügen Sie in Geonames drei zusätzliche Ordner hinzu: img, js und css. Die Bilder von OpenLayers werden im img-Ordner abgelegt, die JavaScript-Dateien von OpenLayers, JScrollPane und jQuery mousewheel, und jQuery wird in den Ordner js und das Stylesheet von JScrollPane in den Ordner css verschoben. Auch ein paar Bilder, die ich erstellt habe, und ein paar, die vom iconfinder erfasst wurden, sind in den Quelldateien zu finden. Legen Sie sie in die img Ordner auch.
Hier haben wir eine einfache Seite mit einigen HTML-Elementen. Das meiste Fleisch wird in unserem JavaScript sein, daher ist dieser Teil recht kurz. Speichern Sie diese Datei als index.html.
Openlayers / Geonames Tutorial Suche
Ergebnisse
Hier ist das CSS, das wir für dieses Tutorial erstellt haben. Nichts furchtbar bahnbrechend, nur ein bisschen Styling. Speichern Sie diese Datei als style.css in dem css Ordner, den Sie erstellt haben.
Accentsconagua
* Schriftfamilie: Helvetica; Farbe schwarz; html height: 100%; Marge: 0; Überlauf-y: scrollen; body Hintergrundfarbe: weiß; Schriftart: normales 13px arial, serifenlos; Höhe: 100%; Marge: 0; #map Hintergrund: #ccc; Höhe: 100%; Position: absolut; Breite: 100%; z-Index: 1; #searchContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; Hintergrundfarbe: rgba (247,247,247,0,5); Grenze: 1px fest #ffffff; Box-Schatten: 0 0 3px # C5C5C5; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; Höhe: 158px; Breite: 250px; Position: absolut; z-Index: 2; oben: 20px; rechts: 20px; Auffüllen: 4px 4px 4px 4px; #searchBox Hintergrundfarbe: rgba (247,247,247,0,7); Rand unten links Radius: 2px; Rahmen unten rechts: 2px; Grenze: 1px fest #ffffff; Höhe: 136px; Breite: 250px; Text ausrichten: Mitte; Zeilenhöhe: 44px; #resultContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; Hintergrundfarbe: rgba (247,247,247,0,5); Grenze: 1px fest #ffffff; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; Box-Schatten: 0 0 3px # C5C5C5; Breite: 252px; Position: absolut; z-Index: 2; oben: 208px; rechts: 20px; Auffüllen: 4px 4px 4px 4px; Anzeige: keine; #resultHeader, #searchHeader width: 250px; Höhe: 20px; Rand oben links Radius: 2px; Rand oben rechts Radius: 2px; Rahmen links: 1px fest #ffffff; border-top: 1px fest #ffffff; Rahmen rechts: 1px fest #ffffff; Position: relativ; Hintergrundwiederholung: Wiederholung-x; Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# C2DCFD) bis (#DDECFD)); Hintergrund: -webkit-linearer Gradient (oben, #DDECFD, # C2DCFD); Hintergrund: -moz-linearer Gradient (oben, #DDECFD, # C2DCFD); Hintergrund: -ms-linearer Gradient (oben, #DDECFD, # C2DCFD); Hintergrund: -o-linearer Gradient (oben, #DDECFD, # C2DCFD); Text ausrichten: Mitte; Schriftgröße: 16px; Text-Schatten: 0px 0px 1px # 96B0BB; #resultBox Hintergrundfarbe: rgba (247,247,247,0,7); Rand unten links Radius: 2px; Rahmen unten rechts: 2px; Grenze: 1px fest #ffffff; Max-Höhe: 418px; min-Höhe: 250px; Breite: 250px; Überlauf: Auto; .item0, .item1 float: left; Füllung: 5px 4px 5px 4px; Breite: 242px; border-top: 1px fest #dcdcdc; .item1 Hintergrundfarbe: #FFFFFF; .clear clear: beide; .olPopupCloseBox background: url ("… /img/close.gif") no-repeat; Cursor: Zeiger; .olFramedCloudPopupContent padding: 5px; Überlauf: Auto; Zu diesem Zeitpunkt sollte Ihre Seite ungefähr so aussehen:
Es ist nicht viel zu sehen, also kommen wir zu den guten Sachen.
var $ r = $ ('# results'), $ rContainer = $ ('# resultContainer'), $ rBox = $ ('# resultBox'); Sie möchten Ihre jQuery-Objekte immer auf Variablen setzen. Immer Best Practices!
var Beobachtung = Funktion (Ziel) _Ziel = Ziel; _arrObservers = []; var binder = Funktion (Beobachter) _arrObservers.push (Beobachter); ; var inform = function () for (var x = 0; x)<_arrObservers.length; x++) _arrObservers[x](_target); ; return binder: binder, inform: inform ;
Dies ist nur eine einfache Listener-Funktion, die wir erstellt haben. Wenn wir das Ereignis erstellen, das wir hören möchten, übergeben wir das Objekt, auf das wir hören möchten. Ich habe dieses Argument genannt: Ziel. Es enthält zwei Variablen: _Ziel - eine Variable, die wir unserem Argument und gleich setzen _arrObservers - ein leeres Array, mit dem wir die Zuhörer füllen. Die Beobachtung enthält auch zwei Funktionen: Bindemittel und informieren.
var binder = Funktion (Beobachter) _arrObservers.push (Beobachter); ;
Funktion Bindemittel fügt jeden Listener hinzu oder Beobachter zu einer Reihe von Zuhörern. In diesem Lernprogramm erstellen wir nur ein benutzerdefiniertes Ereignis. Wenn Sie jedoch jeden Listener zu einem Array hinzufügen, können Sie mehrere Listener mit einer Funktion zuweisen.
var inform = function () for (var x = 0; x)<_arrObservers.length; x++) _arrObservers[x](_target); ;
Funktion informieren Feuert eine Nachricht an den Listener ab und teilt ihm mit, dass das Ereignis auftritt. Wie Sie oben sehen, werden wir beide Funktionen zurückgeben, damit sie zur Verfügung stehen.
var makeGeoNamesModel = function () var _results = , country = 'US', radius = 30, username = 'openlayers_tutorial', maxRows = 20; var notifySearchComplete = new Beobachtung (this); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON'), Daten: Postleitzahl: val, Land: Land, Radius: Radius, Benutzername: Benutzername, maxRows: maxRows, Datentyp: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = Funktion (GeoData) _results = GeoData; notifySearchComplete.inform (); ; var getResults = function () return _results; ; var clear = Funktion () _results = ; ; return notifySearchComplete: notifySearchComplete, Suche: Suche, geoNamesResponse: geoNamesResponse, getResults: getResults, clear: clear; ;
Hier haben wir unser GeoNames-Modell. In diesem Modell wird der Wert unserer GeoNames WebServices-Anforderung erstellt, gespeichert und zurückgegeben.
var _results = , country = 'US', radius = 30, username = 'openlayers_tutorial', maxRows = 20;
Dies sind nur einige wenige Variablen, die wir verwenden werden, meistens in unserer Ajax-Anforderung. Für die Verwendung unseres Tutorials suchen wir nur in den USA (sorry, ich bin voreingenommen), aber Sie können Ihren Antrag so ändern, dass er die Eingabe des Ländercodes akzeptiert, wenn Sie möchten. Der maximale Radius, den wir mit unserem kostenlosen Konto haben dürfen, beträgt 30 Kilometer. Ich habe auch das Maximum der zurückgegebenen Standorte auf 20 festgelegt. Sie können diesen Wert jedoch auch erhöhen, wenn Sie möchten. String openlayers_tutorial Dies ist der Name des Kontos, das ich für dieses Lernprogramm eingerichtet habe. Ändern Sie daher diese Zeichenfolge in den Benutzernamen, den Sie beim Einrichten des oben angegebenen Kontos erstellt haben. Zuletzt bereiten wir unser Modell mit einem leeren Objekt vor _Ergebnisse zu einem späteren Zeitpunkt gefüllt werden.
var notifySearchComplete = new Beobachtung (this); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON'), Daten: Postleitzahl: val, Land: Land, Radius: Radius, Benutzername: Benutzername, maxRows: maxRows, Datentyp: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = Funktion (GeoData) _results = GeoData; notifySearchComplete.inform (); ;
Hier haben wir alle wichtigen Webserviceanfragen: Suche und unsere Eventbenachrichtigung. Da es sich um eine Drittanbieteranforderung handelt, setzen wir den Datentyp auf 'jsonp' und übergeben die von uns zuvor definierten Variablen. Streit val wird später in unserer Sicht definiert. Wir werden auch explizit den Namen der Rückruffunktion festlegen - geoNamesResponse - und bearbeiten Sie die erfolgreiche Anfrage. Ich hätte Code hinzufügen können, um falsche Eingaben zu verarbeiten, aber für dieses Tutorial gehen wir davon aus, dass Sie eine korrekte 5-stellige Postleitzahl eingeben. Wir übergeben GeoNames die Postleitzahl, die der Benutzer eingegeben hat, aber für diese spezielle Abfrage können Sie Breitengrad und Längengrad als angeben lat und lng Wenn du wolltest. An diesem Punkt werden wir auch unseren Hörer darüber informieren, dass diese Suche abgeschlossen ist.
var getResults = function () return _results; ; var clear = Funktion () _results = ; ;
Der letzte Teil unseres Modell-Handles gibt unsere Ergebnisse zurück, wenn Sie danach gefragt werden, und leert auch unser Ergebnisobjekt, wenn der Benutzer auf die Schaltfläche "Marker löschen" klickt.
var makeGeoNamesFormController = function () return handleSearch: function (txtVal, geoNamesModel) geoNamesModel.search (txtVal); , handleClear: function (geoNamesModel) geoNamesModel.clear (); , handleResult: function (geoNamesModel) testResults = geoNamesModel.getResults (); return testResults; ; ;
Unser Controller greift eigentlich nur auf Funktionen zu und gibt Variablen aus unserem GeoNames-Modell basierend auf den Eingaben der Benutzeroberfläche zurück. Wir geben drei Funktionen zurück:
handleSearch - Dies nimmt den Wert der Benutzereingabe und das geoNamesModel als Argumente an und ruft das geoNamesModel auf Suche Übergeben Sie den Wert, den Sie an die GeoNames-WebServices senden möchten.
handleClear - Dies ruft das geoNamesModel auf klar Funktion, damit wir unser Ergebnisobjekt löschen können.
handleResult - Dies ruft das geoNamesModel auf Ergebnisse bekommen Funktion, damit wir auf die Ergebnisse unserer WFS-Anfrage zugreifen können.
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", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleRead (). ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ txtSearch.val (""); 500);); $ (window) .on ("load", function () _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 (function ) ; Die GeoNames-Ansicht definiert unsere Klickereignisse und behandelt den Aufruf der Controller-Funktionen, um unsere Ansicht zu bearbeiten. Es arbeitet eng mit dem Controller zusammen, überlässt dem Modell jedoch Zugriff und Manipulation für den Controller.
var _geoNamesModel = initGeoNamesModel = initOpenLayersMapModel, _geoNamesFormController, den Sie einfädeln.
Hier setzen wir nur Variablen, die den jeweiligen Funktionsargumenten entsprechen, und setzen Sie Ihre jQuery-Objekte wie immer auf Variablen.
$ btnSearch.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); _geoNamesFormController.handleRead (). ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); $ txtSearch.val (""); $ txtSearch.val (""); 500);); $ (window) .on ("load", function () _openLayersMapController.render (_openLayersMapModel);); Dies sind unsere einzigen zwei Klickereignisse plus ein Fensterladeereignis. Die erste bindet sich an unsere Schaltfläche "Search GeoNames.org" und sendet den Wert des Textfelds und des Modells, mit dem wir arbeiten möchten, an unseren Controller, um die Arbeit zu erledigen. Die zweite ist an die Schaltfläche "Marker löschen" gebunden, die wir oben im Abschnitt "GeoNames-Modell" erwähnt haben. Dieses Ereignis ruft das Löschen des Ergebnisobjekts im GeoNames-Modell sowie die Markierungen in der Ansicht auf, auf die wir weiter unten eingehen. Zuletzt werden auch unser Formular und der Ergebnisbereich in unserer Ansicht aktualisiert und die Ergebnisse ausgeblendet, da der Bereich jetzt leer ist. Das Fensterladeereignis behandelt das Rendern der Karte, wenn das Fenster vollständig geladen wurde.
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 (function () showPoints ();); Der letzte Teil unserer GeoNames-Ansicht befasst sich mit der Übernahme unserer Ergebnisse und der Bearbeitung unserer Ergebnisansicht und der Karte. Die Ansicht weiß, dass sie die Karte und die Ergebnisansicht aktualisieren muss, da sie das Modell des GeoNames-Modells abonniert hat notifySearchComplete Veranstaltung, wie wir oben sehen können. Nach Abschluss dieses Ereignisses ruft die Ansicht die showPoints Funktion, und es übernimmt die Aktualisierung des Ergebnisdivits und das Anzeigen der Markierungen auf der Karte.
var makeOpenLayersMapModel = function () var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // zentriert auf Lambert St Louis International, da ich zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers bin .Class (OpenLayers.Popup.FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), berechneOffset = function (size) return new OpenLayers.Pixel (-size.w / 2, -size.h / 2); , icon = new OpenLayers.Icon ('img / redpin.png', size, null, berechneOffset); var renderMap = function () var options = steuert: [neue OpenLayers.Control.Navigation (), neue OpenLayers.Control.PanZoomBar (), neue OpenLayers.Control.KeyboardDefaults ()], Einheiten: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', Optionen); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layer: 'basic'); Marker = neue OpenLayers.Layer.Markers ("Postleitzahl-Marker"); map.addLayers ([wmslayer, Marker)); map.zoomTo (zoomLevel); ; var addMarker = Funktion (ll, Symbol, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (Marker); marker.events.register ('mousedown', marker, function (evt) für (var i = map.popups.length-1; i> = 0; i -) map.removePopup (map.popups [i]) );; 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 = Funktion (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, Funktion (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = v .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); Rückgabe von rHTML; ; var clear = function () für (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (center, zoomLevel); ; return renderMap: renderMap, addMarker: addMarker, buildMarkers: buildMarkers, clear: clear; Hier haben wir unser OpenLayers-Modell. Dieses Modell übernimmt die Erstellung der OpenLayers-Karte, unsere Kartenmarkierungen, um die Ergebnismenge von GeoNames WebServices darzustellen, und entfernt diese Markierungen von unserer Karte.
var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // zentriert auf Lambert St Louis International, weil ich voreingenommen bin zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers.Plass. FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), berechneOffset = Funktion (size) neue OpenLayers.Pixel zurückgeben (-size.w / 2, -size.h / 2) ; , icon = new OpenLayers.Icon ('img / redpin.png', size, null, berechneOffset); Wir haben einige Werte für unsere Karte vordefiniert - zoomLevel ist die Variable, auf die wir unseren anfänglichen Zoom setzen werden. Die Anzahl der Zoomstufen nimmt zu, je näher Sie der Erde kommen. Da kannst du wohl raten, numZoomLevels ist die Anzahl der Zoomstufen, die diese Karte zulässt. Für unsere Push-Pin-Marker müssen wir also die Größe des Markers angeben Symbolgröße, Obwohl dies nicht ausdrücklich gesagt wird, ist es auf 32 gesetzt, und OpenLayers versteht diesen Wert in Pixeln. Die anderen Elemente, die Sie hier sehen, sind speziell für OpenLayers. Das berechnenOffset weist das Symbol einfach an, das Symbolbild so zu verschieben, dass das Bild auf dem Längen- und Breitengrad des Punkts zentriert ist, nicht nach links oben oder rechts oben. Das OpenLayers.Size Der Konstruktor erstellt eine Größe basierend auf der gewünschten iconSize-Größe. Zuletzt die OpenLayers.Icon Der Konstruktor definiert das Symbol, das wir als Marker auf der Karte verwenden.
var renderMap = function () var options = steuert: [neue OpenLayers.Control.Navigation (), neue OpenLayers.Control.PanZoomBar (), neue OpenLayers.Control.KeyboardDefaults ()], Einheiten: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', Optionen); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layer: 'basic'); Marker = neue OpenLayers.Layer.Markers ("Postleitzahl-Marker"); map.addLayers ([wmslayer, Marker)); map.zoomTo (zoomLevel); ; Hier ist der alles wichtige Code, um unsere Karte zu erstellen. Das OpenLayers.Map Der Konstruktor nimmt zwei Parameter an, das DOM-Objekt, in dem die Karte untergebracht werden soll, und die Optionen. Hierbei handelt es sich um ein optionales Objekt mit Eigenschaften, die die Karte haben wird. Sehen wir uns die Optionen an, die ich enthalten habe.
OpenLayers gibt Ihnen die Flexibilität, mehrere verschiedene Quellen für Ihre Kartenkacheln zu verwenden.
Das Kontrollen Fügen Sie einfach grundlegende Maus- und Tastaturinteraktionen zur Karte hinzu. Diese fügen auch die Zoomleiste und die Richtungsschaltflächen oberhalb der Karte hinzu. Das Einheiten sind in Kilometern, obwohl diese Option für die Zwecke dieses Lernprogramms nicht unbedingt erforderlich ist, da wir keine Berechnungen mit OpenLayers durchführen, nur GeoNames. Das numZoomLevels Legt die Anzahl der Zoomstufen fest, die diese Karte haben wird. Das Center sagt der Karte, wo sie sich beim Rendern zentrieren soll. Das maxExtent Diese Option wird auf ein OpenLayers-Element namens Bounds gesetzt. Sie deklarieren einfach ein neues OpenLayers.Bounds, und wir geben diese 4 Parameter an - Südwestlicher Längengrad, Südwestlicher Breitengrad, Nordöstlicher Längengrad und Nordöstlicher Breitengrad. Dies gibt uns, was wir in der GIS-Welt nennen, einen Begrenzungsrahmen. Da wir uns in diesem Tutorial nur mit den Vereinigten Staaten beschäftigen, habe ich die Grenzen gesetzt, nur Nordamerika in die Anzeige der Karte einzubeziehen. Wenn Sie die ganze Welt zeigen möchten, lassen Sie diese Option einfach aus. An diesem Punkt haben wir unsere Karte fertig. Jetzt können wir der Karte Layer hinzufügen.
OpenLayers gibt Ihnen die Flexibilität, mehrere verschiedene Quellen für Ihre Kartenkacheln zu verwenden. Einige davon sind Bing Maps, Google Maps und OpenStreetMap. Sie können auch Ihre eigenen Kartenkacheln verwenden, wenn Sie diese Art von Einrichtung haben. In diesem Lernprogramm verwenden wir die generischen OSGeo-Kartenkacheln, die OpenLayers in ihren eigenen Beispielen verwendet. Wir machen dies, indem wir ein neues erstellen OpenLayers.Layer.WMS Konstrukteur. WMS steht für Web Mapping Services. Wir geben ihm einen Titel, eine URL, die auf die Kacheln und die für den Kachel-Host spezifischen Parameter verweist. Als Nächstes erstellen wir eine Markierungsebene mit der OpenLayers.Layer.Markers Konstrukteur. Alles, was wir zu diesem Zeitpunkt tun müssen, ist, ihm einen Namen zu geben. Zuletzt fügen wir diese beiden Layer, die wir erstellt haben, mit der Karte zu unserer Karte hinzu addLayers Funktion, und wir zoomen auf die entsprechende Zoomstufe, die wir definiert haben.
var addMarker = Funktion (ll, Symbol, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (Marker); marker.events.register ('mousedown', marker, function (evt) für (var i = map.popups.length-1; i> = 0; i -) map.removePopup (map.popups [i]) );; var popup = new OpenLayers.Popup.FramedCloud (null, marker.lonlat, null, popupContentHTML, null, true, null); popup.closeOnMove = true; map.addPopup (popup); OpenLayers.Event.stop ( evt);); ; Das addMarker Diese Funktion übernimmt die Markierungsinformationen, die wir im nächsten Abschnitt bereitstellen, und erstellt Markierungen und Popup-Clouds, die unserer Karte hinzugefügt werden. Zuerst machen wir unseren Marker mit OpenLayers.Marker Konstrukteur. Wir müssen nur unsere LonLat-Variable und das Symbol, das wir verwenden möchten, übergeben. Dann benutzen wir einfach die addMarker Funktion mit der Markierungsvariablen als Argument, und die Markierung wird der Karte hinzugefügt. Damit ein Popup-Fenster durch Klicken auf die Markierung funktioniert, registrieren wir nur ein Ereignis für diese Markierung. Wir machen das, indem wir das nennen Veranstaltungen Eigenschaft dieser Markierung und verwenden Sie die registrieren Funktion zum Binden des Ereignisses wie in jQuery. Das Popup wird mit erstellt OpenLayers.Popup.FramedCloud Konstruktor, der sieben Parameter akzeptiert: id, lonlat, contentSize, contentHTML, Anker, closeBox, closeBoxCallback. Alles, was wir wirklich brauchen, sind die Lonlat, contentHTML und die Möglichkeit, das Popup zu schließen, so dass alles andere Null sein kann. Um das Popup hinzuzufügen, benutzen wir einfach die Funktion addPopup Übergeben der Popup-Variablen. So einfach ist das.
var buildMarkers = Funktion (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, Funktion (i, v) if (i === 0) newCenterLL = new OpenLayers.LonLat (v.lng, v.lat); latit = v.lat; longit = v .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); Rückgabe von rHTML; ;
'; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '
Das buildMarkers Funktion nimmt den JSON und durchläuft die Ergebnismenge. Der Einfachheit halber gehen wir davon aus, dass der erste von der GeoNames WebServices-Anforderung zurückgegebene Punkt höchstwahrscheinlich der von Ihnen gesuchte Punkt ist. Deshalb legen wir diesen neuen Mittelpunkt fest und setzen diesen Wert auf einen OpenLayers.LonLat Objekt. Wir haben bereits unser OpenLayers-Symbol erstellt. Um es immer wieder zu verwenden, rufen wir das an Klon Methode, die einfach eine Kopie dieses Symbols erstellt. Der Rest der Schleife schreibt einfach etwas HTML in ein Array, das wir in der GeoNames-Formularansicht gesehen haben, um das Ergebnis div zu erstellen. Durch das Schreiben mehrerer HTML-Zeilen und das Verschieben in ein Array können Sie HTML dynamisch erstellen, ohne immer wieder auf das DOM zugreifen zu müssen. Am Ende dieser Schleife rufen wir die addMarker Funktion, die wir oben erstellt haben. Sobald wir unsere Marker erstellt haben und die Schleife abgeschlossen ist, konzentrieren wir uns auf die Ergebnisse mit dem Zoom setCenter Funktion.
var clear = function () für (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (center, zoomLevel); ;
Diese Funktion sorgt dafür, dass die Pins aus der Karte gelöscht und aus dem Marker-Layer entfernt werden. Das zerstören Funktion entfernt den Marker von der Karte. Das removeMarker Funktion entfernt den Marker aus der Marker-Ebene. Beachten Sie, dass wir in unserer for-Schleife dekrementieren und nicht wie üblich inkrementieren. Wir machen das, weil wir OpenLayer verwenden zerstören und removeMarker Funktionen wird das Markerobjekt aktualisiert. Wenn wir zum Beispiel 5 Marker hätten, die wir löschen wollten, und wir unsere Schleife nach dem ersten Zerstören inkrementieren würden, hätten wir 4 Marker übrig. Nach der zweiten Zerstörung hätten wir 3 Marker übrig. Nach der 3. Zerstörung hätten wir 2 Marker übrig. An diesem Punkt befinden sich unsere verbleibenden Marker jedoch an Position 1 und 2, sodass das Löschen des vierten Marker keine Auswirkung hat, da diese Position nicht vorhanden ist. Daher entfernen wir sie vom Ende aus und arbeiten uns vorwärts.
var makeOpenLayersMapController = function () return render: function (openLayersMapModel) openLayersMapModel.renderMap (); , handleMarkers: function (openLayersMapModel, mrkr) openLayersMapModel.buildMarkers (mrkr); , handleClear: function (openLayersMapModel) openLayersMapModel.clear (); ; ;
Dieser Controller greift wie beim obigen Befehl nur auf Funktionen zu und gibt Variablen aus dem Modell basierend auf Eingaben von der Benutzeroberfläche zurück, nur diesmal aus unserem OpenLayers-Modell. Wir geben drei Funktionen zurück:
machen - Dadurch wird die OpenLayers-Karte tatsächlich auf dem Bildschirm dargestellt. handleMarkers - Dadurch wird die buildMarkers-Funktion von openLayersMapModel aufgerufen, sodass wir unser WFS-Ergebnis für GeoNames verwenden und unsere Pins auf der Karte erstellen können. handleClear - Dadurch wird die klare Funktion von openLayersMapModel aufgerufen, sodass wir die Karte unserer Marker löschen können. Wenn dieser Kartencode ausgeführt wird, sollte Ihre Seite ungefähr so aussehen:
Als letztes müssen wir nur unsere Modelle, Ansichten und Steuerungen instanziieren.
(Function () var geoNamesModel = makeGeoNamesModel (); var openLayersMapModel = makeOp
