解决openlayers 地图在更新容器宽高时 会出现地图拉伸的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决openlayers 地图在更新容器宽高时 会出现地图拉伸的问题相关的知识,希望对你有一定的参考价值。

参考技术A 刚开始只是加了一个map.updateSize(),怎么试都不好使,偶然间查到的,分享给大家

加上延时之后

如何在 iPhone 中放大 OpenLayer 地图?

【中文标题】如何在 iPhone 中放大 OpenLayer 地图?【英文标题】:how to get OpenLayer map zoomed in iphone? 【发布时间】:2011-08-16 10:41:46 【问题描述】:

我在 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
        
            #mapwidth: 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>

这段代码运行正常。

【问题讨论】:

【参考方案1】:

自己实现这一点会很痛苦。你可能想要使用版本2.11 RC2 或trunk,因为那样它变得非常简单——你需要做的就是添加TouchNavigation 控件,如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);

【讨论】:

好的,我已经看到了 mobilenavigation.js 文件,并且我也实现了该代码,但它对我不起作用,因为我说我想要像 iPhone 那样的缩放功能,用于在它的 API 中缩放图像和地图 你到底是什么意思?在 OpenLayers 中,您可以像在本机应用程序中一样放大 - 用两根手指捏合。那有什么不同? 是的,我想要的正是“在 OpenLayers 中,您可以像在本机应用程序中一样放大 - 用两根手指捏合。”但是您给定的代码对我不起作用,您能更具体一点吗? 这段代码来自我之前链接的示例。在您的 iPhone 上打开该链接,您会看到捏拉缩放功能正常。 你们都是对的,但正如我所说我想在 iphone 中创建应用程序,所以我不想在我的 iPhone 中运行此链接我想要缩放地图的代码(如 JavaScript 或 .html) (就像在 iphone 中捏放大一样)你上面的代码不起作用。see this link for touch event.因为这样放大是可能的?【参考方案2】:

即将发布的 2.11 版本的 OpenLayers 将支持用于平移、缩放的触摸事件…… 见:http://dev.openlayers.org/examples/mobile.html

HTH,

【讨论】:

好的,我已经看到了那个例子,但正如我所说,我想要像 iPhone 一样的缩放功能,用于在其 API 中缩放图像和地图。

以上是关于解决openlayers 地图在更新容器宽高时 会出现地图拉伸的问题的主要内容,如果未能解决你的问题,请参考以下文章

openlayers使用百度地图瓦片偏移问题解决方案

229:vue+openlayers解决setText不能立即更新文字的问题

11openlayers 地图交互

OpenLayers工作原理

OpenLayers调用百度地图

问题 百度地图marker不在中心点处