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?

Mula-mula, kita perlu mendapatkan koordinat koordinat acara relatif kepada div peta (elemen yang mengandungi peta), dan kemudian menukar koordinat relatif kepada div peta kepada koordinat sebenar dalam peta. Dalam langkah pertama, kita boleh mendapatkannya melalui pengiraan, tetapi langkah kedua mesti diselesaikan melalui lapisan terbuka, kerana hanya lapisan terbuka yang paling mengetahui sistem koordinat peta, yang juga mempunyai fungsi berkaitan dalam lapisan terbuka. Nasib baik, dalam lapisan terbuka kita boleh melengkapkan operasi di atas dalam satu langkah, dan hanya memerlukan satu fungsi: map.getEventCoordinate(event) Dalam pelaksanaan khusus di bawah, saya akan bercakap tentang fungsi ini secara terperinci.

Mari kita lihat cara melaksanakannya.

Pelaksanaan terperinci menu klik kanan tetikus

Untuk kemudahan, kod dalam artikel menggunakan JQuery.

Kod lengkap contoh dalam artikel boleh dilihat atau dimuat turun dalam GitHub saya Jika ia berguna, jangan lupa klik bintang.

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

Tambah acara menu konteks pada elemen html;

Dapatkan koordinat klik yang sepadan pada peta

Tambahkan menu pada lokasi yang sepadan pada peta.

Tambah acara menu konteks pada elemen html

Peristiwa butang tetikus pada elemen html dipanggil contextmenu peristiwa. Anda boleh mengikat acara ini pada mana-mana elemen html yang mengandungi peta dan lapisan terbuka akan mengendalikan isu penukaran koordinat. Seperti yang ditunjukkan di bawah, map.getViewport() akan mengembalikan elemen div dengan kelas ol-viewport yang dibuat apabila lapisan terbuka memulakan halaman, iaitu elemen yang mengandungi peta secara langsung. Oleh kerana penyemak imbas mempunyai menu klik kanan lalai, kami perlu membatalkan menu lalai dengan memanggil e.preventDefault();:

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

Dapatkan koordinat klik yang sepadan pada peta

Mendapatkan koordinat klik yang sepadan pada peta hanya memerlukan satu ayat, seperti berikut,

var coordinate = map.getEventCoordinate(event);

      函数参数是 oncontextmenu 对应的事件对象，该函数包含对 map.getCoordinateFromPixel() 的调用，map.getCoordinateFromPixel() 参数为 ol.pixel，是一个坐标，数组格式[x, y]，其实现中又调用了 ol.vec.Mat4.multVec2()，该函数完成处理坐标转换的实际工作。

地图相应位置添加菜单

      这里我们结合 overlay 添加菜单，之前的文章介绍过 overlay，这里就不再具体展开了。首先，我们在 html 页面添加一个目录，具体的 css 样式可以自己设定，想看完整源码的可以到我的 GitHub 中查看或者下载完整的代码：

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

使用这个 html 元素初始化一个 overlay，并将 overlay 添加到地图中：

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

接下来，我们就可以在鼠标右键菜单的事件回调函数中，根据获取的地图坐标位置，设置 overlay 的显示位置：

menu_overlay.setPosition(coordinate);

菜单隐藏

      当我们鼠标点击右键，菜单出现，但是我们不能让菜单总是显示在地图中，这时我们可以添加鼠标左键单击，菜单消失功能，或者当选择某项功能时，菜单消失。这个比较容易实现，只要一句便可以实现，放在鼠标左键事件的回调函数或者菜单功能执行函数中就行，如下：

menu_overlay.setPosition(undefined);

总结

      这篇文章中，主要讲了 openlayers 初始化页面地图元素的过程，并介绍了在地图上实现“鼠标右键菜单功能”，和隐藏菜单的实现。我们并没有对菜单中的条目绑定事件，因为我们的重点在于实现右键菜单，对于菜单的条目要绑定什么功能，和普通的 javascript 事件绑定并无二致，所以没有展开。