Gunakan OpenLayers3 untuk menambah kemahiran menu_javascript klik kanan peta

Untuk menambah menu klik kanan, pertama kita perlu memantau operasi klik kanan tetikus Kita tahu bahawa nama acara klik kanan tetikus ialah menu konteks Apabila tetikus berada pada elemen html klik kanan tetikus diklik, acara menu konteks akan dicetuskan Dalam fungsi panggil balik acara menu konteks Hanya laksanakan fungsi menu paparan yang sepadan.

Jadi dalam lapisan terbuka, di manakah kita harus bermula dengan menambahkan acara ini pada peta? Mula-mula kita perlu memahami proses memulakan halaman lapisan terbuka.

proses halaman permulaan lapisan terbuka

Openlayers juga merupakan perpustakaan bahagian hadapan, jadi ia pastinya tidak dapat dipisahkan daripada penggunaan html Sebagai contoh, kita perlu meletakkan elemen html yang memaparkan peta pada halaman, elemen div (dengan mengandaikan atribut idnya ialah. ditetapkan kepada "peta", yang akan dirujuk sebagai div peta), dan kemudian nyatakan elemen ini apabila peta dimulakan div peta, dan kemudian buat elemen div dalam elemen kanvas ol-viewport, jadikan peta yang diminta dalam elemen kanvas ini, kedua, elemen div dengan kelas ol-overlaycontainer akan ditambahkan pada akhirnya, a elemen div dengan kelas ol-overlaycontainer-stopevent akan ditambah, terutamanya Ia adalah kawalan untuk meletakkan lapisan terbuka Ia telah disebutkan pada awal artikel sebelumnya tentang menambah kawalan sambungan tersuai dan kami tidak akan memperkenalkannya secara terperinci.

Struktur html dom terakhir adalah seperti yang ditunjukkan di bawah:

Rajah 1 Struktur DOM yang terbentuk

Kami akan memikirkan untuk menambahkan acara pada elemen div peta ini, dan kemudian mengklik kanan untuk muncul menu idea ini adalah semula jadi dan sememangnya boleh direalisasikan, kita mesti memikirkan perkara berikut dan sekurang-kurangnya mempunyai pemahaman keseluruhan tentang perkara itu sebelum kita mulakan. Kami menunjukkan Selepas menu keluar, operasi tertentu sering dilakukan berdasarkan lokasi peta yang sepadan Kemudian objek acara menu konteks kami mengandungi koordinat skrin di mana klik berlaku, tetapi bagaimana untuk mendapatkan koordinat dalam sistem koordinat yang sepadan dalam peta berdasarkan koordinat skrin akan dibandingkan.

Apakah kesukarannya? Terdapat terutamanya tiga perkara:

Pertama sekali, koordinat yang terkandung dalam objek acara adalah relatif kepada keseluruhan port pandangan, halaman atau keseluruhan skrin penyemak imbas; Kedua, elemen yang memaparkan peta selalunya bersaiz rawak dan kedudukan
Akhir sekali, sistem koordinat skrin dan sistem koordinat peta selalunya berbeza sama sekali. Bagaimana untuk menukar koordinat berbanding elemen peta kepada koordinat dalam sistem koordinat peta?

Mari kita lihat cara melaksanakannya.

Mari tambahkan fungsi menu klik kanan langkah demi langkah. Kami membahagikannya kepada tiga langkah:

Tambah acara menu konteks pada elemen html

$(map.getViewport()).on("contextmenu", function(event){
  e.preventDefault();
  // 书写事件触发后的函数
});

Dapatkan koordinat klik yang sepadan pada peta

var coordinate = map.getEventCoordinate(event);

<div id="contextmenu_container" class="contextmenu">
  <ul>
    <li><a href="#">设置中心</a></li>
    <li><a href="#">添加地标</a></li>
    <li><a href="#">距离丈量</a></li>
  </ul>
</div>

var menu_overlay = new ol.Overlay({
  element: document.getElementById("contextmenu_container"),
  positioning: 'center-center'
});
menu_overlay.setMap(map);

menu_overlay.setPosition(coordinate);

menu_overlay.setPosition(undefined);