Share
En este tutorial, te mostraré cómo usar OpenLayers, una biblioteca de código abierto de JavaScript fácil de usar para cargar, mostrar y renderizar mapas, con GeoNames.org WFS para mostrar marcadores en tu mapa, tal como ves en Google Mapas Todo lo que se necesita es algo de HTML, CSS y JavaScript. Eso es todo.!
Antes de hacer algo, primero debemos configurar nuestra cuenta GeoNames.org. GeoNames WebServices le permite realizar solicitudes por un valor de 30000 puntos de crédito por día, un límite por hora de 2000 créditos. Las diferentes consultas requieren diferentes puntos de crédito, sin que la consulta cueste más de 4. Para muchos sitios pequeños y pruebas de desarrollo simples, esto debería ser más que suficiente. Ofrecen servicios Premium a un precio, pero hoy vamos a lidiar con las cosas gratis. Gratis siempre es bueno, ¿no es así??
Para crear su cuenta, vaya al inicio de sesión de GeoNames.org y configure su cuenta gratuita. Deberá confirmar la cuenta en su correo electrónico, pero esto debería ser bastante rápido. Una vez que está confirmado, está listo para ir.
"Hay más de 30 tipos diferentes de consultas que puedes hacer con los Servicios Web de GeoNames. Aquí puedes encontrar una lista de ellas".
A continuación, tendremos que tomar el código fuente de OpenLayers y las imágenes. Se pueden encontrar en la página de inicio de OpenLayers. Puede descargar el archivo .zip o .tar.gz. Para este tutorial, todo lo que necesitamos es el archivo OpenLayers.js y la carpeta img. Para un mejor sabor y facilidad de uso, incluiremos JScrollPane de Kelvin Luck y los complementos de rueda de jQuery de Brandon Aaron, solo para realzar y embellecer nuestros resultados. Toma los js y css de JScrollPane. Hice algunos cambios leves en el css, solo para que se ajusten al estilo que quería para este tutorial, pero al estilo que desee. Agarra el plugin de la rueda del ratón de GitHub. Por último, pero no menos importante, toma la última versión de jQuery.
"Por supuesto, todos los archivos necesarios para este tutorial se pueden encontrar en el enlace de descarga de Archivos de origen en la parte superior".
El tutorial de hoy se tratará encontrarNearbyPostalCodes. Ahora comencemos a escribir algo de código!
Continúe y cree una estructura de directorios para su aplicación. He nombrado el mio geonames. Dentro de los geonames, incluye tres carpetas adicionales: img, js y css. Las imágenes de OpenLayers irán a la carpeta img, los archivos JavaScript de OpenLayers, JScrollPane y jQuery mousewheel, y jQuery irán a la carpeta js, y la hoja de estilo de JScrollPane irán a la carpeta css. Además, en los archivos de origen se pueden encontrar algunas imágenes que he creado y un par capturado de iconfinder. Ponlos en el img carpeta también.
Aquí tenemos una página simple con algunos elementos HTML. La mayor parte de nuestra carne estará en nuestro JavaScript, por lo que esta parte es bastante corta. Guardar este archivo como index.html.
Openlayers / Geonames Tutorial Buscar
Resultados
Aquí está el CSS que hemos creado para usar en este tutorial. Nada terriblemente innovador aquí, solo un poco de estilo. Guardar este archivo como style.css en el css carpeta que creaste.
Accentsconagua
* font-family: Helvetica; de color negro; html altura: 100%; margen: 0; overflow-y: scroll; cuerpo color de fondo: blanco; fuente: normal 13px arial, sans-serif; altura: 100%; margen: 0; #map background: #ccc; altura: 100%; posición: absoluta; ancho: 100%; índice z: 1; #searchContainer border-radius: 2px; -moz-border-radius: 2px; -o-radio-borde: 2px; -webkit-border-radius: 2px; color de fondo: rgba (247,247,247,0.5); borde: 1px sólido #ffffff; cuadro de sombra: 0 0 3px # C5C5C5; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; altura: 158px; ancho: 250px; posición: absoluta; índice z: 2; superior: 20px; derecha: 20px; relleno: 4px 4px 4px 4px; #searchBox background-color: rgba (247,247,247,0.7); borde inferior-izquierdo-radio: 2px; borde inferior-derecho-radio: 2px; borde: 1px sólido #ffffff; altura: 136px; ancho: 250px; text-align: center; línea de altura: 44px; #resultContainer border-radius: 2px; -moz-border-radius: 2px; -o-radio-borde: 2px; -webkit-border-radius: 2px; color de fondo: rgba (247,247,247,0.5); borde: 1px sólido #ffffff; -moz-box-shadow: 0 0 3px # C5C5C5; -webkit-box-shadow: 0 0 3px # C5C5C5; cuadro de sombra: 0 0 3px # C5C5C5; ancho: 252px; posición: absoluta; índice z: 2; arriba: 208px; derecha: 20px; relleno: 4px 4px 4px 4px; pantalla: ninguna; #resultHeader, #searchHeader width: 250px; altura: 20px; borde superior-izquierdo-radio: 2px; borde superior-derecho-radio: 2px; borde izquierdo: 1px sólido #ffffff; borde superior: 1px sólido #ffffff; borde derecho: 1px sólido #ffffff; posición: relativa; repetición de fondo: repetir-x; fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# C2DCFD), hasta (#DDECFD)); fondo: -webkit-linear-gradient (arriba, #DDECFD, # C2DCFD); fondo: -moz-lineal-gradiente (arriba, #DDECFD, # C2DCFD); fondo: -ms-lineal-gradiente (arriba, #DDECFD, # C2DCFD); fondo: -o-lineal-gradiente (arriba, #DDECFD, # C2DCFD); text-align: center; tamaño de fuente: 16px; text-shadow: 0px 0px 1px # 96B0BB; #resultBox background-color: rgba (247,247,247,0.7); borde inferior-izquierdo-radio: 2px; borde inferior-derecho-radio: 2px; borde: 1px sólido #ffffff; altura máxima: 418px; min-height: 250px; ancho: 250px; desbordamiento: auto; .item0, .item1 float: left; relleno: 5px 4px 5px 4px; ancho: 242px; borde superior: 1px sólido #dcdcdc; .item1 color de fondo: #FFFFFF; .clear claro: ambos; .olPopupCloseBox background: url ("… /img/close.gif") no se repite; cursor: puntero; .olFramedCloudPopupContent padding: 5px; desbordamiento: auto; En este punto, tu página debería verse así:
No hay mucho que ver, así que entremos en las cosas buenas.
var $ r = $ ('# resultados'), $ rContainer = $ ('# resultContainer'), $ rBox = $ ('# resultBox'); Siempre desea establecer sus objetos jQuery a variables. Siempre mejores practicas!
var Observación = función (objetivo) _target = objetivo; _arrObservers = []; var carpeta = función (observador) _arrObservers.push (observador); ; var informa = función () para (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ; return binder: binder, inform: inform ;
Esta es solo una simple función de escucha que hemos creado. Cuando creamos el evento que queremos escuchar, le pasamos el objeto al que queremos escuchar; He llamado a este argumento: objetivo. Contiene dos variables: _objetivo - una variable que ponemos igual a nuestro argumento y _arrObservers - una matriz vacía que usaremos para rellenar con oyentes. La observación también contiene dos funciones: aglutinante y informar.
var carpeta = función (observador) _arrObservers.push (observador); ;
Función aglutinante agrega cada oyente, o observador a una gama de oyentes. En este tutorial solo vamos a crear un evento personalizado, pero agregar cada escucha a una matriz le permite asignar múltiples escuchas con una función.
var informa = función () para (var x = 0; x<_arrObservers.length; x++) _arrObservers[x](_target); ;
Función informar dispara un mensaje al oyente haciéndole saber que el evento está ocurriendo. Por último, como ve arriba, devolveremos ambas funciones para que estén disponibles para su uso.
var makeGeoNamesModel = function () var _results = , country = 'US', radio = 30, username = 'openlayers_tutorial', maxRows = 20; var notifySearchComplete = nueva observación (esto); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', datos: código postal: val, país: país, radio: radio, nombre de usuario: nombre de usuario, maxRows: maxRows, tipo de datos: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = function (geoData) _results = geoData; notifySearchComplete.inform (); ; var getResults = function () return _results; ; var clear = function () _results = ; ; return notifySearchComplete: notifySearchComplete, search: search, geoNamesResponse: geoNamesResponse, getResults: getResults, clear: clear; ;
Aquí tenemos nuestro modelo GeoNames. Este modelo se encargará de crear, almacenar y devolver el valor de nuestra solicitud de servicios web de GeoNames.
var _results = , country = 'US', radio = 30, username = 'openlayers_tutorial', maxRows = 20;
Estas son solo algunas de las variables que usaremos, principalmente en nuestra solicitud de ajax. Para el uso de nuestro tutorial, solo estaremos buscando en los Estados Unidos (lo siento, estoy sesgado), pero puede modificar su solicitud para aceptar la entrada del código de país si lo desea. El radio máximo que se nos permite con nuestra cuenta gratuita es de 30 kilómetros. También he establecido el máximo de ubicaciones devueltas en 20, aunque puede aumentar ese valor si lo desea. Cuerda openlayers_tutorial es el nombre de la cuenta que configuré para este tutorial, así que cambie esta cadena al nombre de usuario que creó cuando configuró la cuenta anterior. Por último, preparamos nuestro modelo con un objeto vacío llamado _resultados para ser llenado en un momento posterior.
var notifySearchComplete = nueva observación (esto); var search = function (val) $ .ajax (url: 'http://api.geonames.org/findNearbyPostalCodesJSON', datos: código postal: val, país: país, radio: radio, nombre de usuario: nombre de usuario, maxRows: maxRows, tipo de datos: 'jsonp', jsonpCallback: 'geoNamesResponse'); ; geoNamesResponse = function (geoData) _results = geoData; notifySearchComplete.inform (); ;
Aquí tenemos la solicitud de todos los servicios web importantes: buscar y nuestra notificación de eventos. Dado que se trata de una solicitud de un tercero, establecemos el dataType en 'jsonp' y pasamos la solicitud a nuestras variables que definimos anteriormente. Argumento val será definido más adelante en nuestra opinión. También vamos a establecer explícitamente el nombre de la función de devolución de llamada - geoNamesResponse - y manejar la solicitud exitosa. Podría haber agregado código para manejar la entrada errónea, pero para este tutorial, asumiremos que va a ingresar un código postal correcto de 5 dígitos. Estamos pasando GeoNames el código postal que el usuario ha ingresado, pero para esta consulta en particular, podría pasar la latitud y la longitud como latitud y lng si querías. En este punto, también notificaremos a nuestro interlocutor que esta búsqueda ha finalizado..
var getResults = function () return _results; ; var clear = function () _results = ; ;
La última parte de nuestro modelo se encarga de devolver nuestros resultados cuando se los solicitan, y también de vaciar nuestro objeto de resultado cuando el usuario hace clic en el botón "Borrar marcadores".
var makeGeoNamesFormController = function () return handleSearch: function (txtVal, geoNamesModel) geoNamesModel.search (txtVal); , handleClear: function (geoNamesModel) geoNamesModel.clear (); , handleResult: function (geoNamesModel) testResults = geoNamesModel.getResults (); return testResults; ; ;
Nuestro controlador realmente no hace nada más que acceder a las funciones y devolver variables de nuestro modelo de GeoNames basado en la entrada de la interfaz de usuario. Devolvemos tres funciones:
manejarBuscar - Esto toma el valor de la entrada del usuario y el geoNamesModel como argumentos, e invoca el geoNamesModel's buscar función, pasándole el valor que queremos enviar a los Servicios Web de GeoNames.
manejarClear - Esto invoca a los geoNamesModel. claro función para que podamos borrar nuestro objeto de resultado.
manejarResultar - Esto invoca a los geoNamesModel. tener resultados función para que podamos acceder a los resultados de nuestra solicitud 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.handleClearpor_poen_aspiración en cada una de las partes de la embarcación: ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel)) 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 () showPoints ();)); La Vista de GeoNames define nuestros eventos de clic y maneja las funciones del controlador para manipular nuestra vista. Funciona en estrecha colaboración con el controlador, pero deja el modelo accediendo y manipulando hasta el controlador..
var _geoNamesModel = initGeoNamesModel, _openLays
Todo lo que hacemos aquí es establecer variables iguales a los respectivos argumentos de función, y como siempre, configurar sus objetos jQuery a variables.
$ btnSearch.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClearpor_poen_aspiración en cada una de las partes de la embarcación: ); $ btnClear.on ("click", function () _geoNamesFormController.handleClear (_geoNamesModel); _openLayersMapController.handleClear (_openLayersMapModel)) 500);); $ (window) .on ("load", function () _openLayersMapController.render (_openLayersMapModel);); Estos son nuestros dos únicos eventos de clic, más un evento de carga de ventana. El primero se une a nuestro botón "Buscar GeoNames.org" y envía el valor del cuadro de texto y el modelo que queremos tratar a nuestro controlador para manejar el trabajo. El segundo se une a nuestro botón "Borrar marcadores" que mencionamos en la sección Modelo de GeoNames. Este evento llama a la eliminación del objeto de resultados en el modelo de GeoNames y también a los marcadores en la vista, que veremos a continuación. Por último, también actualiza nuestro formulario y la sección de resultados en nuestra vista, y oculta los resultados ya que esa área ahora está vacía. El evento de carga de la ventana maneja el mapa cuando la ventana se ha cargado completamente.
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 parte final de nuestra Vista de GeoNames trata de tomar nuestros resultados y manipular tanto nuestra vista de resultados como el mapa. La vista sabe que debe actualizar el mapa y la vista de resultados porque se ha suscrito a los modelos de GeoNames. notificarBuscarCompletar evento como podemos ver arriba. Al completar ese evento, la vista llama al showPoints función, y se encarga de actualizar el div de resultados y mostrar los marcadores en el mapa.
var makeOpenLayersMapModel = function () var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centrado en Lambert St Louis International porque estoy sesgado zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLizeFramedCloud = .Class (OpenLayers.Popup.FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), CalculateOffset = function (size) return new OpenLayers.Pixel (-size.w / 2, -size.h / 2); , icon = new OpenLayers.Icon ('img / redpin.png', tamaño, nulo, valor de cálculo); var renderMap = function () var options = controles: [nuevo OpenLayers.Control.Navigation (), nuevo OpenLayers.Control.PanZoomBar (), nuevo OpenLayers.Control.KeyboardDefaults ()], unidades: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', opciones); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = new OpenLayers.Layer.Markers ("Zip Code Markers"); map.addLayers ([wmslayer, marcadores]); map.zoomTo (zoomLevel); ; var addMarker = function (ll, icon, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (marcador); marker.events.register ('mousedown', marker, function (evt) for (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 = function (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, function (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); devuelve rHTML; ; var clear = function () for (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; Aquí tenemos nuestro modelo OpenLayers. Este modelo manejará la creación del mapa de OpenLayers, nuestros marcadores de mapa para representar el conjunto de resultados de GeoNames WebServices, así como la eliminación de esos marcadores de nuestro mapa.
var map, center = new OpenLayers.LonLat (-90.3658472,38.742575), // Centrado en Lambert St Louis International porque tengo sesgo zoomLevel = 6, numZoomLevels = 15, iconSize = 32, autoSizeFramedCloud = OpenLayers.Class (OpenLayers.Popup. FramedCloud, 'autoSize': true), size = new OpenLayers.Size (iconSize, iconSize), CalculateOffset = function (size) return new OpenLayers.Pixel (-size.w / 2, -size.h / 2) ; , icon = new OpenLayers.Icon ('img / redpin.png', tamaño, nulo, valor de cálculo); Hemos predefinido algunos valores para nuestro mapa. - nivel de zoom Es la variable a la que vamos a configurar nuestro zoom inicial. El número de niveles de zoom aumenta a medida que te acercas más y más a la Tierra. Como probablemente puedas adivinar, NumZoomLevels es el número de niveles de zoom que este mapa permitirá. Para nuestros marcadores de pin de empuje, debemos declarar el tamaño del marcador, por lo que tamaño de ícono, aunque no lo dice explícitamente, se establece en 32, y OpenLayers entiende que este valor está en píxeles. Los otros artículos que ves aquí son específicos de OpenLayers. los calcularOffset simplemente le dice al Icono que desplace la imagen del icono para que la imagen se centre en la latitud y longitud del punto, no en la parte superior izquierda o superior derecha. los OpenLayers.Size El constructor crea un tamaño basado en el tamaño de icono que queremos. Por último, la OpenLayers.Icon El constructor define el icono que utilizaremos como nuestros marcadores en el mapa..
var renderMap = function () var options = controles: [nuevo OpenLayers.Control.Navigation (), nuevo OpenLayers.Control.PanZoomBar (), nuevo OpenLayers.Control.KeyboardDefaults ()], unidades: "km", numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds (-170.0, 10, -60, 80), center: center; map = new OpenLayers.Map ('map', opciones); wmslayer = new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", layers: 'basic'); markers = new OpenLayers.Layer.Markers ("Zip Code Markers"); map.addLayers ([wmslayer, marcadores]); map.zoomTo (zoomLevel); ; Aquí está el código importante para crear nuestro mapa. los OpenLayers.Map el constructor toma dos parámetros, el objeto DOM que albergará el mapa y las opciones, que es un objeto opcional con propiedades que tendrá el mapa. Echemos un vistazo a las opciones que he incluido..
OpenLayers le brinda la flexibilidad de usar varias fuentes diferentes para sus mosaicos de mapas.
los controles simplemente agregue la interacción básica del mouse y el teclado con el mapa. Estos también agregan la barra de zoom y los botones de dirección sobre el mapa. los unidades están en kilómetros, aunque para los fines de este tutorial, esta opción no es realmente necesaria, ya que no estamos haciendo ningún cálculo con OpenLayers, solo GeoNames. los NumZoomLevels establece la cantidad de niveles de zoom que tendrá este mapa. los centrar le dice al mapa dónde centrarse en sí mismo al renderizar. los maxExtent La opción se establece en un elemento OpenLayers llamado Bounds. Simplemente declara un nuevo OpenLayers.Bounds, y le damos esos 4 parámetros: SouthWest Longitude, SouthWest Latitude, NorthEast Longitude y NorthEast Latitude. Esto nos da, lo que llamamos en el mundo SIG, un cuadro delimitador. Como solo tratamos con los Estados Unidos en este tutorial, establecí los límites para incluir solo a América del Norte en la visualización del mapa. Si desea mostrar el mundo entero, simplemente deje esta opción fuera. En este punto ya tenemos nuestro mapa listo. Ahora podemos empezar a añadir capas al mapa..
OpenLayers le brinda la flexibilidad de usar varias fuentes diferentes para sus mosaicos de mapas. Algunos de ellos incluyen Bing Maps, Google Maps y OpenStreetMap. También puede usar sus propios mosaicos de mapas si tiene ese tipo de configuración. Para los fines de este tutorial, usaremos los mosaicos de mapas OSGeo genéricos que OpenLayers utiliza en sus propios ejemplos. Hacemos esto creando una nueva OpenLayers.Layer.WMS constructor. WMS significa servicios de mapeo web. Le asignamos un título, una URL para señalar los mosaicos y los parámetros que son específicos para el host del mosaico. A continuación vamos a crear una capa de marcador utilizando la OpenLayers.Layer.Markers constructor. Todo lo que tenemos que hacer en este punto es darle un nombre. Por último, agregaremos estas dos capas que hemos creado a nuestro mapa con el addLayers función, y vamos a hacer zoom al nivel de zoom apropiado que hemos definido.
var addMarker = function (ll, icon, popupClass, popupContentHTML) var marker = new OpenLayers.Marker (ll, icon); markers.addMarker (marcador); marker.events.register ('mousedown', marker, function (evt) for (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);); ; los addMarker La función toma la información de marcadores que proporcionaremos en la siguiente sección y crea marcadores y nubes emergentes que se agregarán a nuestro mapa. Primero hacemos nuestro marcador con el OpenLayers.Marker constructor. Todo lo que tenemos que hacer es pasarle nuestra variable LonLat y el icono que queremos usar. Entonces simplemente usamos el addMarker Funciona con la variable de marcador como su argumento y el marcador se agregará al mapa. Para que funcione una ventana emergente si hacemos clic en el marcador, simplemente registramos un evento para este marcador. Hacemos esto llamando al eventos propiedad de este marcador y utilizar el registro Funciona para enlazar el evento como lo haríamos en jQuery. La ventana emergente se crea utilizando el OpenLayers.Popup.FramedCloud constructor, que toma siete parámetros: id, lonlat, contentSize, contentHTML, anchor, closeBox, closeBoxCallback. Todo lo que realmente necesitamos es lonlat, contentHTML y la capacidad de cerrar la ventana emergente, por lo que todo lo demás puede ser nulo. Para agregar la ventana emergente simplemente usamos la función addPopup pasando la variable emergente. Es tan simple como eso.
var buildMarkers = function (pts) var rHTML = [], y = 0; $ .each (pts.postalCodes, function (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); devuelve rHTML; ;
'; rHTML [y ++] = v.lat.toFixed (5) + ',' + v.lng.toFixed (5); rHTML [y ++] = '
los buildMarkers La función toma el JSON y pasa por el conjunto de resultados. Para simplificar, asumimos que el primer punto devuelto por la solicitud de GeoNames WebServices será probablemente el punto que buscó, por lo que hacemos que nuestro nuevo punto central, y lo configuramos en un OpenLayers.LonLat objeto. Ya hemos creado nuestro ícono de OpenLayers, así que para usarlo una y otra vez, llamaremos al clon Método, que simplemente hace una copia de ese icono. El resto del bucle simplemente escribe algo de HTML en una matriz, lo que vimos en la Vista de forma de GeoNames se usa para crear el div de resultados. Escribir múltiples líneas de HTML y colocarlas en una matriz es una forma rápida de crear HTML dinámicamente sin tener que acceder al DOM una y otra vez. Al final de este bucle, invocaremos el addMarker Función que hemos creado anteriormente. Una vez que hayamos creado nuestros marcadores y el bucle se haya completado, nos centraremos y ampliaremos nuestros resultados con el setCenter función.
var clear = function () for (var x = markers.markers.length-1; x> = 0; x--) markers.markers [x] .destroy (); markers.removeMarker (markers.markers [x]); map.setCenter (center, zoomLevel); ;
Esta función se encarga de eliminar los marcadores del mapa, así como de eliminarlos de la capa de marcadores. los destruir La función elimina el marcador del mapa. los removeMarker La función elimina el marcador de la capa de marcadores. Tenga en cuenta que estamos disminuyendo en nuestro bucle for en lugar de aumentar como lo haríamos normalmente. Hacemos esto porque al usar OpenLayer destruir y removeMarker funciones, el objeto marcador se actualiza. Por ejemplo, si tuviéramos 5 marcadores que quisiéramos eliminar e incrementamos nuestro bucle, después de la primera destrucción, tendríamos 4 marcadores restantes. Después de la segunda destrucción, nos quedarían 3 marcadores. Después de la tercera destrucción, nos quedarían 2 marcadores. En ese punto, sin embargo, nuestros marcadores restantes están en las posiciones 1 y 2, por lo que eliminar el 4º marcador no tendría ningún efecto porque esa posición no existe, por lo tanto, los eliminamos comenzando por el final y seguimos avanzando..
var makeOpenLayersMapController = function () return render: function (openLayersMapModel) openLayersMapModel.renderMap (); , handleMarkers: function (openLayersMapModel, mrkr) openLayersMapModel.buildMarkers (mrkr); , handleClear: function (openLayersMapModel) openLayersMapModel.clear (); ; ;
Este controlador, al igual que el anterior, no hace nada más que acceder a las funciones y devolver variables del modelo en función de la entrada de la interfaz de usuario, solo que esta vez de nuestro modelo de OpenLayers. Devolvemos tres funciones:
hacer - esto realmente hace que el mapa de OpenLayers aparezca en la pantalla. manejar marcadores - esto invoca la función buildMarkers de openLayersMapModel para que podamos tomar nuestro resultado de GeoNames WFS y crear nuestros marcadores en el mapa. manejarClear - Esto invoca la función clear de openLayersMapModel para que podamos borrar el mapa de nuestros marcadores.. Cuando este código de mapa se ejecute, su página debería verse así:
Por último, todo lo que tenemos que hacer es crear una instancia de nuestros modelos, vistas y controles..
(Function () var geoNamesModel = makeGeoNamesModel (); var openLayersMapModel = makeOpenLayersMapModel (); var geoNamesFormController = makeGeoNamesFormController (); var openLayersMapController = makeOpenLayersMapController (); var geoNamesFormView = makeGeoNamesFormView (geoNamesModel, openLayersMapModel, geoNamesFormController, openLayersMapController);) ( );
Primero instanciaremos nuestros modelos, luego nuestros controladores y finalmente nuestra visión. La vista GeoNames pasa ambos modelos y ambos controladores, ya que es una especie de súper vista, a falta de un término mejor. Envolvemos esto en una función anónima, ¡y listo! Su resultado debería verse como este una vez que haya buscado un código pos
