Angular-google-maps: Adición de tipos de mapas de imágenes

Creado en 15 may. 2016  ·  35Comentarios  ·  Fuente: SebastianM/angular-google-maps

Hola

Quiero usar mosaicos personalizados en Google Maps como este ejemplo: https://developers.google.com/maps/documentation/javascript/examples/maptype-image

Intenté hacer una nueva directiva como la siguiente:
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

Solo quería verificar si este era el enfoque correcto donde todas las opciones estaban contenidas en el componente o debería ser más detallado tener un atributo para cada propiedad.

O dado que esto no es realmente un componente visual, debería ser solo un servicio que se pasa al componente. (así configurado a través del código solo sin elementos html)

¿Hay algún consejo sobre qué enfoque se perfecciona?

Gracias
Carlos

stale feature-request

Comentario más útil

¿Esta función está actualizada en agm-maps?

Todos 35 comentarios

Hola Carl,

Estoy tratando de hacer algo similar, cargar algunas superposiciones de WMS personalizadas servidas desde un clúster de MapServer externo, pero estoy atascado porque no sé cómo obtener una referencia a la instancia real de googleMap para agregar mis superposiciones en overlayMapTypes colección).

Creo que debe haber una forma de acceder a la instancia de mapa original de google.map, exponiéndola a través de GoogleMapsAPIWrapper.

Este es mi enfoque (hasta ahora)... en el constructor de MyComponent.ts

`var overlayMap = nulo;

    // Getting a handle on the GoogleMaps api namespace
    if ((<any>window).google || (<any>window).google.maps) {
        const gm = (<any>window).google.maps;

        if (layers.length > 0) {
            var overlayMapOptions = {
                getTileUrl(coord, zoom) {
                    var url = this.loadBalanceWms() + "/mapserver.exe?Map=../mapfile/xxx.map";
                    url += "&mode=tile";
                    url += "&tile=" + coord.x + "+" + coord.y + "+" + zoom;
                    url += "&tilemode=gmap";
                    url += "&layers=" + layers; //WMS layers
                    url += "&WIDTH=256";
                    url += "&HEIGHT=256";
                    return url;

                },
                tileSize: new gm.Size(256, 256),
                isPng: true,
                name: "WMSOverlay"
            };
            overlayMap = new gm.ImageMapType(overlayMapOptions);

            // Breaks here
            this._mapsWrapper.getMap()
                .then(a => {
                        (<any>a).overlayMapTypes.push(overlayMap);
                    },
                    f => {
                        window.console.log(f);
                    });

        }

    };`

@anaratz ¿Está funcionando lo que has hecho? Para crear un mapa personalizado en mosaico

No, no funciona...
... porque la colección overlayMapTypes no existe en la interfaz mapTypes.GoogleMap, ni puedo encontrar una forma de acceder a la instancia subyacente de google.maps.Map

@anaratz , ¿entonces no hay solución para esto todavía?

No aún no

@anaratz Lo tengo funcionando, pero solo estaba haciendo una pregunta al comienzo de este problema sobre cómo estructurar mi código, luego haré una PR, ¿debería hacer una PR y ver cómo va?

@ carl09 , ¿puede mostrarnos cómo lo solucionó?

@ carl09 sí, por favor Carl.

Hola @smgjreinieren , @anaratz actualicé mi PR y creé una demostración

http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

Relaciones públicas: https://github.com/SebastianM/angular2-google-maps/pull/345

Cualquier comentario sería genial

@ carl09 ¿también lo hiciste en mecanografiado?

@smgjreinieren Sí, todo está hecho en tipo script

@ carl09 Ohhhh ahora veo lo siento! ¡Buen trabajo! Gracias

Tengo problemas con la tarea " clang:check ", solo voy a intentar actualizar el nodo de v4 a v6 y ver si lo soluciona, te hace sentir muy inseguro al enviar cambios

@ carl09 ¿Pero no hay un tipo de mapa personalizado?

@smgjreinieren estaba usando "Open Street Maps" en el plunker para mostrar los cambios, ¿no te funciona o no es lo que querías decir?

Como este ejemplo: https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

Acabo de ver tu otra pregunta, así que entiendo lo que quieres decir ahora.

@ carl09 Quiero establecer una imagen propia como tipo de mapa, es "Open Street Maps" una imagen que crea un tipo de mapa personalizado

@smgjreinieren , ¿tiene una imagen geocodificada? o es sólo un archivo de imagen estándar?

puede usar una herramienta como http://www.qgis.org/en/site/ que y geocodificar imágenes, y también crear mosaicos para que pueda usarlos para Google Maps

@ carl09 ¡ Hmm, parece que no puedo usarlo! ¿Puedes tal vez convertir la imagen para mí?

¿Y por qué su configuración básica no reconoce el MapTypeId de 'angular2-google-maps/core'? Probablemente porque no tiene núcleo, veo, pero ¿cómo lo importo desde su configuración: https://github.com/carl09/angular2-google-maps-example

Hola, @smgjreinieren , actualicé mi código de muestra en ese repositorio si quieres actualizarlo.
que editor estas usando para editar? estoy usando VS Code y parece saber las referencias si eso ayuda

@carl09 ¡Gracias amigo! ¡Pero todavía no puedo hacer que qgis funcione para mac! ¿Podría tal vez enviarle la imagen, es solo una pequeña parte del mapa mundial, también es posible?

Me gusta esto: http://postimg.org/image/6okpwebsb/

@ carl09 ¿es posible usar la imagen de la carpeta local? en lugar de en línea

Hola

Sí, puedes alojarlos en tu instancia de nodo, al igual que alojas tus archivos css y js, pero supongo que también podrías usar file:// y señalarlo localmente, pero no estoy seguro de qué tan bien funcionaría.

¿Es posible deshabilitar DefaultUI en el constructor? Porque no lo está reconociendo así:

constructor(){ this.imageMapOptions = { getTileUrl: (coord: ImageMapTypeCoord, zoom: number) => { return http://www.sylvanreinieren.com/tiles/ ${zoom}/${coord.x}/${coord.y}.png }, tileSize: { height: 256, width: 256 }, maxZoom: 16, minZoom: 12, radius: 1738000, name: 'linZ', disableDefaultUI: true, alt: 'LINZ Topo Maps' }; }

¿Algún progreso en esta función? Empecé a mirar angular2-google-maps hace un par de días y parece que resolverá lo que quiero agregar en mi aplicación, pero realmente necesito reemplazar los mapas de Google Maps con algunos mapas más detallados del noruego " Kartverket".

@ carl09 perdón por la respuesta tardía... hay mucho que hacer actualmente. Para ser consistente con los otros elementos, debemos usar atributos separados a los que se pueda vincular, de modo que no haya [opciones] únicas. ¿Estas bien con eso?

+1 golpe, me encantaría usar esta función

¿Se ha trasladado esta función de capa WMS personalizada a la nueva AGM?

Entonces, ¿no hay forma de obtener una imagen de una URL y mostrarla en el mapa?

@sneckelmann hemos probado mucho, pero al final ahora usamos svgs codificados en base para los marcadores... no es la mejor solución, pero funciona

¿Esta función está actualizada en agm-maps?

@SebastianM
Al igual que este plunkr
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

¿Se implementan las superposiciones de mapas en AGM?

@ carl09 cuando reemplacé openstreetmap con la API de openweathermap, el mosaico estaba reemplazando al mosaico del mapa. ¿Podemos transformar esos mosaicos?

Quería implementar ese tipo de cosas con AGM

https://jsfiddle.net/601oqwq2/221/

@SebastianM , la función está pendiente desde hace mucho tiempo, ¿podemos tener alguna idea sobre cómo hacer referencia a la instancia interna del mapa de Google, para que podamos hacer al menos alguna solución hasta que la función reciba una actualización de su parte?

Encontré algo en el #1423, déjame también pensar algo ;P

@SebastianM
Una solución alternativa para el escenario anterior

https://github.com/er-shrey/AGM-Openweather-Integración

@ carl09 échale un vistazo

Creo que la solicitud de funciones debería cerrarse ya que existe una solución sencilla.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Fue útil esta página
0 / 5 - 0 calificaciones