Question

我想知道你是否有人知道我如何使用开放街道地图（OSM）与cordova？现在正在寻找几天..

我可以得出的结论是，我不应该直接使用OSM的API，因为如果我有太多的电话，他们的服务器会阻止我。所以有免费的开放源名称，如 1.Openlayers 2.Leaflet允许我免费使用OSM ..但是我按照他们所有的教程，但我不能让地图显示在模拟器上..

我正在使用Visual Studios 2015社区版。和Cordova合作。有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.这是原始文件的第一张图片，你可以看到我已经覆盖了我的令牌

所以就像你说我用互联网上的图像取代它所以我从互联网上拍了一张OWL图片

3.然后我将其添加到CSP

现在我可以放大和缩小使猫头鹰瓷砖变得很多很少。

我现在遇到的问题是：

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 Maps）只需将这些平铺图像拼接在一起，提供用户导航（平移，缩放）和其他功能（标记等）

在使用Cordova的混合移动应用程序中集成此类地图时没有任何具体内容，除以外的white listing / CSP Tile Server。

首先制作一个简单的HTML页面（没有Cordova），并附上一张有效的宣传单地图。
添加Content Security Policy（CSP）告诉浏览器您只允许页面从Tile Server获取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。安装移动应用程序的关键是尽可能在手机存储上提供尽可能多的资源，而库代码通常是您不需要每次都通过无线方式获取的东西。您可以在download page上下载所有Leaflet资产（CSS，JS，图像）的副本。
将页面及其所有资源复制到Cordova项目中。 Whitelist network requests到平铺服务器（在config.xml中）：

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

或（不安全）：

<access origin="*" />

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

BTW OSM does warn你不应该滥用他们的牌，不管你访问它们的方法（例如通过Leaflet）。

将OpenStreetMaps与Cordova集成

1 个答案: