地图图块使用离线 [英] Map tiles for use offline

查看：170 发布时间：2016/4/7 0:06:44 javascript angularjs map leaflet offline

本文介绍了地图图块使用离线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用书面方式只angularjs Web应用程序。我目前使用单张显示网页上的地图。我能有任何问题，我也是用leaflet.draw绘制一个矩形，并获得所有4个坐标成功地显示地图。

现在，我想要做的就是做同样的事情，但下线。我希望用户能够使用该应用程序没有互联网conectivity。我想用户看到美国和大西洋，并能在几个层次上放大。我不需要街道视图缩放，但类似的状态视图缩放。

JavaScript的：

  VAR地图= L.map（地图）的setView（[51.505，-0.09]，13）。
L.tileLayer（的http：// {S} .tiles.mapbox.com / V3 /的azazaz / {Z} / {X} / {Y}巴纽'，{
        署名：'和;复制; ＆所述; A HREF =http://osm.org/copyright＆GT; OpenStreetMap的＆下; / A＆GT;贡献者
    }）AddTo就（图）。

我在哪里可以得到这些地图图块下载？换句话说，有没有办法，我可以只substite的http：// {S} .tiles.mapbox.com / V3 /的azazaz / {Z} / {X} / {Y}巴纽'
在我的本地计算机的路径。

解决方案

只是复制粘贴瓷砖使用的离线地图明智的（可运行的实例）以下的步骤

从这里安装GMapCatcher的副本：
的https：//$c$c.google.com/p/gmapcatcher/ （它会生成缓存的地图
这将被使用）

运行，并通过点击设置图标旁边的去设置
位置行

在下面自定义地图目录选择OSM设置选项卡
（OpenStreetMap的）在地图存储类型的组合框（默认情况下
这个组合应该是这样文件）。注意路径，
以后将需要它

（可选）上，您可以设置自己喜欢的更改主题选项卡
地图提供商（越对比度越好）

保存设置并关闭对话框。

导航在GMapCatcher地图附近的必要位置上
（这将缓存图）

的index.html

 ＆LT; HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT;地图＆LT; /标题＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =JS / OpenLayers.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =JS / OpenStreetMap.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =JS / map.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;风格＆GT;
    .button {
        边框：1px的纯黑色;
        文本对齐：中心;
    }
    .horz {宽度：50像素;}
    .vert {高度：50像素;}
    身体{保证金：0; }
    ＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体的onload =mapInit（）; uiInit（）;＆GT;
    ＆LT;表格边框=0的cellpadding =0CELLSPACING =0的风格=宽度：100％;身高：100％; ID =controlsTable＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD合并单元格=3ALIGN =中心的风格=高度：50像素;＆GT;
                ＆LT;输入类型=按钮ID放大的onclick =zoomMap（1）/＆GT =zoomIn值=;
                ＆LT;输入类型=按钮ID =zoomOutVALUE =缩小的onclick =zoomMap（-1）/＆GT;
                ＆LT;！ - ＆LT;输入类型=按钮ID =拯救值=保存位置的onclick =persistMapLocation（）/＆GT; - ＆GT;
            ＆LT;跨度ID =装＆GT;＆LT; / SPAN＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD列跨度=3类=按钮VERTID =为moveUp的onclick =moveMap（0，-100）＆GT;
            向上
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆LT; TD类=按钮HORZID =moveLeft的onclick =moveMap（-100，0）＆GT;＆放大器; LT;＆LT; / TD＆GT;
        ＆所述; TD＆GT;
            ＆LT; DIV的风格=宽度：100％;身高：100％ID =theMap＆GT;＆LT; / DIV＆GT;
        ＆LT; / TD＆GT;
        ＆LT; TD类=按钮HORZID =MoveRight的的onclick =moveMap（100，0）＆GT;＆放大器; GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆所述; TR＆GT;
        ＆所述; TD列跨度=3类=按钮VERTID =下移的onclick =moveMap（0，100）＆GT;
            下
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;

JS / main.js

 函数mapInit（）{
        地图=新OpenLayers.Map（theMap，{
            控制：[新OpenLayers.Control.Navigation（）]，
                MAXEXTENT：新OpenLayers.Bounds（-20037508.34，-20037508.34,20037508.34,20037508.34）
                maxResolution：156543.0399，
                numZoomLevels：19，
                单位：M
            预测：新OpenLayers.Projection（EPSG：900913），
            displayProjection：新OpenLayers.Projection（EPSG：4326）
        }）;
        osmAddMap_Layers（）;
        如果（typeof运算（localStorage.zoom）==未定义）
        {
            localStorage.lat = localStorage.lon = 0;
            localStorage.zoom = 3;
            map.setCenter（新OpenLayers.LonLat（0，0），3）;
        }
        其他
            map.setCenter（新OpenLayers.LonLat（localStorage.lon，localStorage.lat），localStorage.zoom）;
    }    //定义地图图层
    功能osmAddMap_Layers（）{
        layerMapnik =新OpenLayers.Layer.OSM.Mapnik（Mapnik的）;
        map.addLayer（layerMapnik）;
    }    功能uiInit（）
    {
        如果（/ Android版| iPhone | iPad的|的iPod | Opera Mini的/ i.test（navigator.userAgent的））
        {
            document.body.appendChild（的document.getElementById（拯救））;
            document.body.appendChild（的document.getElementById（theMap））;
                    document.body.removeChild（的document.getElementById（controlsTable））;
        }
    }
    功能moveMap（DX，DY）{
        map.moveByPx（DX，DY）;
    }
    功能zoomMap（DZ）{
        map.zoomTo（map.getZoom（）+ DZ）;
    }    功能persistMapLocation（）
    {
        变种lonLat = map.getCenter（）;
        localStorage.lat = lonLat.lat;
        localStorage.lon = lonLat.lon;
        localStorage.zoom = map.getZoom（）;
    }

JS / OpenStreetMap.js

  OpenLayers.Util.OSM = {};
OpenLayers.Util.OSM.MISSING_TILE_URL =http://www.openstreetmap.org/openlayers/img/404.png;
OpenLayers.Util.OSM.originalOnImageLoadError = OpenLayers.Util.onImageLoadError;
OpenLayers.Util.onImageLoadError =功能（）{
    如果（this.src.match（/ ^ HTTP：\\ / \\ / [ABC] \\ [A-Z] + \\ OpenStreetMap的\\ .ORG \\ //））{
        this.src = OpenLayers.Util.OSM.MISSING_TILE_URL;
    }否则如果（this.src.match（/ ^ HTTP：\\ / \\ / [高清] \\塔赫\\ .openstreetmap \\ .ORG \\ //））{
        //什么也不做 - 这层是透明的
    }其他{
        OpenLayers.Util.OSM.originalOnImageLoadError;
    }
};OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class（OpenLayers.Layer.OSM，{
    初始化：函数（名称，选项）{
        VAR URL = [
            OSM_tiles / $ {Z} / $ {X} / $ {Y}的.png
        ];
        选项= OpenLayers.Util.extend（{
            numZoomLevels：19，
            缓冲液：0，
            transitionEffect：调整大小
        }，期权）;
        VAR newArguments = [名称，网址选项]
        OpenLayers.Layer.OSM.prototype.initialize.apply（这一点，newArguments）;
    }，    CLASS_NAME：OpenLayers.Layer.OSM.Mapnik
}）;

JS / OpenLayers.js

OpenLayers.js复制和放大器;粘贴code

OSM_tiles / 地方瓷砖此文件夹

I am writting web application using only angularjs. I am currently using Leaflet to display a map on a webpage. I am able to display a map succesfully with out any problems, I am also using leaflet.draw to draw a rectangle and to get all 4 coordinates.

Now, what I want to do is to do this same thing but offline. I want to user to be able to use this application without internet conectivity. I want to user to see America and Atlantic Ocean and be able to zoom in several levels. I dont need street view zoom, but something like state view zoom.

JAVASCRIPT:

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/MAPID/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

Where can I get these map tile to download? In other words, is there a way I can just substite "'http://{s}.tiles.mapbox.com/v3/MAPID/{z}/{x}/{y}.png'" with a path in my local computer.

解决方案

Only Copy Paste following step wise (Run-able Example ) for offline Map using Tiles

Install a copy of GMapCatcher from here: https://code.google.com/p/gmapcatcher/ (it will generate cached maps which will be used)
Run it and go to settings by clicking 'Settings' icon next to the location line
On Settings tab under 'Custom Maps Directory' select 'OSM' (OpenStreetMap) in the combo box of map storage type (by default this combo should have something like 'Files'). Note the path, you will need it later
(optionally) On the 'Change Theme' tab you can set your favourite map provider (the more contrast the better)
Save settings and close dialog.
Navigate over the map in the GMapCatcher near the necessary location (this will cache the map)

index.html

<html>
<head>
    <title>MAP</title>
    <script type="text/javascript" src="js/OpenLayers.js"></script>
    <script type="text/javascript" src="js/OpenStreetMap.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <style>
    .button {
        border: 1px solid black;
        text-align: center;
    }
    .horz { width: 50px;} 
    .vert { height: 50px;}
    body { margin: 0; }
    </style>
</head>
<body onload="mapInit();uiInit();">
    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%;" id="controlsTable">
    <tr>
        <td colspan="3" align="center" style="height:50px;">
                <input type="button" id="zoomIn" value="Zoom in" onclick="zoomMap(1)" />
                <input type="button" id="zoomOut" value="Zoom out" onclick="zoomMap(-1)" />
                <!-- <input type="button" id="save" value="Save location" onclick="persistMapLocation()" /> -->
            <span id="loaded"></span>
        </td>
    </tr>
    <tr>
        <td colspan="3" class="button vert" id="moveUp" onclick="moveMap(0, -100)">
            Up
        </td>
    </tr>
    <tr>
        <td class="button horz" id="moveLeft" onclick="moveMap(-100, 0)">&lt;</td>
        <td>
            <div style="width: 100%; height:100%" id="theMap"></div>
        </td>
        <td class="button horz" id="moveRight" onclick="moveMap(100, 0)">&gt;</td>
    </tr>
    <tr>
        <td colspan="3" class="button vert" id="moveDown" onclick="moveMap(0, 100)">
            Down
        </td>
    </tr>
    </table>
</body>
</html>

js/main.js

function mapInit() {
        map = new OpenLayers.Map("theMap", {
            controls:[new OpenLayers.Control.Navigation()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
        } );
        osmAddMap_Layers();
        if (typeof(localStorage.zoom) == 'undefined')
        {
            localStorage.lat = localStorage.lon = 0;
            localStorage.zoom = 3;
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
        }
        else
            map.setCenter(new OpenLayers.LonLat(localStorage.lon, localStorage.lat), localStorage.zoom);
    }

    // Define the map layers
    function osmAddMap_Layers() {
        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
    }

    function uiInit()
    {
        if( /Android|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) 
        {
            document.body.appendChild(document.getElementById("save"));
            document.body.appendChild(document.getElementById("theMap"));
                    document.body.removeChild(document.getElementById("controlsTable"));
        }
    }       
    function moveMap(dx, dy) {
        map.moveByPx(dx, dy);
    }  
    function zoomMap(dz) {
        map.zoomTo(map.getZoom() + dz);
    }

    function persistMapLocation()
    {
        var lonLat = map.getCenter();
        localStorage.lat = lonLat.lat;
        localStorage.lon = lonLat.lon;
        localStorage.zoom = map.getZoom();
    }

js/OpenStreetMap.js

OpenLayers.Util.OSM = {};
OpenLayers.Util.OSM.MISSING_TILE_URL = "http://www.openstreetmap.org/openlayers/img/404.png";
OpenLayers.Util.OSM.originalOnImageLoadError = OpenLayers.Util.onImageLoadError;
OpenLayers.Util.onImageLoadError = function() {
    if (this.src.match(/^http:\/\/[abc]\.[a-z]+\.openstreetmap\.org\//)) {
        this.src = OpenLayers.Util.OSM.MISSING_TILE_URL;
    } else if (this.src.match(/^http:\/\/[def]\.tah\.openstreetmap\.org\//)) {
        // do nothing - this layer is transparent
    } else {
        OpenLayers.Util.OSM.originalOnImageLoadError;
    }
};

OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(name, options) {
        var url = [
            "OSM_tiles/${z}/${x}/${y}.png"
        ];
        options = OpenLayers.Util.extend({
            numZoomLevels: 19,
            buffer: 0,
            transitionEffect: "resize"
        }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.Mapnik"
});

js/OpenLayers.js

OpenLayers.js Copy & Paste Code

OSM_tiles/ place tiles this folder

这篇关于地图图块使用离线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

地图图块使用离线 [英] Map tiles for use offline

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

地图图块使用离线 [英] Map tiles for use offline

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭