Question

有人可以提供代码示例以将ArcGIS地图服务用于MapBox GL API吗？谢谢！

Answer 1

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

Answer 2

Mapbox GL仅使用与Mapbox Vector Tiles spec [1]兼容的矢量图块。

如果ArcGIS地图服务提供了兼容的矢量图块，您可以使用指向您提到的服务的图块源创建样式[2]。

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

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

将ArcGIS Map Service应用到MapBox GL API中？

2 个答案: