将 OpenStreetMaps 与 Cordova 集成
Ura*_*ain 3 openlayers openstreetmap leaflet cordova visual-studio-2015
我想知道你们是否知道如何将开放街道地图（OSM）与科尔多瓦一起使用？这几天都在找..
\n\n我能得出的结论是，我不应该直接使用 OSM 的 API，因为如果我有太多调用，他们的服务器会阻止我。所以有免费的开源名称，例如 \n1.Openlayers\n2 .允许我免费使用 OSM 的传单..但是我遵循了他们的所有教程，但我无法让地图显示在模拟器上..
\n\n我使用的是 Visual studios 2015 社区版。并与科尔多瓦一起工作。涉及 HTML、CSS 和 JavaScript(jQuery)..但我根本看不到地图..
\n\n\n\n
编辑 2、3、4
\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Test</title>\n <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"\n integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="\n crossorigin=""/>\n <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"\n integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="\n crossorigin=""></script>\n <style>\n #mapid { \n height: 180px; \n }\n </style>\n </head>\n\n <body id="Main">\n\n <div id="mapid"></div>\n\n <script>\n var mymap = L.map(\'mapid\').setView([51.505, -0.09], 13);\n\n L.tileLayer(\'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={mytoken}\', {\n attribution: \'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery \xc2\xa9 <a href="http://mapbox.com">Mapbox</a>\',\n maxZoom: 18,\n id: \'mapbox.streets\',\n accessToken: \'mytoken\'\n }).addTo(mymap);\n </script>\n\n </body>\n</html>\n这就是我所看到的
\n\n
编辑 5、6
\n\n在 Cordova 模拟器中，这就是我所看到的
\n\n
编辑7
\n\n我已经编辑了白名单。我猜它就在这里，因为我可以看到在 config.xml 中添加白名单的唯一地方是
\n\n
\n\n
编辑8
\n\n我还添加了 CSP，如下所示\n
\n\n
编辑9
\n\n现在，在我的 JS 文件中
\n\n
\n1. 这是原始文件的第一张图片，你可以看到我已经覆盖了我的令牌
\n2. 就像你说的，我用互联网上的图片替换了它所以我从互联网上拍了一张猫头鹰的照片
\n3. 然后我将其添加到 CSP 中
\n4. 现在我可以放大和缩小，使猫头鹰瓷砖变得很多和很少。
我现在遇到的问题是这样的：
\n\nhttps://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token=mytoken\n所以我尝试输入：
\n\n- \n
- https://api.tiles.mapbox.com/v4/MapID/997/256/ {z}/{x}/{y}.png \n
- https://api.tiles.mapbox.com/ \n
在 CSP\n但矢量图像仍然没有显示:( 现在有什么想法吗？
\n你似乎把事情搞混了。
正如 @scai 所提到的，当涉及到栅格图块时，OSM 不为您提供任何 API 。
您只需以普通图像的形式访问图块：
©开放街图
Leaflet（以及所有其他 JS 地图库，如 OpenLayers，还有 Google 地图）只是将这些图块图像拼接在一起，提供用户导航（平移、缩放）和其他功能（标记等）
使用 Cordova 将此类地图集成到混合移动应用程序中时没有任何具体内容，除了白名单/ CSP平铺服务器之外。
首先使用可用的 Leaflet 地图制作一个简单的 HTML 页面（没有 Cordova）。
添加内容安全策略(CSP) 以告诉浏览器您允许页面仅从平铺服务器获取图像。例如，如果您从 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 资源替换为本地副本。通常不要从 加载 Leaflet
unpkg.com。安装移动应用程序的目的是在手机存储上拥有尽可能多的可用资源，并且库代码通常不需要每次都通过无线方式获取。您可以在其下载页面下载所有 Leaflet 资源（CSS、JS、图像）的副本。将页面及其所有资源复制到您的 Cordova 项目中。将对Tile Server 的网络请求列入白名单
config.xml（在 中）：
<access origin="https://*.tile.openstreetmap.org/" />
或（不安全）：
<access origin="*" />
如果您需要有关 CSP 和 Cordova 白名单插件的进一步帮助，我确信您可以找到大量资源，包括此处的 SO。显然，阅读参考文档（如本文中的链接）也应该是您的起点。
顺便说一句，OSM确实警告您不应该滥用它们的图块，无论您通过什么方式访问它们（包括例如通过 Leaflet）。
- 您很可能应该从一个更简单的 Cordova 项目（没有 Leaflet）开始，加载 JS 文件并显示外部图像。一旦您了解了如何使其发挥作用，您将能够使用 Leaflet 执行相同的操作。祝你好运！ (3认同)
- 可以开始工作了！它甚至不是 CSP，而是 URL.. 谢谢 ghybs 干杯 (3认同)
| 归档时间： |
|
| 查看次数： |
2561 次 |
| 最近记录： |