Angular-google-maps: 画像マップタイプの追加

作成日 2016年05月15日  ·  35コメント  ·  ソース: SebastianM/angular-google-maps

こんにちは

次の例のように、Googleマップでカスタムタイルを使用したい: https ://developers.google.com/maps/documentation/javascript/examples/maptype-image

以下のような新しいディレクティブを作成してみました。
<sebm-google-map> <sebm-google-image-map-type [options]="mapImageOptions"></sebm-google-image-map-type> </sebm-google-map>

これが、すべてのオプションがコンポーネントに含まれている正しいアプローチであるかどうか、または各プロパティの属性を持つより詳細なアプローチであるかどうかを確認したかっただけです。

または、これは実際には視覚的なコンポーネントではないため、コンポーネントに渡されるサービスである必要があります。 (コードを介して構成されているため、html要素はありません)

どのアプローチが完璧であるかについてのアドバイスはありますか?

ありがとう
カール

stale feature-request

最も参考になるコメント

この機能はagm-mapsで更新されますか?

全てのコメント35件

こんにちはカール、

同様のことをしようとしています。外部のMapServerクラスターから提供されるカスタムWMSオーバーレイをロードしますが、オーバーレイをoverlayMapTypesに追加するために、実際のgoogleMapインスタンスへの参照を取得する方法がわからないためにスタックします。コレクション)。

GoogleMapsAPIWrapperを介して公開することにより、元のgoogle.mapマップインスタンスにアクセスする方法が必要だと思いますか?

これは私のアプローチです(これまでのところ)... 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それはあなたがやったことで働いていますか? タイル張りのカスタムマップを作成するには

いいえ、動作しません...
... overlayMapTypesコレクションがインターフェースmapTypes.GoogleMapに存在しないため、また、基になるgoogle.maps.Mapインスタンスにアクセスする方法を見つけることができないため

@anaratzだから、これに対する解決策はまだありませんか?

いいえ、まだです

@anaratz動作していますが、この号の冒頭でコードの構造について質問していました。PRを実行します。PRを実行して、どのように動作するかを確認する必要がありますか?

@ carl09どのように修正したか教えていただけますか?

@ carl09はいカールしてください。

こんにちは@ smgjreinieren@ anaratz PRを更新し、デモを作成しました

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

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

どんなフィードバックも素晴らしいでしょう

@ carl09あなたもtypescriptでそれを作りましたか?

@smgjreinierenうんそれはすべてタイプスクリプトで行われます

@ carl09ああ、すみません! よくできた! ありがとう

clang:check 」タスクで問題が発生しました。ノードをv4からv6に更新して、それが修正されるかどうかを確認します。変更をプッシュするときに、yaが本当に不確かになります。

@ carl09しかし、カスタムマップタイプはありませんか?

@smgjreinierenプランカーで「OpenStreetMaps」を使用して変更を表示していましたが、機能しませんか、それとも意図したものではありませんか?

この例のように: https ://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay

私はあなたの他の質問を見たので、私はあなたが今何を意味するのか理解しています

@ carl09独自の画像をマップタイプとして設定したいのですが、「オープンストリートマップ」はカスタムマップタイプを作成する画像です

@smgjreinieren地理的にコード化された画像はありますか? それとも単なる標準の画像ファイルですか?

http://www.qgis.org/en/site/ whichやジオコーディング画像などのツールを使用できます。また、タイルを作成して、Googleマップで使用できるようにすることもできます。

@ carl09うーん、使えないようです! 画像を変換してくれませんか?

そして、なぜあなたの基本的なセットアップは 'angular2-google-maps / core'からのMapTypeIdを認識しないのですか? おそらくコアがないためですが、セットアップからインポートするよりもどうすればよいですか: https ://github.com/carl09/angular2-google-maps-example

こんにちは@smgjreinieren更新したい場合は、そのリポジトリのサンプルコードを更新しました。
編集に使用しているエディタは何ですか? 私はVSCodeを使用していますが、それが役立つ場合は参照を知ることができます

@ carl09ありがとうございます! しかし、それでもMacでqgisを動作させることはできません! 画像を送ってもらえますか?世界地図のほんの一部ですが、それも可能ですか?

このように:http: //postimg.org/image/6okpwebsb/

@ carl09ローカルフォルダの画像を使用することは可能ですか? オンラインの代わりに

こんにちは

はい、できます。cssファイルとjsファイルをホストしているのと同じように、ノードインスタンスでホストできますが、file://を使用してローカルでポイントすることもできますが、これがどの程度うまくいくかはわかりません。

コンストラクターでDefaultUIを無効にすることは可能ですか? このように認識されていないため:

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

この機能の進歩はありますか? 数日前にangular2-google-mapsを見始めたところ、アプリケーションに追加したいものが解決するようですが、GoogleMapsマップをノルウェー語のより詳細なマップに置き換える必要があります。 Kartverket」。

@ carl09回答が遅くなってすみません...現在、やることがたくさんあります。 他の要素との一貫性を保つために、バインドできる個別の属性を使用する必要があります。そのため、単一の[オプション]は使用できません。 それに関して、あなたは大丈夫?

+1バンプ、この機能を使用したい

このカスタムWMSレイヤー機能は新しいAGMに移植されていますか?

では、URLから画像を取得して、それを地図に表示する方法はありませんか?

@sneckelmann私たちは多くのことを試しましたが、最終的にはマーカーにベースエンコードされたsvgを使用していました..最善の解決策ではありませんが、機能します

この機能はagm-mapsで更新されますか?

@SebastianM
このプランカーのように
http://plnkr.co/edit/OlljPTvgqdq0Na2lvZPN?p=preview

マップオーバーレイはAGMに実装されていますか?

@ carl09 openstreetmapをopenweathermapAPIに置き換えたとき、タイルがマップタイルを置き換えていました。 それらのタイルをモーフィングできますか?

そんなことをAGMで実現したかった

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

@SebastianM機能は長い間保留されていますが、機能があなたの側から更新されるまで、少なくともいくつかの回避策を実行できるように、内部のgoogleマップインスタンスを参照することについてのアイデアを得ることができますか?

#1423で何かを見つけました、私にも何かを考えさせてください; P

@SebastianM
上記のシナリオの回避策

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

@ carl09はそれを見てください

簡単な回避策があるので、機能リクエストを閉じる必要があると思います。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

Subhojit1992 picture Subhojit1992  ·  3コメント

Halynsky picture Halynsky  ·  3コメント

gizm0bill picture gizm0bill  ·  4コメント

alexweber picture alexweber  ·  4コメント

shedar picture shedar  ·  4コメント