带有dronedeploy 的传单平铺层答案

【问题标题】：Leaflet tile layer with dronedeploy带有dronedeploy 的传单平铺层
【发布时间】：2017-10-13 01:03:08
【问题描述】：

我正在尝试使用 Leaflet.js 显示我的无人机部署地图，但 Leaflet Tile Layer 市场应用程序生成的链接给了我访问被拒绝的错误。

我使用的是 30 天的试用帐户，但我还有几周的时间。

另外，这是在传单中显示数据的最佳方式吗？我注意到您可以将地图导出为 GeoTiff 瓦片，但我找不到任何有关如何在传单中导入/显示这些瓦片的示例

【问题讨论】：

您使用的是 IE 11 吗？
不，在 Windows 7 64 位上使用 Chrome 58，抱歉愚蠢的问题，但我应该用一些东西替换 url 的 {z}/{x}/{y}.png 部分，如果是的话什么？谢谢

标签： leaflet dronedeploy

【解决方案1】：

好的，在将 url 中的 {z}/{x}/{y}.png 替换为有效的图块编号后，我得到了一些结果。

我使用此页面来计算有效的瓷砖编号： http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

但是，这对于让我的地图显示在传单中是不必要的。我所要做的就是在定义平铺层时使用 url，这是一个完整的示例：

<!DOCTYPE html>
<html>
<head>  
    <title>Quick Start - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

    var mymap = L.map('mapid').setView([14.0, -8.2474], 13);

    // add base map layer
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 22,
        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>',
        id: 'mapbox.streets'
    }).addTo(mymap);


    // url generated from "Leaflet / Mapbox / Fulcrum Tile Layer" market place app on dronedeploy
    // (url truncated)
    var leafletTileLayerUrl = 'https://public-tiles.dronedeploy.com/1494366194_KUJOSCARTOPENPIPELINE_ortho_vdt/{z}/{x}/{y}.png?Policy=.....'  

    // add custom map layer 
    L.tileLayer(leafletTileLayerUrl, {
        maxZoom: 22,
    }).addTo(mymap);    
</script>
</body>
</html>

【讨论】：

非常有帮助。感谢您分享您的答案。