ArcGISマップサービスをMapBox GL APIに使用しますか？

Question

MapBox GL APIにArcGISマップサービスを使用するためのコードサンプルを提供できますか？ありがとう！

Answer 1

Mapbox GLはMapbox Vector Tiles仕様[1]と互換性のあるベクタータイルのみを消費します。

ArcGISマップサービスで互換性のあるベクタータイルが提供されている場合、あなたが言及したサービス[2]を指し示すタイルソースを持つスタイルを作成できます。

[1] https://www.mapbox.com/vector-tiles/specification/

[2] https://www.mapbox.com/mapbox-gl-style-spec/#sources

Answer 2

<style> 
    body { 
     margin: 0; 
     padding: 0; 
    } 

    #map1 { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 49%; 
    } 

    #map2 { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 51%; 
     width: 49%; 
    } 

    #map1_label, 
    #map2_label { 
     padding: 0.5em; 
     position: absolute; 
     z-index: 1; 
     top: 10; 
     color: #FFF; 
     font-size: 1.2em; 
     background-color: rgba(0, 0, 0, 0.8) 
    } 

    #map1_label { 
     left: 10; 
    } 

    #map2_label { 
     left: 51%; 
    } 
</style> 

<div id="map1_label">Dynamic Map Service</div> 
<div id="map2_label">Cached Map Service</div> 
<div id='map1'></div> 
<div id='map2'></div> 

<script> 
    mapboxgl.accessToken = 'your-mapbox-api-key'; 
    var map1 = new mapboxgl.Map({ 
     container: 'map1', 
     style: 'mapbox://styles/mapbox/streets-v10', 
     center: [153.021072, -27.470125], 
     zoom: 15 
    }); 

    var map2 = new mapboxgl.Map({ 
     container: 'map2', 
     style: 'mapbox://styles/mapbox/streets-v10', 
     center: [153.021072, -27.470125], 
     zoom: 15 
    }); 

    map1.on('load', function() { 
     map1.addLayer({ 
      "id": "dynamic-demo", 
      "type": "raster", 
      "minzoom": 0, 
      "maxzoom": 22, 
      "source": { 
       "type": "raster", 
       "tiles": ['https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/export?dpi=96&transparent=true&format=png32&layers=show%3A0&bbox={bbox-epsg-3857}&bboxSR=EPSG:3857&imageSR=EPSG:3857&size=256,256&f=image'], 
       "tileSize": 256 
      } 
     }); 
    }); 

    map2.on('load', function() { 
     map2.addLayer({ 
      "id": "cache-demo", 
      "type": "raster", 
      "minzoom": 0, 
      "maxzoom": 22, 
      "source": { 
       "type": "raster", 
       "tiles": ['https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'], 
       "tileSize": 256 
      } 
     }); 
    }); 
</script>