GaodeMap

Use AMap

Register an account and apply for a Key

first,Register a developer account, become a developer of AMap open platform
After logging in, enter the “Application Management” page and “Create a New Application”
for applicationAdd Key, please select “Web client (JSAPI)” for “Service Platform”

Introducing L7

AMap version 2.0 dynamically introduces the AMap map within L7JS API, so it is no longer necessary to introduce Gaode separatelyJS API, just settypeforamapand pass intoken。

<script src="https://unpkg.com/@antv/l7"></script>

Add a div tag to specify the map container

At the same time, it is necessary todivSet the height and width.

<div id="map"></div>

Initialize L7 Scene

const scene = new L7.Scene({
  id: 'map',
  map: new L7.GaodeMap({
    style: 'dark', // Style URL
    center: [120.19382669582967, 30.258134],
    pitch: 0,
    zoom: 12,
    token: 'AMap token',
  }),
});

In this way we have completed passingL7Instantiate the Gaode map.

Add visualization layer

First we need to get the data and get the data method. Here we get the online geographical data.
Then we can initialize aLayer, and added toSceneThe layer addition is completed.

fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
  .then((res) => res.json())
  .then((data) => {
    const pointLayer = new L7.PointLayer({})
      .source(data.list, {
        parser: {
          type: 'json',
          x: 'j',
          y: 'w',
        },
      })
      .shape('cylinder')
      .size('t', function (level) {
        return [1, 2, level * 2 + 20];
      })
      .color('t', [
        '#094D4A',
        '#146968',
        '#1D7F7E',
        '#289899',
        '#34B6B7',
        '#4AC5AF',
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
        '#CEF8D6',
      ]);
    scene.addLayer(pointLayer);
  });

Complete demo code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>创建地图场景</title>
    <style>
      html,
      body {
        overflow: hidden;
        margin: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/@antv/l7"></script>
    <script>
      const scene = new L7.Scene({
        id: 'map',
        map: new L7.GaodeMap({
          style: 'dark', // 样式URL
          center: [120.19382669582967, 30.258134],
          pitch: 0,
          zoom: 12,
          token: '高德地图token',
        }),
      });

      fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
        .then((res) => res.json())
        .then((data) => {
          const pointLayer = new L7.PointLayer({})
            .source(data.list, {
              parser: {
                type: 'json',
                x: 'j',
                y: 'w',
              },
            })
            .shape('cylinder')
            .size('t', function (level) {
              return [1, 2, level * 2 + 20];
            })
            .color('t', [
              '#094D4A',
              '#146968',
              '#1D7F7E',
              '#289899',
              '#34B6B7',
              '#4AC5AF',
              '#5FD3A6',
              '#7BE39E',
              '#A1EDB8',
              '#CEF8D6',
            ]);
          scene.addLayer(pointLayer);
        });
    </script>
  </body>
</html>