019：Mapbox GL加载天地图（影像瓦片图）

Mapbox GL JS 是一个强大的JavaScript库，用于创建交互式地图应用。如果你想在 Mapbox 地图上加载 ArcGIS 的影像瓦片图（通常以 .TIF 或 .WMS 格式提供），你可以通过以下几个步骤操作： 1. **添加ArcGIS瓦片源**：首先，在你的 Mapbox GL配置中，你需要设置一个`ImageTileSource`，指向 ArcGIS 的瓦片服务器URL。例如，如果你使用的是 ArcGIS REST API，瓦片服务 URL 应该类似这样： ```javascript const arcgisTiles = new mapboxgl.ImageTileSource({ urlTemplate: 'https://{s}.tile.arcgis.com/tiles/{z}/{x}/{y}/image.png?token=your_token', attribution: '数据来自 ArcGIS' }); ``` 确保替换 `{s}` 为服务的子域名（通常是`server.arcgis.com`），`{z}`、`{x}` 和 `{y}` 分别代表层级（zoom level）、列（column）和行（row），`your_token`是你从 ArcGIS 获取的访问令牌。 2. **添加到地图**：然后将这个 tile source 添加到地图的 `sources` 属性中，并在初始化地图时引用它： ```javascript mapboxgl.accessToken = 'your_mapbox_access_token'; const map = new mapboxgl.Map({ container: 'map', // 指定容器元素 ID style: 'mapbox://styles/mapbox/streets-v11', // 使用默认样式 center: [-122.4194, 37.7749], // 定义初始视图位置（经度，纬度） zoom: 10, sources: { mapbox: mapboxgl.tileLayer('mapbox.mapbox-streets-v11'), arcgis: arcgisTiles } }); ``` 3. **瓦片覆盖设置**：如果需要覆盖地图的某些区域，可以使用 `setPaintProperty` 函数调整覆盖范围： ```javascript map.setPaintProperty('arcgis', 'source-layer-weight', 100); ```