Angular-google-maps: Ajout de types d'images cliquables

Créé le 15 mai 2016  ·  35Commentaires  ·  Source: SebastianM/angular-google-maps

salut

Je souhaite utiliser des tuiles personnalisées sur Google Maps comme cet exemple : https://developers.google.com/maps/documentation/javascript/examples/maptype-image

J'ai essayé de créer une nouvelle directive comme ci-dessous:
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

Je voulais juste vérifier si c'était la bonne approche où toutes les options et contenues dans le composant ou devrait-il être plus verbeux avec un attribut pour chaque propriété?

Ou puisqu'il ne s'agit pas vraiment d'un composant visuel, devrait-il simplement s'agir d'un service transmis au composant. (donc configuré via le code uniquement sans éléments html)

Existe-t-il des conseils sur l'approche perfectionnée ?

Merci
Carl

stale feature-request

Commentaire le plus utile

est-ce que cette fonctionnalité est mise à jour dans agm-maps ?

Tous les 35 commentaires

Salut Karl,

J'essaie de faire une chose similaire, charger des superpositions WMS personnalisées servies à partir d'un cluster MapServer externe, mais je suis bloqué car je ne sais pas comment obtenir une référence à l'instance réelle de googleMap afin d'ajouter mes superpositions dans le overlayMapTypes collection).

Je pense qu'il doit y avoir un moyen d'accéder à l'instance de carte google.map d'origine, en l'exposant via le GoogleMapsAPIWrapper ?

C'est mon approche (jusqu'à présent) ... dans le constructeur 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-ce que ça marche ce que vous avez fait ?? Pour créer une carte personnalisée en mosaïque

Non, ça ne marche pas...
... car la collection overlayMapTypes n'existe pas sur l'interface mapTypes.GoogleMap, et je ne trouve pas non plus un moyen d'accéder à l'instance sous-jacente google.maps.Map

@anaratz donc il n'y a pas encore de solution pour ça ?

Non pas encore

@anaratz Je l'ai fait fonctionner, mais je posais juste une question au début de ce numéro sur la façon de structurer mon code, puis je ferai un PR, devrais-je simplement faire un PR et voir comment ça se passe?

@carl09 pouvez-vous nous montrer comment vous l'avez résolu ?

@carl09 oui s'il vous plaît Carl.

Salut @smgjreinieren , @anaratz j'ai mis à jour mon PR et créé une démo

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

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

Tout commentaire est le bienvenu

@carl09 avez-vous également fait cela en tapuscrit ?

@smgjreinieren Ouais tout se fait en type script

@ carl09 Ohhhh maintenant je vois désolé! Bon travail! Merci

J'ai des problèmes avec la tâche " clang:check ", je vais juste essayer de mettre à jour le nœud de v4 à v6 et voir s'il le corrige, cela vous rend vraiment incertain lorsque vous poussez des changements

@ carl09 Mais il n'y a pas de type de carte personnalisé ?

@smgjreinieren , j'utilisais "Open Street Maps" dans le plunker pour afficher les modifications, cela ne fonctionne-t-il pas pour vous ou n'est-ce pas ce que vous vouliez dire ?

Comme cet exemple : https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

Je viens de voir votre autre question, donc je comprends ce que vous voulez dire maintenant

@ carl09 Je veux définir une image comme type de carte, est "Open Street Maps" une image qui crée un type de carte personnalisé

@smgjreinieren avez-vous une image géocodée ? ou est juste un fichier image standard ?

vous pouvez utiliser un outil comme http://www.qgis.org/en/site/ qui et géocoder des images, et également créer des tuiles afin que vous puissiez les utiliser pour google maps

@ carl09 Hmm il semble que je ne puisse pas l'utiliser ! Pouvez-vous peut-être convertir l'image pour moi?

Et pourquoi votre configuration de base ne reconnaît-elle pas le MapTypeId de 'angular2-google-maps/core'? Probablement parce qu'il n'a pas de noyau, je vois, mais comment puis-je l'importer à partir de votre configuration : https://github.com/carl09/angular2-google-maps-example

Salut @smgjreinieren J'ai mis à jour mon exemple de code dans ce référentiel si vous souhaitez le mettre à jour.
quel éditeur utilisez-vous pour éditer? j'utilise VS Code et il semble connaître les références si cela aide

@ carl09 Merci mon pote ! Mais je n'arrive toujours pas à faire fonctionner le qgis pour mac! Pourrais-je peut-être vous envoyer l'image, ce n'est qu'une petite partie de la carte du monde est-ce aussi possible ?

Comme ceci : http://postimg.org/image/6okpwebsb/

@carl09 est-il possible d'utiliser l'image du dossier local ? au lieu d'être en ligne

salut

Oui, vous pouvez, soit vous pouvez les héberger dans votre instance de nœud, tout comme vous hébergez vos fichiers css et js, mais je suppose que vous pouvez également utiliser file:// et le pointer localement, mais vous ne savez pas si cela fonctionnerait bien

Est-il possible de disableDefaultUI dans le constructeur ? Parce qu'il ne le reconnaît pas comme ceci:

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

Des progrès sur cette fonctionnalité ? Je viens de commencer à regarder angular2-google-maps il y a quelques jours et il semble que cela résoudra ce que je veux ajouter dans mon application, mais j'ai vraiment besoin de remplacer les cartes Google Maps par des cartes plus détaillées du norvégien " Kartverket".

@ carl09 désolé pour la réponse tardive ... tant de choses à faire actuellement. Pour être cohérent avec les autres éléments, nous devons utiliser des attributs distincts auxquels vous pouvez vous lier, donc pas de [options] uniques. Es-tu d'accord avec ça?

+1 bosse, j'adorerais utiliser cette fonctionnalité

Cette fonctionnalité de couche WMS personnalisée a-t-elle été portée dans le nouvel AGM ?

Il n'y a donc aucun moyen de récupérer une image à partir d'une URL et de l'afficher sur la carte ?

@sneckelmann nous avons beaucoup essayé mais à la fin nous utilisions maintenant des svgs encodés de base pour les marqueurs .. pas la meilleure solution mais ça marche

est-ce que cette fonctionnalité est mise à jour dans agm-maps ?

@SebastienM
Tout comme ce plunkr
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

les superpositions de cartes sont-elles implémentées dans AGM ?

@carl09 lorsque j'ai remplacé openstreetmap par l'API openweathermap, la tuile remplaçait la tuile de carte. Pouvons-nous transformer ces tuiles?

Je voulais mettre en place ce genre de chose avec AGM

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

@SebastianM la fonctionnalité est en attente depuis longtemps, pouvons-nous avoir une idée du référencement de l'instance interne de Google Map, afin que nous puissions faire au moins une solution de contournement jusqu'à ce que la fonctionnalité reçoive une mise à jour de votre part ?

J'ai trouvé quelque chose sur #1423, laissez-moi aussi penser à quelque chose ;P

@SebastienM
Une solution de contournement pour le scénario ci-dessus

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

@ carl09 jetez -y un coup d'œil

Je pense que la demande de fonctionnalité devrait être fermée car il existe une solution de contournement simple.

Ce problème a été automatiquement marqué comme obsolète, car il n'a pas eu d'activité récente. Il sera fermé s'il n'y a plus d'activité. Merci pour vos contributions.

Cette page vous a été utile?
0 / 5 - 0 notes