---
title: L7 Layer
source: https://vjmap.com/en/guide/l7.html
---

# L7 Layer

::: tip Note
The L7 layer is provided as a plugin. Load its script via `vjmap.addScript({src: "js/l7.js"})`.
:::

### Getting Started

```js
// Add the L7 library below. For L7 usage, refer to the L7 official documentation https://l7.antv.vision/zh
if (typeof L7 !== "object") {
    // If the deck environment is not available
    await vjmap.addScript({
        src: "js/l7.js"
    });

}

const waveLayer = new L7.PointLayer({ zIndex: 2, blend: 'additive' })
    .source(
        [
            { lng: 0, lat: 0, size: 10000 },
        ],
        {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        }
    )
    .shape('circle')
    .color('#00F8F9')
    .size('size', v => v / 100.0)
    .animate(true)
    .style({
});

scene.on('loaded', () => {
    scene.addLayer(waveLayer);
});
```

**For detailed usage, refer to the [L7](https://l7.antv.vision/zh) official documentation**



### Example

<mapFrame src="/examples/index.html?name=l7"/>

<br/>
<br/>

#### 
```js
(async () => {
    // --Light pillars and path animation--
// JavaScript code
// Create map service object with service URL and token
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
    let res = await svc.openMap({
        mapid: env.exampleMapId, // Map ID (ensure this ID exists; you can upload new graphics to create one)
        mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry data rendering
        style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
    })
    if (res.error) {
        message.error(res.error)
    }
// Get map bounds
    let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// Create coordinate system
    let prj = new vjmap.GeoProjection(mapExtent);

// Create map object
    let map = new vjmap.Map({
        container: 'map', // container ID
        style: svc.rasterStyle(), // Raster tile style
        center: prj.toLngLat(mapExtent.center()), // Center point
        zoom: 2,
        pitch: 60,
        //minZoom: initZoom - 3,//Can set a minimum zoom level
        renderWorldCopies: false
    });
// Attach service object and coordinate system to map
    map.attach(svc, prj);
    map.setMaxBounds(map.toLngLat(prj.getMapExtent()));
// Enable click highlight (elements highlight when clicking on map elements)
    map.enableLayerClickHighlight(svc, e => {
        if (!e) return;
        let msg = {
            content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`,
            key: "layerclick",
            duration: 5
        }
        e && message.info(msg);
    })

    let mousePositionControl = new vjmap.MousePositionControl({
        showZoom: true,
        showLatLng: true
    });
    map.addControl(mousePositionControl, "bottom-left");

    await map.onLoad();
    map.setRasterOpacity(svc.rasterLayerId(), 0.3);

    let c = map.getCenter()

// Add L7 library below. For L7 usage, refer to L7 official documentation https://l7.antv.vision/zh
    if (typeof L7 !== "object") {
        // If the deck environment is not available
        await vjmap.addScript({
            src: "js/l7.js"
        });

    }
// Create L7 scene below
    const scene = new vjmap.Scene(L7, map);

    const waveLayer = new L7.PointLayer({ zIndex: 2, blend: 'additive' })
        .source(
            [
                { lng: 0, lat: 0, size: 10000 },
            ],
            {
                parser: {
                    type: 'json',
                    x: 'lng',
                    y: 'lat'
                }
            }
        )
        .shape('circle')
        .color('#00F8F9')
        .size('size', v => v / 100.0)
        .animate(true)
        .style({
        });

    const barLayer = new L7.PointLayer({ zIndex: 2, depth: false })
        .source(
            [
                { lng: 0, lat: 0, size: 10000 },
            ],
            {
                parser: {
                    type: 'json',
                    x: 'lng',
                    y: 'lat'
                }
            }
        )
        .shape('cylinder')
        .color('#00F8F9')
        .size('size', v => [ 5, 5, v / 100 ])
        .active({
            color: 'red',
            mix: 0.0,
        })
        .animate(true)
        .style({
            opacityLinear: {
                enable: true, // true - false
                dir: 'up' // up - down
            },
            lightEnable: false
        });

    scene.addImage(
        'arrow',
        'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg'
    );

    let data = {
        "type": "FeatureCollection",
        "name": "dl2",
        "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
        "features": [
            { "type": "Feature", "properties": { }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ -50, -30 ], [ 0, 0], [ 20, 40 ] ] ] } },
        ]}
    const layer = new L7.LineLayer({})
        .source(data)
        .size(10)
        .shape('line')
        .texture('arrow')
        .active(true)
        .color('#00F8F9')
        .animate({
            interval: 1, // Interval
            duration: 1, // Duration, delay
            trailLength: 2 // Flow line length
        })
        .style({
            opacity: 0.6,
            lineTexture: true, // Enable line texture
            iconStep: 10, // Set texture spacing
            borderWidth: 0.4, // Default 0, max 0.5
            borderColor: '#fff' // Default #ccc
        });

    layer.on('click', (e) => {
        console.log('click', e);
    });

    scene.on('loaded', () => {
        scene.addLayer(waveLayer);
        scene.addLayer(barLayer);
        scene.addLayer(layer);
    });
})();
```