将 OpenStreetMaps 与 Cordova 集成

Question

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

我只能得出结论，我不应该直接使用 OSM 的 API，因为如果我有太多电话，他们的服务器会阻止我。所以有免费的开源名称，例如 1.Openlayers 2.Leaflet 让我可以免费使用 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. 所以就像你说的那样，我用互联网上的图片替换了它所以我从互联网

上拍了一张 OWL 的照片

3. 然后我将它添加到 CSP

4. 现在我可以放大和缩小让 owl 方块变多变少了。

我现在遇到的问题是：

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 中但仍然没有显示矢量图:(现在有什么想法吗？

Answer 1

你好像搞混了。

如@scai 所述，OSM 在 栅格切片 .

方面不提供任何 API

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

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

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

首先制作一个简单的 HTML 页面（没有 Cordova），其中包含一个有效的 Leaflet 地图。
仅从磁贴服务器添加 Content Security Policy (CSP) to tell the browser that you allow the page to fetch images。例如，如果您在 https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png 从 OSM 加载图块，您的 <meta> 标签可能如下所示：

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

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

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

或（不安全）：

<access origin="*" />

如果您需要有关 CSP 和 Cordova 白名单插件的进一步帮助，我相信您可以找到大量资源，包括此处的 SO。显然，阅读参考文档（在本 post 中链接）也应该是您的起点。

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

将 OpenStreetMaps 与 Cordova 集成

Integrating OpenStreetMaps with Cordova

openlayers

openstreetmap

leaflet

cordova

visual-studio-2015