OpenLayers 2でGoogleレイヤーに緯度/経度ポイントをオーバーレイする方法は?


13

OpenLayersのGoogleレイヤーの上に緯度/経度でベクターポイントを追加するのが面倒です。地図をパンすると、ポイントが移動します。GoogleレイヤーをWGS84のレイヤーに置き換えても、これは起こりません。どうすれば修正できますか?

map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gmap = new OpenLayers.Layer.Google(
            "Google Streets", 
            {numZoomLevels: 20}
           );
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

map.addLayers([gmap,pointLayer]);
map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
pointLayer.addFeatures([pointFeature]);

私はhttp://docs.openlayers.org/library/spherical_mercator.htmlをフォローしようとしましたが、成功しませんでした。


私の問題は、同じページでのJqueryの使用に関連しています。Jqueryへのすべての参照を取得する場合は正常に動作します。

回答:


11

必要な結果を得るには、いくつかの変更を追加する必要があります。

  1. sphereMercator:trueプロパティをGoogleレイヤーに追加して、ベクターレイヤーがGoogleベースレイヤーの上に正しく表示されるようにします(これがジオメトリをシフトする理由です)。
  2. GoogleレイヤーのmaxExtentプロパティを追加します。追加しないと、マップの中心が正しく設定されません。以下に示す範囲は、メルカトル座標での世界の範囲です。
  3. user1795が述べたように、マップに正しく表示するには、ポイントジオメトリを4326からWebメルカトルに再投影する必要があります。
  4. これはsetCenter LonLatにも適用されるため、これも変換する必要があります。

以下の作業コード:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);

それはうまくいきます!OpenLayersは、変換に関してはあまり直感的ではないようです。再投影を実際に有効にするのは「spericalMercator」オプションですか?
暗闇

1
直感的ではないことに同意します。sphericalMercator
geographika

4

これは投影の問題です。ポイントの投影をベースレイヤーの投影に変換する必要があります(こちらのGoogleマップ)。次のコードが動作するはずです

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

    map.addLayers([gmap,pointLayer]);
    map.setCenter(new OpenLayers.LonLat(16.373056, 48.208333), 5);

    var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
    point.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
    var pointFeature = new OpenLayers.Feature.Vector(point,null,null);
    pointLayer.addFeatures([pointFeature])

これは、Googleマップ(球状メルカトル)のデフォルトの投影が900913であり、4326のlonlatの単純な点の投影であるためです。

ポイントが(緯度、経度)ではなく(経度、緯度)に設定されていることを確認してください。


変換を追加すると、ポイントがマップ上で消えます。OpenLayersのバージョンは、違いがあれば2.9.1です。
暗闇

point.transformは私のためにトリックをしました!
ステファン

1

Google Maps JS APIを使用している場合、バージョンに注意する必要があります。デフォルトでは、開発バージョンのGoogle JS Maps APIを使用します。ページを確認してください:http : //code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

また、Google Maps JSチームもバグを修正しています。http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelogを確認してください

今後、質問でGoogle Maps APIのバージョンについて言及してください。v3.3では、主に開発者が使用するOpenlayersに問題はありませんでした。


こんにちはSenthil、Google Maps JS APIバージョンがOpenLayersの問題にどのように影響するかわかりません。
暗闇

こんにちはUnderdark、Openlayersで使用し、具体的に3.3を使用し、Googleマップトランクバージョンを使用すると、v3.4で問題が発生しました。開発中の結果は予測できません。バージョン管理を試しましたか?Openlayersを使用している場合でも、Googleはその基礎となるAPIをマップします。
センチル

0

これは予測の問題だと思います。

マップがパンするときにポイントの図心を報告しようとしましたか?何かが変わっているかどうかを確認できるかもしれません。

しかし、私はあなたのコードを見て、別のcorordsysにWGS84ポイントを追加します


ところで、実際にどのように設定されているかを確認するために、お持ちのマップの投影を照会しようとしましたか?
毛深い

最後に、申し訳ありませんが、予測に問題がある場合はポイントを変換する方法があります:var a = new OpenLayers.LonLat(3,53).transform(ll、new OpenLayers.Projection( 'EPSG:900913')) ;
毛深い
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.