Question

这是我的图块模板

https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/{z}/{x}/{y}.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA

如果您替换/ {z} / {x} / {y} /

它会渲染图像。

https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/17/31400/48592.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA

但是当我使用mapbox-gls tiles: []时，它会加载图片，但不会将它们渲染到地图上。

以下是我正在使用的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuaWVscmFzbXVzb24yIiwiYSI6ImNpajM3anR2ODAwNGJ1eGtuNXFtbXhqMTMifQ.u3dqaFnALVDcqWyGu6Oq-w';
var map = new mapboxgl.Map({
  container: 'map', // container id
  center: [-93.75562777777778, 42.13104722222222], // starting position
  zoom: 15, // starting zoom,
  style: {
    "version": 8,
    "sources": {
      "raster-tiles": {
        "type": "raster",
        "url": "mapbox://mapbox.satellite",
        "tileSize": 256
      }
    },
    "layers": [{
      "id": "simple-tiles",
      "type": "raster",
      "source": "raster-tiles",
      "minzoom": 0,
      "maxzoom": 22
    }]
  },
});

map.on('load', function(){
  map.addSource('dronedeploy-tiles', {
    "type": "raster",
    "tiles": ["https://public-tiles.dronedeploy.com/1483655752_DANIELOPENPIPELINE_ortho_oet/{z}/{x}/{y}.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wdWJsaWMtdGlsZXMuZHJvbmVkZXBsb3kuY29tLzE0ODM2NTU3NTJfREFOSUVMT1BFTlBJUEVMSU5FX29ydGhvX29ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDg2NDE2NjE2fX19XX0_&Signature=edPjUkREQB6pgv~VBJVkI4CgZI673ahY6UfEdVtkJu-SnnNCKNcWwpsbtOTjgbaCEw0zCsn625XSSXUMRGqTGdTjn36Z1haKMkX6tnW-EqggCkcH52h0kkWUM6gXclIaXsQNlUwTVe5AczE687WovEf4b1iAHbYefHt-FLxEY91ZUltbzIhh850LoW4mSMxRd691oSKqXfVzgJHZv8CHENk26D1BRuU3cDiY2khXPnEtHLC-~vz3bqNrOpdc0Al-D-Khz4ZXtOUxCwkT9U8dKU0o0a8pxT15rQSA6ocWo5eS5gHpk0HulxaD840rV6Sn8uju13Xjt3ob1UCqJkyt5g__&Key-Pair-Id=APKAJXGC45PGQXCMCXSA"],
    "tileSize": 256
  });

  map.addLayer({
    "id": "dronedeploy-tiles",
    "type": "raster",
    "source": "dronedeploy-tiles",
    "minzoom": 0,
    "maxzoom": 22,
    'layout': {
      'visibility': 'visible'
    },
  });
});

</script>

</body>
</html>

非常感谢任何帮助。

谢谢！

Mapbox-js-gl没有显示光栅瓷砖

0 个答案: