如何在 iPhone 中放大 OpenLayer 地图？

发布于 2024-11-30 05:02:04 字数 2323 浏览 1 评论 0原文

我在 iPhone 中创建了 OpenLayer 地图应用程序。所以我想通过 iPhone 的功能访问它的事件意味着我想通过触摸事件和拖动 OpenLayer 地图。通过 iPhone 缩放手势事件进行缩放。为了调用 OpenLayer 地图，我在 Web 视图中实现了一个 html 文件。它工作正常，我得到了 OpenLayer 地图 &地图触摸事件现在我也想像其他地图或图像一样在 iphone 中缩放地图。请指导我在 iphone 中的 OpenLayer 地图中实现缩放功能

。触摸事件我在 .html 文件中使用了此代码，

   <!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.clientY, 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>

此代码工作正常。

原文

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.clientY, 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小草泠泠 2024-12-07 05:02:04

自己实现这一点将会很痛苦。您可能想使用版本 2.11 RC2 或 trunk，因为这样就变得非常简单- 您需要做的就是添加 TouchNavigation 控件，如此示例所示：

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);
}

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);
}

回复收藏 0 原文