Leaflet Draw, предотвращающий нажатие на элементы, пока активен - PullRequest
Новая
       18

Leaflet Draw, предотвращающий нажатие на элементы, пока активен

0 голосов
/ 08 мая 2019

У меня есть несколько дней, чтобы бороться с этим без удачи. Я использую листовку 1.4.0 вместе с leaflet.draw 1.0.4. Вместо использования пользовательского интерфейса L.control.draw я использую свои собственные кнопки для создания многоугольников и прямоугольников. Он отлично работает в настольных браузерах (кроме IE, конечно), но не работает на iPad, планшетах Android (я не проверял на телефонах), даже если вы переключаете последнюю версию Chrome для эмуляции мобильного устройства (используя панель инструментов устройства toogle) на инструментах разработчика) это не удается.

Я создал этот jsfiddle для иллюстрации проблемы: https://jsfiddle.net/fsv8jegd/2/

Используя Chrome с выключенным «переключателем», нажмите кнопку «Запустить поли». Курсор изменится на крест и пометку «нажмите и перетащите, чтобы нарисовать прямоугольник». Нажмите на кнопку «Отмена», курсор вернется к обычной стрелке.

Теперь включите «устройство переключения» в инструментах разработчика Chrome и выберите «отзывчивый» или любой из «iPhone» или «iPad». Нажмите на кнопку «начать поли». Курсор меняется на крест. Попробуйте нажать на кнопку «Отмена». Ничего не произошло. Он не получает событие клика. Единственный способ отменить это - нарисовать прямоугольник.

Есть идеи?

Спасибо!

HTML: 

<div id="map"> </div>
<button class='buttons' type="button" style="top:0" onclick="startpoly()">START POLY</button>
<button class='buttons' type="button" style="top:20px" onclick="cancelpoly()">CANCEL</button>

CSS: 

#map { height: 200px !important; width: 80%; }
.buttons {position: absolute; left: 0; z-index: 999999}

JS: 

polygon_query_options = { shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.9, fill: true, fillColor: null, fillOpacity: 0.2, clickable: false, dashArray: '10,10' } };

$(document).ready(function() {
  map = L.map('map', { preferCanvas: true, zoomControl: true,  zoom: 10, maxZoom: 20, center: [29.8, -95.5]});

  var drawnItems = new L.FeatureGroup();
  drawnItems.addTo(map);
  drawnItems.bringToFront();

  L.Browser.touch = true;

  var baseMapGroup = new L.featureGroup();

  basemapLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });
  basemapLabelLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });

  basemapLabelLayer.addTo(map);
  basemapLabelLayer.bringToBack();

  basemapLayer.addTo(map);
  basemapLayer.bringToBack();

  map.on('draw:created', function (e) {
     var layer = e.layer;
     drawnItems.addLayer(layer);
  });
});

function startpoly() {
  polygonDrawer = new L.Draw.Rectangle(map, polygon_query_options);
  polygonDrawer.enable();
};

function cancelpoly() {
  if (polygonDrawer != undefined) { polygonDrawer.disable(); }
};

1 Ответ

0 голосов
/ 08 мая 2019

Я обнаружил, что это ошибка в библиотеке leaflet.draw. Итак, я пошел по следу, и в строке 1260 leaflet.draw 1.0.4 следующий код вызывает проблему: 

document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

Я заменил эту строку следующим кодом: 

var tempMap = document.getElementById("map");
tempMap.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

По сути, вместо предотвращения события сенсорного запуска в документе, теперь применяется только к объекту карты.

Надеюсь, это кому-нибудь поможет.

...