Share
Dans ce tutoriel, je vais vous montrer comment utiliser OpenLayers, une bibliothèque JavaScript open source simple à utiliser pour charger, afficher et restituer des cartes, avec GeoNames.org WFS pour afficher des marqueurs sur votre carte, comme vous le voyez sur Google. Plans. Il suffit de HTML, de CSS et de JavaScript - c'est tout!
Avant de faire quoi que ce soit, nous devons d'abord configurer notre compte GeoNames.org. Les services Web de GeoNames vous permettent d'effectuer des demandes d'une valeur de 30000 points de crédit par jour, soit une limite horaire de 2 000 crédits. Différentes requêtes requièrent différents points de crédit, aucune requête ne "coûtant" plus de 4. Pour de nombreux petits sites et de simples tests de développement, cela devrait être plus que suffisant. Ils offrent des services Premium à un prix, mais aujourd'hui, nous allons nous occuper des choses gratuites. Free est toujours agréable, n'est-ce pas?
Pour créer votre compte, allez à la connexion GeoNames.org et configurez votre compte gratuit. Vous aurez besoin de confirmer le compte dans votre email, mais cela devrait aller assez vite. Une fois que vous êtes confirmé, vous êtes prêt à partir.
"Il existe plus de 30 types de requêtes que vous pouvez effectuer avec les services Web de GeoNames. Vous pouvez en trouver une liste ici."
Nous devrons ensuite récupérer le code source et les images OpenLayers. Ceux-ci peuvent être trouvés sur la page d'accueil OpenLayers. Vous pouvez télécharger le fichier .zip ou .tar.gz. Pour ce tutoriel, nous avons uniquement besoin du fichier OpenLayers.js et du dossier img. Pour plus de saveur et de convivialité, nous inclurons JScrollPane de Kelvin Luck, et les plugins jQuery de Brandon Aaron mousewheel, juste pour améliorer et embellir notre résultat div. Prenez le js et le css de JScrollPane. J'ai légèrement modifié le fichier CSS, juste pour correspondre au style que je souhaitais pour ce didacticiel, mais donnez-lui le style que vous souhaitez. Prenez le plugin Mousewheel de GitHub. Dernier point, mais non le moindre, récupérez la dernière version de jQuery.
"Bien entendu, tous les fichiers nécessaires à ce didacticiel se trouvent dans le lien de téléchargement des fichiers sources en haut."
Le tutoriel d'aujourd'hui abordera findNearbyPostalCodes. Commençons maintenant à écrire du code!
Allez-y et créez une structure de répertoire pour votre application. J'ai nommé le mien geonames. Dans geonames, incluez trois dossiers supplémentaires: img, js et css. Les images d'OpenLayers seront placées dans le dossier img, les fichiers JavaScript d'OpenLayers, JScrollPane et jQuery mousewheel, et jQuery dans le dossier js et la feuille de style de JScrollPane dans le dossier css. En outre, quelques images que j'ai créées et quelques images capturées dans iconfinder se trouvent dans les fichiers source. Mettez les dans le img dossier aussi bien.
Nous avons ici une simple page avec des éléments HTML. La plupart de notre viande sera dans notre JavaScript, donc cette partie est assez courte. Enregistrer ce fichier sous index.html.
Tutoriel des Openlayers / Geonames Chercher
Résultats
Voici le CSS que nous avons créé pour être utilisé dans ce tutoriel. Rien de vraiment révolutionnaire ici, juste un peu de style. Enregistrer ce fichier sous style.css dans le css dossier que vous avez créé.
Accentsconagua
* font-family: Helvetica; la couleur noire; html height: 100%; marge: 0; débordement-y: faire défiler; body background-color: white; police: normale 13px arial, sans-serif; hauteur: 100%; marge: 0; #map background: #ccc; hauteur: 100%; position: absolue; largeur: 100%; z-index: 1; #searchContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; couleur de fond: rgba (247,247,247,0.5); bordure: 1px solide #ffffff; box-shadow: 0 0 3px # C5C5C5; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; hauteur: 158px; largeur: 250px; position: absolue; z-index: 2; en haut: 20px; à droite: 20px; remplissage: 4px 4px 4px 4px; #searchBox background-color: rgba (247,247,247,0.7); bordure-bas-gauche-rayon: 2px; border-bottom-right-radius: 2px; bordure: 1px solide #ffffff; hauteur: 136px; largeur: 250px; text-align: center; hauteur de ligne: 44px; #resultContainer border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px; couleur de fond: rgba (247,247,247,0.5); bordure: 1px solide #ffffff; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; box-shadow: 0 0 3px # C5C5C5; largeur: 252px; position: absolue; z-index: 2; en haut: 208 pixels; à droite: 20px; remplissage: 4px 4px 4px 4px; affichage: aucun; #resultHeader, #searchHeader width: 250px; hauteur: 20px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-left: 1px solid #ffffff; border-top: 1px solide #ffffff; border-right: 1px solid #ffffff; position: relative; répéter en arrière-plan: répéter-x; arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# C2DCFD) à (#DDECFD)); arrière-plan: -webkit-linear-gradient (en haut, #DDECFD, # C2DCFD); arrière-plan: -moz-linear-gradient (top, #DDECFD, # C2DCFD); arrière-plan: -ms-linear-gradient (top, #DDECFD, # C2DCFD); arrière-plan: -o-linear-gradient (top, #DDECFD, # C2DCFD); text-align: center; taille de police: 16px; ombre du texte: 0px 0px 1px # 96B0BB; #resultBox background-color: rgba (247,247,247,0.7); bordure-bas-gauche-rayon: 2px; border-bottom-right-radius: 2px; bordure: 1px solide #ffffff; hauteur maximale: 418px; hauteur minimale: 250 px; largeur: 250px; débordement: auto; .item0, .item1 float: left; remplissage: 5px 4px 5px 4px; largeur: 242px; border-top: 1px solid #dcdcdc; .item1 background-color: #FFFFFF; .clear clear: les deux; .olPopupCloseBox background: url ("… /img/close.gif") no-repeat; curseur: pointeur; .olFramedCloudPopupContent padding: 5px; débordement: auto; À ce stade, votre page devrait ressembler à ceci:
Ce n'est pas beaucoup à regarder, alors passons aux choses intéressantes.
var $ r = $ ('# résultats'), $ rContainer = $ ('# resultContainer'), $ rBox = $ ('# resultBox'); Vous voulez toujours définir vos objets jQuery sur des variables. Toujours les meilleures pratiques!
var Observation = fonction (cible) _target = cible; _arrObservers = []; var binder = function (observateur) _arrObservers.push (observateur); ; var inform = function () for (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ; return binder: binder, inform: inform ;
Ceci est juste une fonction d'écoute simple que nous avons créée. Lorsque nous créons l'événement que nous voulons écouter, nous lui transmettons l'objet que nous voulons écouter. J'ai appelé cet argument: cible. Il contient deux variables: _cible - une variable que nous avons définie égale à notre argument et _arrObservers - un tableau vide que nous utiliserons pour peupler les écouteurs. L'observation contient également deux fonctions: classeur et informer.
var binder = function (observateur) _arrObservers.push (observateur); ;
Une fonction classeur ajoute chaque auditeur, ou observateur à un éventail d'auditeurs. Dans ce tutoriel, nous allons créer un seul événement personnalisé, mais l'ajout de chaque écouteur à un tableau vous permet d'affecter plusieurs écouteurs à une fonction..
var inform = function () for (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ;
Une fonction informer envoie un message à l'auditeur pour lui faire savoir que l'événement se produit. Enfin, comme vous le voyez ci-dessus, nous allons renvoyer ces deux fonctions afin qu'elles soient disponibles.
var makeGeoNamesModel = function () var _results = , pays = 'US', rayon = 30, nom d'utilisateur = 'openlayers_tutorial', maxRows = 20; var notifySearchComplete = nouvelle observation (this); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', données: code postal: val, pays: pays, rayon: radius, nom d'utilisateur: nom d'utilisateur, nom d'utilisateur, maxRows: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = function (geoData) _results = geoData; notifySearchComplete.inform (); ; var getResults = function () return _results; ; var clear = function () _results = ; ; return notifySearchComplete: notifySearchComplete, recherche: recherche, geoNamesResponse: geoNamesResponse, getResults: getResults, clear: clear; ;
Ici nous avons notre modèle GeoNames. Ce modèle gérera la création, le stockage et le renvoi de la valeur de notre demande WebServices GeoNames..
var _résultats = , pays = 'US', rayon = 30, nom d'utilisateur = 'openlayers_tutorial', maxRows = 20;
Ce ne sont que quelques variables que nous allons utiliser, principalement dans notre requête ajax. Pour l’utilisation de notre didacticiel, nous ne chercherons que les États-Unis (désolé, je suis partial), mais vous pouvez modifier votre application pour accepter la saisie du code de pays si vous le souhaitez. Le rayon maximum nous est autorisé avec notre compte gratuit est de 30 kilomètres. J'ai également défini le nombre maximal d'emplacements renvoyés à 20, bien que vous puissiez augmenter cette valeur si vous le souhaitez. Chaîne openlayers_tutorial est le nom du compte que j'ai configuré pour ce tutoriel, remplacez cette chaîne par le nom d'utilisateur que vous avez créé lors de la configuration du compte ci-dessus. Enfin, nous préparons notre modèle avec un objet vide appelé _résultats à remplir plus tard.
var notifySearchComplete = nouvelle observation (this); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', données: code postal: val, pays: pays, rayon: radius, nom d'utilisateur: nom d'utilisateur, nom d'utilisateur, maxRows: maxRows, dataType: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = function (geoData) _results = geoData; notifySearchComplete.inform (); ;
Nous avons ici la demande de services Web très importante: chercher et notre notification d'événement. Puisqu'il s'agit d'une demande tierce, nous avons défini le type de données sur jsonp et nous transmettons à la demande nos variables définies précédemment. Argument val sera défini plus tard à notre avis. Nous allons également définir explicitement le nom de la fonction de rappel - geoNamesResponse - et gérer la demande avec succès. J'aurais pu ajouter du code pour gérer les entrées erronées, mais pour ce tutoriel, nous supposerons que vous allez saisir un code postal à 5 chiffres correct. Nous transmettons à GeoNames le code postal saisi par l'utilisateur, mais pour cette requête particulière, vous pouvez indiquer la latitude et la longitude. lat et lng si tu voulais À ce stade, nous informerons également notre auditeur que cette recherche est terminée..
var getResults = function () return _results; ; var clear = function () _results = ; ;
La dernière partie de notre modèle gère le renvoi de nos résultats lorsque demandé, ainsi que le vidage de notre objet de résultat lorsque l'utilisateur clique sur le bouton "Effacer les marqueurs"..
var makeGeoNamesFormController = function () return handleSearch: function (txtVal, geoNamesModel) geoNamesModel.search (txtVal); , handleClear: function (geoNamesModel) geoNamesModel.clear (); , handleResult: function (geoNamesModel) testResults = geoNamesModel.getResults (); renvoyer testResults; ; ;
Notre contrôleur ne fait rien d’autre qu’accéder aux fonctions et renvoie les variables de notre modèle GeoNames en fonction des entrées de l’interface utilisateur. Nous retournons trois fonctions:
handleSearch - cela prend la valeur de l'entrée de l'utilisateur et du geoNamesModel en tant qu'arguments, et appelle le geoNamesModel chercher fonction, en transmettant la valeur que nous voulons envoyer aux WebServices GeoNames.
handleClear - cela appelle le geoNamesModel de clair fonctionner afin que nous puissions effacer notre objet de résultat.
handleResult - cela appelle le geoNamesModel de Obtenir des résultats fonction afin que nous puissions accéder aux résultats de notre demande 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", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handle ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); 500);); $ (fenêtre) .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 () showPoints ();); La vue GeoNames définit nos événements de clic et gère l’appel des fonctions du contrôleur pour manipuler notre vue. Il travaille en étroite collaboration avec le contrôleur, mais laisse le modèle accéder et manipuler jusqu'au contrôleur..
varit_signalou
Tout ce que nous faisons ici est de définir des variables égales aux arguments de la fonction respective et, comme toujours, définissez vos objets jQuery sur des variables.
$ btnSearch.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handle ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel); $ r.html (""); 500);); $ (fenêtre) .on ("load", function () _openLayersMapController.render (_openLayersMapModel);); Ce sont nos deux seuls événements de clic, plus un événement de chargement de fenêtre. La première se lie à notre bouton "Rechercher dans GéoNomités.org" et envoie la valeur de la zone de texte et du modèle que nous voulons traiter à notre contrôleur pour gérer le travail. La seconde est liée à notre bouton "Effacer les marqueurs" mentionné dans la section Modèle de GeoNames. Cet événement appelle la suppression de l'objet de résultats dans le modèle GeoNames ainsi que des marqueurs dans la vue, que nous allons aborder ci-dessous. Enfin, il met également à jour notre formulaire et la section des résultats de notre vue, et masque les résultats car cette zone est maintenant vide. L'événement de chargement de fenêtre gère le rendu de la carte lorsque la fenêtre est complètement chargée.
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 ();); La dernière partie de notre vue GéoNames traite de la prise en compte de nos résultats et de la manipulation de notre vue des résultats et de la carte. La vue sait qu'elle doit mettre à jour la carte et la vue des résultats car elle s'est abonnée au modèle de GeoNames. notifySearchComplete comme nous pouvons le voir ci-dessus. Une fois cet événement terminé, la vue appelle le showPoints fonction, et il gère la mise à jour des résultats div et l'affichage des marqueurs sur la carte.
var makeOpenLayersMapModel = function () var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centré sur Lambert St Louis International car je suis biaisé zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud .Class (OpenLayers.Popup.FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), CalculateOffset = function (size) renvoie le nouvel OpenLayers.Pixel (-size.w / 2, -taille.h / 2); , icon = new OpenLayers.Icon ('img / redpin.png', taille, null, CalculateOffset); var renderMap = function () var options = contrôles: [new OpenLayers.Control.Navigation (), new OpenLayers.Control.PanZoomBar (), new OpenLayers.Control.KeyboardDefaults ()], unités: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', options); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = new OpenLayers.Layer.Markers ("Marqueurs de code postal"); map.addLayers ([wmslayer, markers]); map.zoomTo (zoomLevel); ; var addMarker = function (ll, icône, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icône); markers.addMarker (marqueur); marker.events.register ('mousedown', marqueur, fonction (evt) pour (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 = fonction (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, fonction (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); retourne rHTML; ; var clear = function () pour (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; Nous avons ici notre modèle OpenLayers. Ce modèle gérera la création de la carte OpenLayers, nos marqueurs de carte illustrant l’ensemble de résultats des services Web GeoNames, ainsi que le nettoyage de ces marqueurs de notre carte..
var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centré sur Lambert St Louis International car je suis biaisé zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers.Class (OpenLayers.Popup). FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), CalculateOffset = function (size) retourne un nouvel OpenLayers.Pixel (-size.w / 2, -size.h / 2) ; , icon = new OpenLayers.Icon ('img / redpin.png', taille, null, CalculateOffset); Nous avons prédéfini des valeurs pour notre carte - le niveau de zoom est la variable sur laquelle nous allons définir notre zoom initial. Le nombre de niveaux de zoom augmente à mesure que vous vous rapprochez de la Terre. Comme vous pouvez probablement deviner, numZoomLevels est le nombre de niveaux de zoom autorisés par cette carte. Pour nos marqueurs à punaises, nous devons déclarer la taille du marqueur, donc iconSize, bien que cela ne soit pas explicitement dit, la valeur est 32 et OpenLayers comprend que cette valeur est en pixels. Les autres éléments que vous voyez ici sont spécifiques à OpenLayers. le calculer le décalage Indique simplement à l’icône de décaler l’image de l’icône afin que l’image soit centrée sur la latitude et la longitude du point, et non sur le haut à gauche ou sur le haut à droite. le OpenLayers.Size constructeur crée une taille basée sur la taille iconSize souhaitée. Enfin, le OpenLayers.Icon constructeur définit l'icône que nous utiliserons comme nos marqueurs sur la carte.
var renderMap = function () var options = contrôles: [new OpenLayers.Control.Navigation (), new OpenLayers.Control.PanZoomBar (), new OpenLayers.Control.KeyboardDefaults ()], unités: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', options); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = new OpenLayers.Layer.Markers ("Marqueurs de code postal"); map.addLayers ([wmslayer, markers]); map.zoomTo (zoomLevel); ; Voici le code tout important pour créer notre carte. le OpenLayers.Map constructeur prend deux paramètres, l'objet DOM qui hébergera la carte et les options, qui sont des objets facultatifs avec les propriétés que la carte aura. Jetons un coup d'oeil aux options que j'ai incluses.
OpenLayers vous donne la possibilité d'utiliser plusieurs sources différentes pour vos tuiles de carte..
le les contrôles ajoutez simplement une interaction basique de la souris et du clavier avec la carte. Ceux-ci ajoutent également la barre de zoom et les boutons directionnels au-dessus de la carte. le des unités sont en kilomètres, bien que, pour les besoins de ce tutoriel, cette option ne soit pas vraiment nécessaire, car nous ne faisons aucun calcul avec OpenLayers, mais uniquement des noms géographiques. le numZoomLevels définit le nombre de niveaux de zoom que cette carte aura. le centre indique à la carte où se centrer sur le rendu. le maxExtent L'option est définie sur un élément OpenLayers appelé Bounds. Vous déclarez simplement un nouveau OpenLayers.Bounds, et nous vous donnons 4 paramètres: longitude sud-ouest, latitude sud-ouest, longitude nord-est et latitude nord-est. Cela nous donne, ce que nous appelons dans le monde des SIG, une boîte englobante. Étant donné que nous ne traitons qu'avec les États-Unis dans ce didacticiel, j'ai défini les limites pour inclure uniquement l'Amérique du Nord dans l'affichage de la carte. Si vous voulez montrer au monde entier, laissez simplement cette option. À ce stade, nous avons notre carte prête. Maintenant, nous pouvons commencer à ajouter des couches à la carte.
OpenLayers vous donne la possibilité d'utiliser plusieurs sources différentes pour vos mosaïques de carte. Certains d'entre eux incluent Bing Maps, Google Maps et OpenStreetMap. Vous pouvez également utiliser vos propres tuiles de carte si vous disposez de ce type de configuration. Pour les besoins de ce didacticiel, nous utiliserons les mosaïques de carte génériques OSGeo utilisées par OpenLayers dans leurs propres exemples. Nous faisons cela en créant un nouveau OpenLayers.Layer.WMS constructeur. WMS signifie Services de cartographie Web. Nous lui donnons un titre, une URL pour pointer sur les tuiles et les paramètres spécifiques à l'hôte de tuiles. Ensuite, nous allons créer une couche de marqueur en utilisant le OpenLayers.Layer.Markers constructeur. Tout ce que nous avons à faire à ce stade est de lui donner un nom. Enfin, nous allons ajouter ces deux couches que nous avons créées à notre carte avec le addLayers fonction, et nous allons zoomer sur le niveau de zoom approprié que nous avons défini.
var addMarker = function (ll, icône, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icône); markers.addMarker (marqueur); marker.events.register ('mousedown', marqueur, fonction (evt) pour (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);); ; le addMarker function prend les informations de marqueur que nous allons fournir dans la section suivante et crée des marqueurs et des nuages popup à ajouter à notre carte. Nous faisons d’abord notre marqueur avec le OpenLayers.Marker constructeur. Tout ce que nous avons à faire, c'est de lui transmettre notre variable LonLat et l'icône que nous voulons utiliser. Ensuite, nous utilisons simplement le addMarker fonction avec la variable marqueur comme argument et le marqueur sera ajouté à la carte. Afin de faire fonctionner une fenêtre contextuelle si nous cliquons sur le marqueur, nous enregistrons simplement un événement pour ce marqueur. Nous faisons cela en appelant le événements propriété de ce marqueur et utiliser le registre fonction pour lier l'événement comme nous le ferions dans jQuery. Le popup est créé en utilisant le OpenLayers.Popup.FramedCloud constructeur, qui prend sept paramètres: id, lonlat, contentSize, contentHTML, ancre, closeBox, closeBoxCallback. Tout ce dont nous avons besoin, c’est Lonlat, contentHTML et la possibilité de fermer la fenêtre contextuelle. Tout le reste peut donc être null. Pour ajouter le popup nous utilisons simplement la fonction addPopup passer la variable popup. C'est aussi simple que ça.
var buildMarkers = fonction (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, fonction (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); retourne rHTML; ;
'; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '
le buildMarkers function prend le JSON et parcourt le jeu de résultats. Pour des raisons de simplicité, nous supposons que le premier point renvoyé par la demande WebServices de GeoNames sera probablement le point recherché. Nous en avons donc défini le nouveau point central. OpenLayers.LonLat objet. Nous avons déjà créé notre icône OpenLayers, alors pour l'utiliser encore et encore, nous appellerons le cloner méthode, qui fait simplement une copie de cette icône. Le reste de la boucle écrit simplement du code HTML dans un tableau, ce que nous avons vu dans la vue formulaire de GeoNames s’utilise pour créer le résultat div. Écrire plusieurs lignes de HTML et les insérer dans un tableau est un moyen rapide de créer dynamiquement du HTML sans avoir à accéder au DOM encore et encore. A la fin de cette boucle, nous invoquerons le addMarker fonction que nous avons créée ci-dessus. Une fois que nous avons créé nos marqueurs et que la boucle est terminée, nous allons nous centrer sur nos résultats et les agrandir. setCenter une fonction.
var clear = function () pour (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (center, zoomLevel); ;
Cette fonction permet de supprimer les punaises de la carte et de les supprimer du calque des marqueurs. le détruire La fonction supprime le marqueur de la carte. le enleverMarker La fonction supprime le marqueur de la couche de marqueurs. Notez que nous décrémentons notre boucle for au lieu d’augmenter comme nous le ferions normalement. Nous faisons cela parce que nous utilisons OpenLayer détruire et enleverMarker fonctions, l'objet marqueur est mis à jour. Par exemple, si nous voulions supprimer 5 marqueurs et que nous incrémentions notre boucle, après la première destruction, il resterait 4 marqueurs. Après la deuxième destruction, il nous resterait 3 marqueurs. Après la 3ème destruction, il nous resterait 2 marqueurs. À ce stade, cependant, nos marqueurs restants se trouvent aux positions 1 et 2. Par conséquent, la suppression du 4ème marqueur n’aurait aucun effet, car cette position n’existerait pas. Par conséquent, nous les supprimons à partir de la fin et progressons.
var makeOpenLayersMapController = function () return render: function (openLayersMapModel) openLayersMapModel.renderMap (); , handleMarkers: function (openLayersMapModel, mrkr) openLayersMapModel.buildMarkers (mrkr); , handleClear: function (openLayersMapModel) openLayersMapModel.clear (); ; ;
Comme dans le cas précédent, ce contrôleur ne fait qu'accéder aux fonctions et renvoie les variables du modèle en fonction des entrées de l'interface utilisateur, mais cette fois-ci de notre modèle OpenLayers. Nous retournons trois fonctions:
rendre - cela rend en fait la carte OpenLayers à l'écran. handleMarkers - cela appelle la fonction buildMarkers de openLayersMapModel afin que nous puissions prendre notre résultat WFS de GeoNames et créer nos punaises sur la carte.. handleClear - cela appelle la fonction clear de openLayersMapModel afin que nous puissions effacer la carte de nos marqueurs. Lorsque ce code de carte est exécuté, votre page doit ressembler à ceci:
Enfin, tout ce que nous avons à faire est d’instancier nos modèles, nos vues et nos contrôleurs..
(Function () var geoNamesModel = makeGeoNamesModel (); var openLayersMapModel = makeOpenLayersMapModel (); var geoNamesFormController = makeGeoNamesFormController (); var openLayersMapController = makeOp
