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

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

问题描述

我想知道你们中的任何人可能不知道如何在科尔多瓦中使用开放街道地图(OSM)吗?现在正在搜索天.

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..

我能得出的所有结论是，我不应直接使用OSM的API，因为如果我有太多调用，它们的服务器将阻止我..因此，有免费的开源名称，例如 1，Openlayers 2.Leaflet使我可以免费使用OSM..但是我遵循了他们的所有教程，但是无法在模拟器上显示地图.

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..

我正在使用Visual Studios 2015社区版.并与Cordova合作.其中涉及HTML，CSS和JavaScript(jQuery).但我只是看不到地图.

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..

编辑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模拟器中，这就是我看到的

In Cordova emulator this is what i see

编辑7

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

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

编辑8

我还添加了CSP，如下所示

I have also added the CSP as can be seen below

编辑9

现在，在我的JS文件中

So NOW, In my JS file

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

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

2.因此，就像您说的那样，我用互联网上的图片代替了它，所以我从互联网上拍了一张猫头鹰图片

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.然后将其添加到CSP

3. I then added it to the CSP

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

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

所以我试图放:

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

在CSP中 但矢量图像仍未显示:(现在有什么想法吗?

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

推荐答案

您似乎很困惑.

如@scai所述，当涉及到栅格图块时，OSM不会为您提供任何API.

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

传单(以及所有其他JS映射库，例如OpenLayers，还有Google Maps)仅将此类图块图像拼接在一起，提供用户导航(平移，缩放)和其他功能(标记等)

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.)

使用Cordova将此类地图集成到混合移动应用程序中时，没有什么特别的规定， 用于

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

  1. 首先制作一个带有工作传单图的简单HTML页面(不使用Cordova).

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

添加内容安全性政策(CSP)，告诉浏览器您允许页面获取

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. 替换任何CDN资源.通常，不要从unpkg.com加载Leaflet.拥有已安装的移动应用程序的目的是要在电话存储中拥有尽可能多的可用资源，并且通常不需要每次通过库获取库代码.您可以在其下载页面上下载所有Leaflet资产(CSS，JS，图像)的副本.

  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.

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

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/" />

或(不安全):

<access origin="*" />

如果您需要有关CSP和Cordova白名单插件的进一步帮助，我相信您可以找到很多资源，包括SO上的内容.显然，通读参考文档(本文中的所有链接)也应该是您的出发点.

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 会警告您不应滥用瓷砖的形状，无论您使用哪种方法(包括通过Leaflet进行访问).

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天全站免登陆