将 OpenStreetMaps 与 Cordova 集成 [英] Integrating OpenStreetMaps with Cordova

查看：18
本文介绍了将 OpenStreetMaps 与 Cordova 集成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道你们中是否有人知道如何将 Open Street Maps(OSM) 与 cordova 一起使用?现在正在搜索几天..

我只能得出结论，我不应该直接使用 OSM 的 API，因为如果我有太多的调用，他们的服务器会阻止我.所以有免费的开源名称，比如1.Openlayers2.允许我免费使用 OSM 的传单.但是我遵循了他们所有的教程，但我无法让地图显示在模拟器上...

我正在使用 Visual Studios 2015 社区版.并与科尔多瓦合作.涉及到 HTML、CSS 和 JavaScript(jQuery).. 但我根本看不到地图..

<小时>

编辑 2、3、4

<!DOCTYPE html><html><头><title>测试</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"完整性="sha512-M2wvCLH6DSrazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="crossorigin=""/><script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"完整性="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="crossorigin=""></script><风格>#mapid {高度:180px；}</风格></头><body id="主"><div id="mapid"></div><脚本>var mymap = L.map('mapid').setView([51.505, -0.09], 13);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={mytoken}', {attribution: '地图数据和副本;<a href="http://openstreetmap.org">OpenStreetMap</a>贡献者，<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>，图像 © <a href="http://mapbox.com">Mapbox</a>',最大缩放:18，id: 'mapbox.streets',访问令牌:'mytoken'}).addTo(mymap);</脚本></身体></html>

这就是我看到的

<小时>

编辑 5、6

在 Cordova 模拟器中，这就是我看到的

<小时>

编辑 7

我已经编辑了白名单.我猜它在这里，因为我能看到在 config.xml 中添加白名单的唯一地方是

<小时>

编辑 8

我还添加了 CSP，如下所示

<小时>

编辑 9

现在，在我的 JS 文件中

1. 这是原始文件的第一张图片，你可以看到我已经覆盖了我的令牌

2. 所以就像你说的，我用互联网上的图片替换了它所以我从互联网上拍了一张猫头鹰的照片

3. 然后我将它添加到 CSP

4.现在我可以放大和缩小，使猫头鹰瓷砖变得越来越少.

我现在遇到的问题是:

https://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token=mytoken

所以我试着说:

  • ©OpenStreetMap

    Leaflet(以及所有其他 JS 映射库，如 OpenLayers，还有 Google Maps)只是将这些平铺图像拼接在一起，提供用户导航(平移、缩放)和其他功能(标记等)

    在使用 Cordova 的混合移动应用程序中集成此类地图时，没有什么特别的，除了 白名单/CSP Tile 服务器.

    1. 首先制作一个简单的 HTML 页面(没有 Cordova)，并带有一个有效的 Leaflet 地图.

    2. 添加 内容安全策略 (CSP) 告诉浏览器您允许页面获取 图像 仅来自 Tile 服务器.例如，如果您在 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png 从 OSM 加载图块，您的 <meta> 标签可能看起来像:

    <metahttp-equiv="内容安全策略"content="img-src 'self' https://*.tile.openstreetmap.org/">

    1. 用本地副本替换任何 CDN 资源.通常不要从 unpkg.com 加载 Leaflet.安装移动应用程序的目的是在手机存储上拥有尽可能多的可用资源，而库代码通常是您不需要每次都通过无线方式获取的东西.您可以在其下载页面上下载所有 Leaflet 资产(CSS、JS、图像)的副本.

    2. 将页面及其所有资源复制到您的 Cordova 项目中.将网络请求列入白名单到 Tile 服务器(在 config.xml 中):

    <access origin="https://*.tile.openstreetmap.org/"/>

    或(不安全):

    <access origin="*"/>

    如果您在 CSP 和 Cordova 白名单插件方面需要更多帮助，我相信您可以找到大量资源，包括这里的 SO.显然，通读参考文档(在本文中链接)也应该是您的起点.

    BTW OSM 警告您不应滥用它们的磁贴，无论您通过何种方法访问它们(例如通过 Leaflet).

    I was wondering if any of you might have any idea how i can use Open Street Maps(OSM) with cordova? Searching for days now..

    All i can conclude is that i am not supposed to directly use OSM's API's as their servers will block me out if i have too many calls.. So there are free open sources names like 1.Openlayers 2.Leaflet that allow me to use OSM for free.. however i followed all their tutorials but i cant get the map to show up on the emulator..

    Im using Visual studios 2015 community edition. And working with Cordova. There is HTML,CSS and JavaScript(jQuery) involved.. But i simply see no map..

    Edits 2, 3, 4

    <!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
              integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
              crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
               integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
               crossorigin=""></script>
        <style>
            #mapid { 
                height: 180px; 
            }
        </style>
    </head>

    <body id="Main">

        <div id="mapid"></div>

        <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={mytoken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'mytoken'
        }).addTo(mymap);
        </script>

        </body>
</html>

    This is what i see

    Edits 5, 6

    In Cordova emulator this is what i see

    Edit 7

    I have edited the whitelist.. Im guessing it is here cause the only place i can see to add the whitelist in the config.xml is

    Edit 8

    I have also added the CSP as can be seen below

    Edit 9

    So NOW, In my JS file

    1. This is the first image the original file and you can see i have covered my token

    2. So like you said i replaced it with an image from the internetSo i took a pic of an OWL from the internet

    3. I then added it to the CSP

    4. Now i can zoom in and zoom out make the owl tiles become many and few.

    The problem i have now is with this:

    https://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token=mytoken

    so i tried to put:

    IN THE CSP but still the vector image is not showing :( any ideas now?

    解决方案

    You seem to mix up things.

    As mentioned by @scai, OSM does not provide you with any API when it comes to raster tiles.

    You just access tiles as plain images:

    © OpenStreetMap

    Leaflet (and all other JS mapping libraries like OpenLayers, but also Google Maps) just stitch such tile images together, provide user navigation (panning, zooming) and other functionalities (markers, etc.)

    There is nothing specific when integrating such map in a hybrid mobile app using Cordova, except for white listing / CSP the Tile Server.

    1. Start by making a simple HTML page (without Cordova) with a working Leaflet map.

    2. Add a Content Security Policy (CSP) to tell the browser that you allow the page to fetch images only from the Tile Server. For example, if you load tiles from OSM at https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, your <meta> tag could look like:

    <meta
  http-equiv="Content-Security-Policy"
  content="img-src 'self' https://*.tile.openstreetmap.org/"
>

    1. Replace any CDN resource by local copies. Typically do not load Leaflet from unpkg.com. The point of having an installed mobile app is to have as much resources available on the phone storage as possible, and libraries code is typically the thing you do not need to fetch over the air everytime. You can download a copy of all Leaflet assets (CSS, JS, images) on its download page.

    2. Copy the page and all its assets into your Cordova project. Whitelist network requests to the Tile Server (in config.xml):

    <access origin="https://*.tile.openstreetmap.org/" />

    or (unsafe):

    <access origin="*" />

    If you need further help with CSP and Cordova whitelist plugin, I am certain you can find plenty resources, including here on SO. Obviously, reading through the reference documentation (as linked throughout this post) should be your starting point as well.

    BTW OSM does warn that you should not abuse of their tiles, whatever the method through which you access them (including through Leaflet for instance).

    这篇关于将 OpenStreetMaps 与 Cordova 集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆