在Android上显示性能良好的巨幅地图？

Question

在Android上显示性能良好的巨幅地图？

Dit*_*iti 9 performance android bitmap webview

我是6个月前开始Android开发的"初学者".我对这个话题非常热情,我读过几本书:

这些书使我明白了很多 Android的工作方式.但是现在缺少的是......经验.所以我决定为一个项目做出贡献,该项目的目标是显示一个巨大的地铁地图 - 当然,项目的目标更广泛,但谈论它与这个问题无关.

地图在我的应用程序包中离线存储.

用什么？

谷歌地图无法使用,因为我的应用程序的地图与谷歌地图几乎没有任何关系.
使用简单的ImageView来显示地图是"不可能的",因为不支持缩放,平移等,而且我自己编码远远超出了我的能力.
我发现的唯一不错的解决方法是使用WebView,因为支持缩放和平移.

此外,仅使用一个大图像无法做到这一点:它会导致极端的图像质量损失.

问题是什么

我不能使用单个图像,因为当图片大于1300px时,Android会自动降低质量(参见上面的链接).
我希望以最低2000px的分辨率显示我的地图(xhdpi屏幕在1280px宽的屏幕上显示整个图像,但我希望它们能够进行缩放).
- 使用多密度图像(你知道,ldpi,mdpi,hdpi和xhdpi设备的不同版本)是不可能的,只要它们大大增加了APK的文件大小......
通过将我的地图分成5个不同的图块,并且只使用一个图像来显示所有屏幕密度,一切看起来都不错......除了WebView性能很糟糕.

最后一个解决方案的代码

我将我的巨大地图分成5个不同的地图图块,这些图块基本上是横向格式的矩形.我把它们全部(map [1-5] .jpg)和一个HTML文件(map.html)放到./assets/文件夹中.HTML文件的代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Huge map</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=yes, height=device-height, target-densityDpi=device-dpi">

    <style type="text/css">
    html, body, p, img { margin: 0; }
    img { border: 0; }
    p { height: 100%; min-height: 100%; }
    </style>
</head>
<body>
<p><!-- Displaying a 2000×2000px map -->
    <img src="file:///android_asset/map1.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map2.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map3.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map4.jpg" alt=""><br> <!-- 2000×408px -->
    <img src="file:///android_asset/map5.jpg" alt=""> <!-- 2000×368px -->
</p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

然后我加载我的Java代码并将其应用到我的布局(这只是一个WebView):

import me.diti.test.R;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MapActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map); // ./res/layout/map.xml with a <WebView>

        WebView mWebView = (WebView) findViewById(R.id.mapWebView); // The WebView’s id is mapWebView

        WebSettings webSettings = mWebView.getSettings();
            webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH); // Attempt at getting better performance…
            webSettings.setAppCacheEnabled(false); // Offline map: no need for cache
            webSettings.setLoadWithOverviewMode(true);
            webSettings.setUseWideViewPort(true);
            webSettings.setSupportZoom(true);
            webSettings.setBuiltInZoomControls(true);

        mWebView.setInitialScale(100);
        mWebView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);

        mWebView.loadUrl("file:///android_asset/map.html"); // We load the map (includes 5 big images)

    }

/* This is a minimal “working” example, no need for menu inflation and activity handling */

Run Code Online (Sandbox Code Playgroud)

应用执行

启动时,图像显示正确 ;
Unzooming工作得很好(任何看不到这个白色背景的可能性？CSS属性min-height似乎不起作用);
最大缩放是丑陋的 ;
平移时的表现太可怕了!

我的问题

显示巨大的自定义地图的最佳方式是什么,具有良好的性能和相对容易使用？我的解决方案可以接受如何解决这些缺陷？我阅读了很多关于所有这些问题的StackOverflow问题(自定义地图,WebView性能),但它们都没有帮助我.

期待您的帮助,请提前感谢您.

Answer 1

dav*_*e.c 1

我认为将大图像分割成图块是一个很好的方法，但我认为您需要更进一步，而不仅仅是 5 个图像。尝试将其分割为 10x10 网格中的 100 个 200x200 图像（或 8x8 网格中的 64 个 250x250 图像等）。然后使用 a<table>将它们显示在现有的WebView.

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td><img src="file:///android_asset/map00.00.jpg" border="0"></td>
        <td><img src="file:///android_asset/map00.01.jpg" border="0"></td>
        ...
        <td><img src="file:///android_asset/map00.09.jpg" border="0"></td>
    </tr>
    <tr>
        <td><img src="file:///android_asset/map01.00.jpg" border="0"></td>
        <td><img src="file:///android_asset/map01.01.jpg" border="0"></td>
        ...
        <td><img src="file:///android_asset/map01.09.jpg" border="0"></td>
    </tr>
    ...
</table>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，4 月前
查看次数：	1207 次
最近记录：	13 年，4 月前