Angular-google-maps: Adicionando tipos de mapa de imagem

Criado em 15 mai. 2016  ·  35Comentários  ·  Fonte: SebastianM/angular-google-maps

Oi

Quero usar blocos personalizados no Google Maps como este exemplo: https://developers.google.com/maps/documentation/javascript/examples/maptype-image

Eu tentei fazer uma nova diretiva como abaixo:
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

Eu só queria verificar se essa era a abordagem correta onde todas as opções e contidas no componente ou deveria ser mais verboso ter um atributo para cada propriedade?

Ou como isso não é realmente um componente visual, deve ser apenas um serviço que é passado para o componente. (assim configurado via código apenas sem elementos html)

Existe algum conselho sobre qual abordagem é aperfeiçoada?

Obrigado
Carlos

stale feature-request

Comentários muito úteis

esse recurso é atualizado no agm-maps?

Todos 35 comentários

Olá Carl,

Estou tentando fazer uma coisa semelhante, carregar algumas sobreposições WMS personalizadas servidas de um cluster MapServer externo, mas estou preso porque não sei como obter uma referência à instância real do googleMap para adicionar minhas sobreposições ao overlayMapTypes coleção).

Acho que deve haver uma maneira de acessar a instância original do mapa google.map, expondo-a por meio do GoogleMapsAPIWrapper ?

Esta é a minha abordagem (até agora)... no construtor de MyComponent.ts

`var overlayMap = null;

    // 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 o que você fez? Para criar um mapa personalizado em mosaico

Não, não funciona...
...porque a coleção overlayMapTypes não existe na interface mapTypes.GoogleMap, nem posso encontrar uma maneira de acessar a instância google.maps.Map subjacente

@anaratz então não há solução para isso ainda?

Não, ainda não

@anaratz Eu tenho isso funcionando, mas eu estava apenas fazendo uma pergunta no início desta edição sobre como estruturar meu código, então farei um PR, devo apenas fazer um PR e ver como vai?

@carl09 você pode nos mostrar como você corrigiu isso?

@carl09 sim, por favor, Carl.

Oi @smgjreinieren , @anaratz eu atualizei meu PR e criei uma demo

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

PR: https://github.com/SebastianM/angular2-google-maps/pull/345

Qualquer comentário seria ótimo

@carl09 você também fez isso em texto datilografado?

@smgjreinieren Sim, tudo é feito no tipo script

@carl09 Ohhhh agora entendi desculpe! Bom trabalho! Obrigado

Estou tendo problemas com a tarefa " clang: check ", vou tentar atualizar o nó de v4 para v6 e ver se ele corrige, isso deixa você realmente inseguro ao enviar alterações

@carl09 Mas não há tipo de mapa personalizado?

@smgjreinieren eu estava usando "Open Street Maps" no plunker para exibir as alterações, não funciona para você ou não é o que você quis dizer?

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

Acabei de ver sua outra pergunta, então eu entendo o que você quer dizer agora

@carl09 Eu quero definir uma imagem própria como tipo de mapa, é "Open Street Maps" uma imagem que cria um tipo de mapa personalizado

@smgjreinieren você tem uma imagem codificada geograficamente? ou é apenas um arquivo de imagem padrão?

você pode usar uma ferramenta como http://www.qgis.org/en/site/ which e geocodificar imagens, e também criar blocos para que você possa usá-los no google maps

@carl09 Hmm parece que não consigo usar! Você pode converter a imagem para mim?

E por que sua configuração básica nem reconhece o MapTypeId de 'angular2-google-maps/core'? Provavelmente porque não tem núcleo que vejo, mas como faço para importá-lo do que da sua configuração: https://github.com/carl09/angular2-google-maps-example

Oi @smgjreinieren Atualizei meu código de exemplo nesse repositório se você quiser atualizá-lo.
qual editor você está usando para editar? estou usando o VS Code e parece saber as referências se isso ajuda

@carl09 Obrigado amigo! Mas ainda não consigo fazer o qgis funcionar para mac! Eu poderia enviar a imagem, é apenas uma pequena parte do mapa do mundo, isso também é possível?

Assim: http://postimg.org/image/6okpwebsb/

@carl09 é possível usar a imagem da pasta local? em vez de on-line

Oi

Sim, você pode, ou você pode hospedá-los em sua instância de nó, assim como você está hospedando seus arquivos css e js, mas acho que você também pode usar file:// e apontá-lo localmente, mas não tenho certeza de como isso funcionaria

É possível desabilitarDefaultUI no construtor? Porque não está reconhecendo assim:

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' }; }

Algum progresso neste recurso? Comecei a olhar o angular2-google-maps há alguns dias e parece que vai resolver o que quero adicionar no meu aplicativo, mas realmente preciso substituir os mapas do Google Maps por alguns mapas mais detalhados do norueguês " Kartverket".

@carl09 desculpe a resposta tardia... tanto trabalho atualmente. Para ser consistente com os outros elementos, devemos usar atributos separados aos quais você pode vincular, portanto, não há [opções] únicas. Você está bem com isso?

+1 bump, adoraria usar esse recurso

Esse recurso de camada WMS personalizado foi portado para o novo AGM?

Então não há como buscar uma imagem de um URL e exibi-la no mapa?

@sneckelmann tentamos muito, mas no final agora estávamos usando svgs codificados com base para os marcadores .. não é a melhor solução, mas funciona

esse recurso é atualizado no agm-maps?

@SebastianM
Assim como este plunkr
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

as sobreposições de mapa são implementadas no AGM?

@carl09 quando substituí o openstreetmap pela API openweathermap, o bloco estava substituindo o bloco do mapa. Podemos transformar essas telhas?

Eu queria implementar esse tipo de coisa com AGM

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

@SebastianM o recurso está pendente há muito tempo, podemos ter uma ideia sobre como fazer referência à instância interna do mapa do Google, para que possamos fazer pelo menos algumas soluções alternativas até que o recurso receba uma atualização do seu lado?

Encontrei algo no #1423, deixe-me também pensar em algo ;P

@SebastianM
Uma solução alternativa para o cenário acima

https://github.com/er-shrey/AGM-Openweather-Integration

@carl09 dê uma olhada nisso

Acho que a solicitação de recurso deve ser fechada, pois há uma solução simples para isso.

Este problema foi marcado automaticamente como obsoleto porque não teve atividade recente. Será fechado se não ocorrer mais nenhuma atividade. Obrigado por suas contribuições.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

PeterSisovsky picture PeterSisovsky  ·  3Comentários

ChrisDevinePimss picture ChrisDevinePimss  ·  3Comentários

Subhojit1992 picture Subhojit1992  ·  3Comentários

marcelinobadin picture marcelinobadin  ·  3Comentários

stot3 picture stot3  ·  3Comentários