Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
4.3 KiB
223 lines
4.3 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> |
|
|
|
|
|
<script> |
|
// Trick Leaflet into believing we have a touchscreen (for Chrome) |
|
if (window.Touch) { window.ontouchstart = function(){} }; |
|
</script> |
|
|
|
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" /> |
|
<script type="text/javascript" src="../../build/deps.js"></script> |
|
<script src="../leaflet-include.js"></script> |
|
|
|
<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script> |
|
<meta charset="utf-8"> |
|
<title>Leaflet test for pinch-zoom-without-bounce</title> |
|
<style> |
|
#map { |
|
position:absolute; |
|
top: 50px; |
|
bottom: 0; |
|
left:0; |
|
right:0; |
|
} |
|
body {margin:0; padding: 0} |
|
|
|
.label-right, .label-left, .label-bottom, .label-top { |
|
line-height: 20px; |
|
color: black; |
|
} |
|
|
|
.label-right { |
|
text-align: left; |
|
} |
|
|
|
.label-left { |
|
text-align: right; |
|
} |
|
|
|
.label-bottom, .label-top{ |
|
text-align: center; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
This is a semi-automated test for checking touch-zoom shaking. |
|
|
|
<div> |
|
<button onclick='resetMap()'>reset</button> |
|
<button onclick='pinchAndPanL()' >⌐¬</button> |
|
<button onclick='pinchAndPanV()' >∧</button> |
|
<button onclick='pinchAndPanII()'>||</button> |
|
</div> |
|
|
|
<div id='map'></div> |
|
|
|
|
|
<script> |
|
|
|
var map = L.map('map', { |
|
crs: L.CRS.Simple, |
|
minZoom: -3, |
|
bounceAtZoomLimits: false, |
|
maxZoom: 1 |
|
}); |
|
|
|
var bounds = [[0,0],[1000,1000]]; |
|
|
|
// Map bounds |
|
L.rectangle(bounds,{ |
|
fill: false, |
|
weight: 3, |
|
color: 'black' |
|
}).addTo(map); |
|
|
|
// Reticule |
|
for (var i=100; i<=900; i+=100) { |
|
// Vertical line |
|
L.polyline([[0, i],[1000, i]], { |
|
fill: false, |
|
weight: 1, |
|
color: 'black' |
|
}).addTo(map); |
|
|
|
// Horizontal line |
|
L.polyline([[i, 0],[i, 1000]], { |
|
fill: false, |
|
weight: 1, |
|
color: 'black' |
|
}).addTo(map); |
|
|
|
} |
|
|
|
for (var i=0; i<=1000; i+=100) { |
|
// Right label |
|
L.marker([i, 1000], { icon: L.divIcon({ |
|
iconSize: [40, 20], |
|
iconAnchor: [-2, 10], |
|
html: i, |
|
className: 'label-right' |
|
}) }).addTo(map); |
|
|
|
// Left label |
|
L.marker([i, 0], { icon: L.divIcon({ |
|
iconSize: [40, 20], |
|
iconAnchor: [42, 10], |
|
html: i, |
|
className: 'label-left' |
|
}) }).addTo(map); |
|
|
|
// Top label |
|
L.marker([1000, i], { icon: L.divIcon({ |
|
iconSize: [40, 20], |
|
iconAnchor: [20, 22], |
|
html: i, |
|
className: 'label-top' |
|
}) }).addTo(map); |
|
|
|
// Bottom label |
|
L.marker([0, i], { icon: L.divIcon({ |
|
iconSize: [40, 20], |
|
iconAnchor: [20, -2], |
|
html: i, |
|
className: 'label-bottom' |
|
}) }).addTo(map); |
|
} |
|
|
|
map.fitBounds(bounds); |
|
|
|
|
|
var marker = L.marker([500, 500]).addTo(map); |
|
|
|
var marker2 = L.marker([900, 400]).addTo(map); |
|
|
|
var hand = new Hand({timing: 'frame'}); |
|
var f1 = hand.growFinger('touch'); |
|
var f2 = hand.growFinger('touch'); |
|
|
|
function resetMap() { |
|
map.setView(myCenter, 15); |
|
} |
|
|
|
function pinchAndPanL() { |
|
|
|
var start = map.getSize().divideBy(2); |
|
start.y += 50; |
|
|
|
hand.sync(1000); |
|
f1.wait(200).moveTo(start.x - 50, start.y, 0) |
|
.down() |
|
.moveBy( -50, 0, 1500) |
|
// .moveBy( -1, 0, 1500) |
|
.moveBy( -50, 0, 1500) |
|
.moveBy(0, 100, 1500) |
|
.wait(1500) |
|
.up(); |
|
f2.wait(200).moveTo(start.x + 50, start.y, 0) |
|
.down() |
|
.moveBy( 50, 0, 1500) |
|
// .moveBy( 1, 0, 1500) |
|
.moveBy( 50, 0, 1500) |
|
.moveBy(0, 100, 1500) |
|
.wait(1500) |
|
.up(); |
|
}; |
|
|
|
function pinchAndPanV() { |
|
hand.sync(1000); |
|
|
|
var start = map.latLngToContainerPoint([900, 300]); |
|
start.y += 50; |
|
|
|
f1.wait(200).moveTo(start.x - 25, start.y, 0) |
|
.down() |
|
.moveBy(-100, 300, 5000) |
|
.wait(1500) |
|
.up(); |
|
f2.wait(200).moveTo(start.x + 25, start.y, 0) |
|
.down() |
|
.moveBy( 100, 300, 5000) |
|
.wait(1500) |
|
.up(); |
|
}; |
|
|
|
function pinchAndPanII() { |
|
hand.sync(5); |
|
f1.wait(200).moveTo(175, 100, 0) |
|
.down() |
|
.moveBy(0, 300, 5000) |
|
.wait(1500) |
|
.up(); |
|
f2.wait(200).moveTo(225, 100, 0) |
|
.down() |
|
.moveBy(0, 300, 5000) |
|
.wait(1500) |
|
.up(); |
|
}; |
|
|
|
|
|
|
|
|
|
map.on('mousedown mouseup zoomend', function(ev){ |
|
// console.log('L: ', performance.now(), JSON.stringify(ev.originalEvent)); |
|
console.log('L: ', performance.now(), ev.type); |
|
}); |
|
|
|
// L.DomEvent.on(map._container, 'touchstart touchend touchmove', function(ev){ |
|
// console.log('T: ', performance.now(), ev.type, ev.touches.length, ev.changedTouches.length, ev); |
|
// }); |
|
|
|
|
|
// pinchAndPanL(); |
|
pinchAndPanV(); |
|
// pinchAndPanII(); |
|
|
|
</script> |
|
</body> |
|
</html> |