在MapBox GL API中使用ArcGIS地图服务



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