Quick Start

L7Available onlineCDNas well asNPMQuick access in the form of packages. passL7With the capabilities provided, we can quickly complete map visualization.

Installation introduction

Introduced via npm

//Install L7 dependencies
npm install --save @antv/l7
//Install third-party basemap dependencies
npm install --save @antv/l7-maps

Imported via CDN

<head>
  <! --Introducing the latest version of L7-->
  <script src="https://unpkg.com/@antv/l7"></script>
  <! --Specify the version number to introduce L7-->
  <script src="https://unpkg.com/@antv/l7@2.0.11"></script>
</head>

CDN reference obtains and initializes all objects through the L7 namespace when used, such as L7.scene, L7.GaodeMap

import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new L7.Scene({
  id: 'map',
  map: new L7.GaodeMap({
    style: 'dark',
    center: [110.770672, 34.159869],
    pitch: 45,
  }),
});

Basic tutorial

Map component usage

1. To initialize the map, you first need to add a DOM to the page for map initialization.

<div style="min-height: 500px; justify-content: center;position: relative" id="map" />

2. Initialize Gaode map

import { GaodeMap } from '@antv/l7-maps';
//Similarly you can also initialize a Mapbox map
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    pitch: 35.210526315789465,
    style: 'dark',
    center: [104.288144, 31.239692],
    zoom: 4.4,
  }),
});

🌟 At this point, interactive map content will appear on the page.

Draw fill plot

After the map initialization is completed, we can add visual data to the map. Here we take China’s administrative district data as an example of how to visualize surface data. Data source: Chinese provincesGeoJSONdata.

1. We use polygon layers to draw administrative division data and obtain geometric planes covering the map surface.

import { PolygonLayer } from '@antv/l7';
const chinaPolygonLayer = new PolygonLayer({})
  .source(data)
  .color('name', [
    'rgb(239,243,255)',
    'rgb(189,215,231)',
    'rgb(107,174,214)',
    'rgb(49,130,189)',
    'rgb(8,81,156)',
  ]);

2. After the layer is created, we need to add it toScenedisplayed in .

scene.addLayer(chinaPolygonLayer);

3. Simple filling visualization is still not intuitive enough, we can useLineLayerandPointLayerAdd administrative division strokes and administrative division text labels.

4. The visualization becomes clearer after adding borders and text annotations.

View full code

Interactive fill plot

Simply displaying the data does not meet my needs. We may need to view the relevant information of each block or add some highlighting effects.

Highlight by default

L7Add a default highlight effect to the layer, and the default highlight effect can change the color.

chinaPolygonLayer.active(true); // Turn on the default highlighting effect

chinaPolygonLayer.active({ color: red }); // Turn on and set the highlight color to red

Default blue highlight effect	Change highlight color

Custom highlight effect

The default highlight effect can only change the color, which may not meet my needs. We may need a white stroke. Can this be achieved? The answer is definitely yes.

1. Add a new layer as the highlight layer, set the data to empty data and the shape toline

const hightLayer = new LineLayer({
  zIndex: 4, //Set the display level
  name: 'highlight',
})
  .source({
    type: 'FeatureCollection',
    features: [],
  })
  .shape('line')
  .size(2)
  .color('red');
scene.addLayer(hightLayer);

2. In this way, we can listen to the mouse events of the layer that needs to be highlighted, obtain the currently selected data, and then updatehightLayerIt can also achieve stroke highlighting effect.

chinaPolygonLayer.on('click', (feature) => {
  hightLayer.setData({
    type: 'FeatureCollection',
    features: [feature.feature],
  });
});

3. Add a click highlight red stroke effect to the layer

At this point we have learned how to customize the highlight effect. Here is a small question: “How to achieve the double stroke highlight effect?”

View example

Add information Popup information window

During mouse interaction, in addition to highlighting the crossed area, we also need information related to the information area, hereL7providedPopupComponents are used to display relevant information on the map.

Introduce objects

import { Popup } from '@antv/l7';

We can decide when to display Popup by listening to mouse events on Layer.

layer.on('mousemove', (e) => {
  const popup = new Popup({
    offsets: [0, 0],
    closeButton: false,
  })
    .setLnglat(e.lngLat)
    .setHTML(
      `<span>地区: ${e.feature.properties.name}</span><br><span>确诊数: ${e.feature.properties.case}</span>`,
    );
  scene.addPopup(popup);
});

View example

Add legend

Above we have learned how to visualize data. On the map we can treat different areas as different colors, but how to understand what different colors mean, we need to add a legend.

L7There is currently no default legend component. You need to create the legend yourself. Here we introduce how toL7 ControlThe base class creates a legend component. Of course, you can also implement an independent legend.DOMcomponents.

L7Provides a defaultZoom，Scale，LogoThese components are all based on the same base classControlComponents, today we are based onControlImplement a custom legend component.

1. introduceControlbase class

import { Control } from '@antv/l7';

2. Initialize base class

const legend = new Control({
  position: 'bottomright',
});

3. set upControlShow content

by extensionControlofonAddWe can freely customize the methodControlNeed to display content and interaction.

legend.onAdd = function () {
  var el = document.createElement('div');
  el.className = 'infolegend legend';
  var grades = [0, 10, 20, 50, 100, 200, 500];
  for (var i = 0; i < grades.length; i++) {
    el.innerHTML +=
      '<i style="background:' +
      color[i] +
      '"></i> ' +
      grades[i] +
      (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
  }
  return el;
};

4. Add to map

scene.addControl(legend);

View example

Here we introduce how to define it by yourselfControlway to implement the legend, by customizingControlMany of our map components, such as full-screen components, positioning components, and many other components needed for business, lucky students can try them out.

Timing change diagram

What we visualized above is static data, but many times our data changes with time. How to visualize time series data? Here we introduce two time series data visualization methods.

Prepare data

Geographical data:U.S. state administrative division dataAttribute data:0908-1008 COVID-19 diagnosis data by state in the United States in the past 30 days。

update data

As time changes, the data will definitely change, so the simplest way is to update the data every time.

otherPolygonLayer.setData(newData);

Complete example

update color

A large part of the scenarios for updating time series data are updating attribute data, such as data from different years in each province.GDPData, spatial data itself has not changed (no increase or decrease and no boundary update). In this case, the surface layer may only need to be updated according to the new data. Pass of coursesetDataIt can also be achieved.L7Looking at the internal implementation mechanism Updatecoloris more efficient thansetDataMuch more efficient.

Update the data display by updating the color mapping field.

const setColor = (d) => {
  return d > 100000
    ? color[7]
    : d > 80000
      ? color[6]
      : d > 40000
        ? color[5]
        : d > 20000
          ? color[4]
          : d > 10000
            ? color[3]
            : d > 5000
              ? color[2]
              : d > 1000
                ? color[1]
                : color[0];
};

chinaPolygonLayer.color('2020-09-01', setColor);
chinaPolygonLayer.color('2020-09-02', setColor);

Note that the updated color takes effect and needs to be calledScene.render();。

View example

Add map label

L7BaseWebGLIt is relatively simple to draw simple points, lines, and surfaces. It is more difficult to implement more complex map annotations. In order to solve this problemL7AddedMarkerComponents you can base onDOMAchieve various complex annotations.

import { Marker } from '@antv/l7';
 const el = document.createElement('label');
 el.className = 'labelclass';
el.textContent = nodes[i].v + '℃';
el.style.background = 'red';
el.style.borderColor = '#fff;
const marker = new Marker({ element: el})
  .setLnglat({ lng: 112, lat: 30});
scene.addMarker(marker);

View full code

Add map component

In addition to the map visualization layer, we may need to add auxiliary map tools such as zoom in and out, scale bar, layer list and other components.

import { Scale, Zoom } from '@antv/l7';
const zoomControl = new Zoom({ position: 'topright' });
const scaleControl = new Scale({ position: 'bottomright' });
//Add to map scene
scene.addControl(zoomControl);
scene.addControl(scaleControl);

Custom component

The legend introduced above is a custom component. We can also add any component content or add map interaction to the component. For more usage methods, please refer toL7Provides default componentsSource code

Use templates for different projects

Different project templates inCodeSandboxYou can preview it or download it locally.

React

address

Vue

address

Angular

address

HTML CDN

address