将 OpenStreetMaps 与 Cordova 集成答案

【问题标题】：Integrating OpenStreetMaps with Cordova将 OpenStreetMaps 与 Cordova 集成
【发布时间】：2017-10-26 13:00:23
【问题描述】：

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

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

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

编辑 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>

这就是我看到的

编辑 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

所以我试着说：

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

在 CSP 中但是矢量图像仍然没有显示:(现在有什么想法吗？

【问题讨论】：

OpenLayers 和 Leaflet 只是用于显示地图图块和各种叠加层的 JavaScript 框架。他们仍然需要从瓦片服务器检索他们的地图瓦片。此磁贴服务器可以是官方 OSM 磁贴服务器，也可以是许多第三方磁贴服务器之一。无论哪种方式，您都需要提供有关您的问题的更多信息。
嗯，基本上我只需要在我的科尔多瓦应用程序上显示 OSM！我不知道该怎么做，因为没有任何教程可以告诉我如何在科尔多瓦上做到这一点。您能否指导我如何以任何可能的方式将 Cordova 与 OSM 连接起来。
如果地图控件正确加载但瓦片未正确加载（即底图仍为灰色），您可能忘记将瓦片服务器 URL白名单。使用 Chrome 远程检查器进行调试肯定会有所帮助。
嘿 ghybs 我感谢您的回复，但我只需要一些帮助来首先设置所有内容。也许有任何在线教程？我似乎找不到任何与 Cordova 和 OpenStreetMaps 相关的内容 :(

标签： cordova visual-studio-2015 leaflet openlayers openstreetmap

【解决方案1】：

你好像把事情搞混了。

正如@scai 所提到的，OSM 没有为您提供任何关于光栅图块的 API。

您只需将图块作为普通图像访问：

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

在使用 Cordova 的混合移动应用程序中集成此类地图时没有什么特别的，除了white listing/CSP Tile Server。

首先制作一个简单的 HTML 页面（没有 Cordova），并带有一个有效的 Leaflet 地图。
添加 Content Security Policy (CSP) 以告诉浏览器您允许页面仅从 Tile 服务器获取 images。例如，如果您从 OSM 在https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png 加载磁贴，您的<meta> 标签可能如下所示：

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

用本地副本替换任何 CDN 资源。通常不从unpkg.com 加载传单。安装移动应用程序的目的是尽可能多地在手机存储上提供可用资源，而库代码通常是您不需要每次都通过无线方式获取的东西。您可以在其download page 上下载所有 Leaflet 资产（CSS、JS、图像）的副本。
将页面及其所有资产复制到您的 Cordova 项目中。 Whitelist network requests 到 Tile 服务器（config.xml）：

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

或（不安全）：

<access origin="*" />

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

顺便说一句，OSM does warn 你不应该滥用他们的磁贴，无论你通过什么方法访问它们（包括通过例如传单）。

【讨论】：

好吧，我终于可以使用一个简单的 HTML 页面让它工作了。但它仍然不适用于科尔多瓦。所以我猜你提到的应该是白名单和CSP。但是我到底需要放什么？
我已经添加了白名单和 CSP，但我仍然看不到图块 :(
你能看看我的原帖吗？
你应该从一个更简单的 Cordova 项目（没有 Leaflet）开始，加载一个 JS 文件并显示一个外部图像。一旦您了解了如何使其工作，您将能够对 Leaflet 做同样的事情。祝你好运！
开始工作了！它甚至不是 CSP，而是 URL。谢谢 ghybs 的欢呼