HeyCloud 文档

# 示例：显示山影和地形效果

HeyCloud 渲染引擎的高程接口返回存储了高程数据的图片，因此可以通过一些支持的库在客户端显示山影和地形效果。

# 1. 叠加山影效果

新建一个名为basedem.html的文件，内容如下：

<!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: 11,
    center: [138.6, 35.4],
    style: {
      version: 8,
      sources: {
        osm: {
          type: 'raster',
          tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png']
        },
        hillshadeSource: {
          type: 'raster-dem',
          maxzoom: 11,
          tiles: ['http://localhost:9000/heycloud/api/render/basedem/sample/{z}/{x}/{y}/terrain-rgb.png']
        }
      },
      layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm'
        },
        {
          id: 'hills',
          type: 'hillshade',
          source: 'hillshadeSource',
          layout: { visibility: 'visible' },
          paint: { 'hillshade-shadow-color': '#473B24' }
        }
      ]
    },
    maxZoom: 18,
    maxPitch: 80
  });

  </script>

</body>

</html>

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

# 2. 叠加地形效果

在页面中添加地形相关的数据源、组件：

<!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: 11,
    center: [138.6, 35.4],
    pitch: 60,
    style: {
      version: 8,
      sources: {
        osm: {
          type: 'raster',
          tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png']
        },
        terrainSource: {
          type: 'raster-dem',
          maxzoom: 11,
          tiles: ['http://localhost:9000/heycloud/api/render/basedem/sample/{z}/{x}/{y}/terrain-rgb.png']
        },
        hillshadeSource: {
          type: 'raster-dem',
          maxzoom: 11,
          tiles: ['http://localhost:9000/heycloud/api/render/basedem/sample/{z}/{x}/{y}/terrain-rgb.png']
        }
      },
      layers: [{
          id: 'osm',
          type: 'raster',
          source: 'osm'
        },
        {
          id: 'hills',
          type: 'hillshade',
          source: 'hillshadeSource',
          layout: { visibility: 'visible' },
          paint: { 'hillshade-shadow-color': '#473B24' }
        }
      ],
      terrain: {
        source: 'terrainSource',
        exaggeration: 1
      }
    },
    maxZoom: 18,
    maxPitch: 80
  });

  map.addControl(
    new maplibregl.NavigationControl({
      visualizePitch: true,
      showZoom: true,
      showCompass: true
    })
  );

  map.addControl(
    new maplibregl.TerrainControl({
      source: 'terrainSource',
      exaggeration: 1
    })
  );
  </script>

</body>

</html>

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

# 3. 获取全球的高程数据

HeyCloud 中自带示例数据显示了一小块区域的高程，如果需要覆盖全球的高程数据，请联系我们。

← 示例：集成第三方底图 →