Как использовать Leaflet.heat, события мыши/сенсорные события с мобильными устройствами, такими как iPad?

Я пытаюсь использовать Mapbox/Leaflet для создания тепловой карты. Это именно тот пример, который у меня работает правильно: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-heat/

Рабочий код такой:

map.on({
    movestart: function () { draw = false; },
    moveend:   function () { draw = true; },
    mousemove: function (e) {
        if (draw) {
            heat.addLatLng(e.latlng);
        }
    }
})

Однако это не работает для сенсорных экранов. Я посмотрел это видео, чтобы понять, что мне нужно изменить: https://www.youtube.com/watch?v=wwffqMAS8K8#t=100

Будучи новичком в JS и веб-приложениях в целом, я не уверен, как использовать синтаксис, описанный примерно на 36:00 минуте этого видео. Он предоставляет функцию, которая по-разному разветвляет обработку мыши/касания в зависимости от типа обнаруженного события:

                var posX, posY;

                function positionHandler(e) {
                if ((e.clientX) && (e.clientY)) {
                    posX = e.clientX; posY = e.clientY;
                } else if (e.targetTouches) {
                    posX =  e.targetTouches[0].clientX;
                    posY = e.targetTouches[0].clientY;
                    e.preventDefault();
                    }
                }

Я понимаю, что здесь мы определяем функцию positionHandler для возврата положения мыши или события касания на экране. Но я не знаю, как интегрировать это и заставить его работать с приведенным выше синтаксисом Leaflet.

Как мне настроить приведенный выше пример, чтобы он работал как на настольных компьютерах, так и на сенсорных экранах? Надеюсь, я показал здесь, что я пытался провести исследование, но я застрял.


person Community    schedule 02.11.2015    source источник


Ответы (1)


Ответ на этот вопрос кроется в API для Leaflet. Вы должны иметь возможность использовать некоторые из их обработчиков событий, чтобы добавить эту функциональность. Хотя мне не повезло, просто включив iHandler map.tap.enable(); Я перенастроил его, заменив mouseend на click и mousemove на dblclick.

Для получения дополнительной информации см. документацию здесь: http://leafletjs.com/reference.html#map-interaction-handlers

person Community    schedule 02.11.2015