L7 recommended in this issue is a WebGL based open source large-scale geospatial data visual analysis development framework launched by AntV data visualization team of Ant Financial. The L in L7 represents Location, and the 7 represents the seven continents of the world, implying the ability to provide visual analysis of global location data.

Core features

Data-driven visualization

Data-driven, from number to shape, support rich map visualization types, better insight into data.

2D and 3D integrated high performance rendering of massive data

Million-level spatial data real-time, dynamic rendering.

Simple and flexible data access

Supports access to CSV, JSON, geojson and other data formats, and can customize data formats according to requirements without complex spatial data conversion.

Multi-map base map support, support offline Intranet deployment

AmAP’s domestic legal and compliant geographic base map, Mapbox meets the needs of international business.

Support for rich chart types

< Point layer

• Bubble map
• Scatter plot
• Symbol map
• 3D column map
• Aggregate map
• Composite chart map
• Custom Marker

Line layer

• Path map
• Arc, support 2D arc, 3D arc and great circle route
• Isoline

< Surface layer

• Fill plot
• 3D fill map

< Thermal map

• Classical heat map
• Cellular thermal map
• Grid thermal map

raster map

• Picture
• Raster

Use

Installation

npm install @antv/l7

Initialize map

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

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'light',
    pitch: 0,
    center: [107.054293, 35.246265],
    zoom: 4.056,
  }),
});

Add layer

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

const pointLayer = new PointLayer()
  .source(data)
  .shape('circle')
  .size('mag', [1, 25])
  .color('mag', ['#5B8FF9', '#5CCEA1'])
  .style({
    opacity: 0.3,
    strokeWidth: 1,
  });

scene.addLayer(pointLayer);

Autonext plug-in

L7 can easily use the plug-in capability provided by AmAP when using Amap as the map base

< Register

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    center: [116.475, 39.99],
    pitch: 0,
    zoom: 13,
    plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
  }),
});
// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
// In order to use the capabilities of the corresponding plug-in, you should first register the corresponding plug-in in the plugin 

// The loaded AMap is mounted on the global window object 
scene.on('loaded', () => {
  window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
    // add control
    scene.map.addControl(new AMap.ToolBar());

    var linesearch = new AMap.LineSearch({
      pageIndex: 1, //Page number, default is 1
      pageSize: 1, //Number of results displayed on a single page, default 20, maximum 50
      city: ' Beijing ', // Limit the query city, which can be the city name (Chinese/Chinese spelling), the city code, the default value is "national" 
      extensions: 'all', // Whether to return bus route details, the default is "base" 
    });

    //Perform bus route keyword query 
    linesearch.search('536', function(status, result) {
      // Print status information Status and result information result
      // ... do something
    });
  });
});

Wind field layer

WindLayer is used to store the picture of wind field information, set the parameters related to wind speed line sampling, and visualize the trend and intensity of the sampled wind field line on the map.

< Register

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