javascript — Mapbox: как остановить распространение событий на весь экран управления

Mapbox: как остановить распространение событий при полноэкранном управлении

Это оказалось невозможным для захвата полноэкранного элемента управления, вместо этого у меня возникла идея создать собственный элемент управления, который будет выглядеть как полноэкранный многоугольник, и использовал это:

Поделиться здесь, так что если кто-то еще в будущем может использовать его.

1- Создан класс для поддержки пользовательского рисования.

 class MapboxCustomControl { constructor({ className = "", title = "", eventHandler = evtHndlr }) { this._className = className; this._title = title; this._eventHandler = eventHandler; } onAdd(map) { this._btn = document.createElement("button"); this._btn.className = "mapboxgl-ctrl-icon"   " "   this._className; this._btn.type = "button"; this._btn.title = this._title; this._btn.onclick = this._eventHandler; this._container = document.createElement("div"); this._container.className = "mapboxgl-ctrl-group mapboxgl-ctrl"; this._container.appendChild(this._btn); return this._container; } } 

2- Добавлен класс стилей CSS для рисования многоугольника.

 .mapbox-gl-draw_polygon { background-repeat: no-repeat; background-position: center; pointer-events: auto; background-image: url(data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8  ICAgIDxpbmtzY2FwZTpncmlkICAgICAgIHR5cGU9Inh5Z3JpZCIgICAgICAgaWQ9ImdyaWQxOTcxNSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExOTE3MiI ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZSAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIgICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiICAgICBpZD0ibGF5ZXIxIiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAzMi4zNjIyKSI  ICA8L2c PC9zdmc ); } 

3- Добавлена ​​функция для решения моей другой задачи.

 function openPrivacy(event) { if (event.type == 'click') { var mapWindow = window.open("/private_page/"   event_uuid  "/", "private_page", 'height=800px,width=900'); if (window.focus) { mapWindow.focus() } } } 

4- И, наконец, добавлен пользовательский элемент управления на карту.

 const customControl = new MapboxCustomControl({ className: "mapbox-gl-draw_polygon", title: "Privacy Page", eventHandler: openPrivacy }); mapboxMap.addControl(customControl, "top-right"); 

Спасибо за других, которые посвятили свое время этому.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector