Я пытаюсь использовать 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.
Как мне настроить приведенный выше пример, чтобы он работал как на настольных компьютерах, так и на сенсорных экранах? Надеюсь, я показал здесь, что я пытался провести исследование, но я застрял.