Bagaimana cara overlay poin lat / lon pada lapisan Google di OpenLayers 2?


13

Saya terjebak menambahkan titik vektor di lat / lon di atas lapisan Google di OpenLayers. Intinya bergerak ketika saya menggeser peta. Ini tidak terjadi jika saya mengganti lapisan Google dengan lapisan di WGS84. Bagaimana saya bisa memperbaikinya?

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]);

Saya sudah mencoba mengikuti http://docs.openlayers.org/library/spherical_mercator.html tetapi tidak berhasil.


Masalah saya terkait dengan penggunaan Jquery di halaman yang sama. Bekerja dengan baik jika saya mengambil semua referensi ke Jquery.

Jawaban:


11

Anda perlu menambahkan beberapa perubahan untuk mendapatkan hasil yang diperlukan:

  1. Tambahkan sphericalMercator: properti true ke lapisan Google Anda sehingga lapisan vektor ditampilkan dengan benar di atas lapisan dasar Google Anda (ini adalah alasan pergeseran geometri).
  2. Tambahkan properti maxExtent dari lapisan Google Anda, jika tidak, pusat peta tidak akan diatur dengan benar. Tingkat yang ditunjukkan di bawah adalah tingkat dunia dalam koordinat Mercator.
  3. Seperti yang dinyatakan user1795, geometri titik Anda harus diproyeksikan kembali dari 4326 ke Web Mercator agar muncul dengan benar di peta.
  4. Ini juga berlaku untuk setCenter LonLat sehingga Anda perlu mengubahnya juga.

Kode kerja di bawah ini:

            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]);

Itu bagus sekali! Sepertinya OpenLayers tidak terlalu intuitif dalam hal transformasi. Apakah ini opsi 'spericalMercator' yang benar-benar memungkinkan proyeksi ulang?
underdark

1
Setuju itu tidak intuitif..pilihan sphericalMercator menambahkan fungsi-fungsi berikut yang memungkinkannya untuk bekerja dengan data dalam proyeksi lain - dev.openlayers.org/docs/files/OpenLayers/Layer/…
geografi

4

Ini adalah masalah proyeksi, Anda harus mengubah proyeksi titik menjadi lapisan dasar (google map di sini). Kode berikut harus berfungsi

    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])

Ini karena proyeksi default google map (spherical mercator) adalah 900913 dan titik sederhana di lonlat pada 4326.

Harap pastikan bahwa titik ditetapkan sebagai (bujur, lintang) dan bukan sebagai (lintang, bujur).


Menambahkan transformasi membuat titik hilang di peta saya. Versi OpenLayers saya adalah 2.9.1 jika ada bedanya.
underdark

Intinya. Transformasi melakukan trik untuk saya!
Stefan

1

Saat Anda bekerja dengan Google Maps JS API, Anda harus berhati-hati pada versi. Ada default untuk pergi dengan versi pengembangan API Google JS Maps. Periksa halaman: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

Dan tim Google Maps JS memperbaiki bug juga. Periksa http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

Di masa depan, sebutkan versi Google Maps API dalam pertanyaan. v3.3 tidak memiliki masalah dengan Openlayers karena sebagian besar digunakan oleh pengembang.


Hai Senthil, saya tidak yakin bagaimana versi Google Maps JS API mempengaruhi masalah saya dengan OpenLayers.
underdark

Hai Underdark, saya punya masalah dengan v3.4 ketika saya menggunakan Openlayers dan kemudian secara khusus menggunakan 3.3 dan ketika menggunakan versi trunk google maps, hasilnya tidak dapat diprediksi seiring perkembangan yang sedang berlangsung. Sudahkah Anda mencoba versi? Meskipun Anda menggunakan openlayers, Google memetakan api yang mendasarinya.
Senthil

0

Saya pikir ini masalah proyeksi.

Sudahkah Anda mencoba melaporkan titik pusat dari titik ketika peta bisa? Anda mungkin dapat melihat apakah ada perubahan.

Tapi dari apa yang saya lihat kode yuor, Anda akan menambahkan titik WGS84 ke corordsys yang berbeda


Ngomong-ngomong, sudahkah Anda mencoba menanyakan proyeksi peta yang Anda miliki, hanya untuk melihat apa yang sebenarnya ditetapkan?
Berbulu

dan akhirnya, maaf, tetapi ada cara untuk mengubah poin Anda jika Anda memiliki masalah proyeksi berat: var a = OpenLayers.LonLat baru (3,53) .transformasi (ll, OpenLayers baru. Proyeksi ('EPSG: 900913')) ;
Berbulu
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.