how to get OpenLayer map zoomed in iphone?
I have created OpenLayer map application in iphone. so i want to access its events by the functionality of the iphone means i want to drag OpenLayer map by touch events & zoom by iphone zoom gesture event. for calling OpenLayer map i have implemented one html file in web view.It's working properly i get the OpenLayer map & the map touch events also now i want to zoom map like other maps or images are going to be zoomed in iphone.please guide me for implementing zoom functionality in OpenLayer map in iphone..
for calling map & touch events i have use this code in .html file
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Tutorial - Basic Map Setup</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, baseLayer;
function init(){
map = new OpenLayers.Map('map');
baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"});
map.addLayer(baseLayer);
map.setCenter(new OpenLayers.LonLat(0,0),1);
}
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.client开发者_开发百科Y, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
</script>
<style>
@media screen
{
#map{width: 300px; height:360px; border: 2px solid black;}
}
</style>
</head>
<body onload="init()">
<h3>OpenLayers Tutorial - Basic Map Setup</h3>
<div id="map"></div>
</body>
</html>
this code is working properly.
Implementing this yourself will be painful. You might want to use version 2.11 RC2 or trunk, because then it becomes really simple - all you need to do is add TouchNavigation control, like shown in this example:
function init() {
map = new OpenLayers.Map({
div: "map",
theme: null,
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
),
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.ZoomPanel()
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
]
});
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
The upcoming 2.11 version of OpenLayers will support touch events for panning, zooming… See : http://dev.openlayers.org/examples/mobile.html
HTH,
加载中,请稍侯......
精彩评论