# 示例：集成第三方底图

如果已经存在一些第三方厂商或工具生成的底图瓦片缓存数据，可以直接集成到平台进行使用。

# 1. 部署第三方底图

注意，第三方底图通过数据包的形式部署到平台中，这需要系统管理员进行操作。默认平台中自带一个 MBTiles 格式的示例第三方底图，也可直接测试调用，如果使用示例第三方底图，那么可以跳过下面的部署步骤。

现在，我们先从 https://github.com/Esri/raster-tiles-compactcache/tree/master/sample_cache (opens new window) 下载一个 ArcGIS Compact V2 格式的瓦片缓存数据，然后将其中的_alllayers文件夹重命名为test.arcgisc2，注意，这里的test是这个底图的名字，arcgisc2是这个底图的类型，这在 API 调用中都会用到。

其中，底图类型的说明如下：

mbtiles：MBTiles
arcgise：ArcGIS Exploded
arcgisc：ArcGIS Compact
arcgisc2：ArcGIS Compact V2

然后，将这个test.arcgisc2目录拷贝到 HeyCloud 数据节点的 /var/heycloud-volumes/heycloud-share/vendor_basemap目录下。注意，如果heycloud-share目录下不存在vendor_basemap目录，需要首先创建该目录。

最后，在管理控制台的「监控」-「服务状态」页面重启地图渲染服务：

重启完成后，在管理控制台的「帮助」-「数据包」页面可以看到部署成功的底图数据包：

# 2. 加载使用第三方底图

新建一个名为vendor-basemap.html的文件，内容如下，注意底图 URL 中的test和arcgisc2，分别对应上面的底图名字和类型：

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />

  <head>
    <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
  </head>

  <body>
    <div id="app">
      <div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #9fd7fc;"></div>
    </div>

    <script>
      var map = new maplibregl.Map({
        container: 'map',
        zoom: 1,
        center: [0, 0],
        style: {
          version: 8,
          sources: {
            basemap: {
              type: 'raster',
              tiles: ['http://localhost:9000/heycloud/api/render/vendor/basemap/test/arcgisc2/{z}/{x}/{y}/tile.png'],
            },
          },
          layers: [
            {
              id: 'basemap',
              type: 'raster',
              source: 'basemap',
            },
          ],
        },
        maxZoom: 2,
        maxPitch: 80,
      });
    </script>
  </body>
</html>

页面将会呈现这样的效果:

← 示例：显示山影和地形效果应用开发的最佳实践 →