antV L7 controls the visibility of different layers

In a project, too many layers are used on the map, which may cause it to look messy. Sometimes it is required to make a component to control the visibility of each layer. Below is a demo example

Mainly through the show method and hide method of the layer, you can also use the setOptions method to handle it.

The layers controlled by this demo are 3 PointLayer (you can choose different types according to your own project). The map example uses Gaode Map.

1. Build project structure

<div class="antBox">
        <div class="top">
            <el-button type="warning" @click="toHome()">Return to the home screen</el-button>
        </div>
        <div class="main">
            <div class="layers">
                <el-checkbox-group v-model="checkData" @change="checkDataChange">
                    <el-checkbox v-for="item in checkList" :key="item.value" :label="item.value" style="color: #fff;">{<! -- -->{
                        item.label }}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div id="mapBox"></div>
        </div>
    </div>

2. Quote the data you need

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { PointLayer, PolygonLayer, Scene } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { load } from "@amap/amap-jsapi-loader";
import sichuanMap from '@/assets/json/sichuan.json' //Sichuan map json data
import node1 from '@/assets/imgs/points/node.png' //Node picture 1
import node2 from '@/assets/imgs/points/nodeActive.png' //Node picture 2

3. Create map instances and map objects

//Initialize the map
async function initMap() {
    //Get Gaode’s map first
    let AMap = await load({
        key: "your own registered key",
        version: "2.0",
        plugins: [
            "AMap.DistrictSearch",
            "AMap.DistrictLayer",
            "AMap.TileLayer",
            "AMap.Polygon",
            "AMap.GeoJSON",
            "AMap.Weather",
        ],
    })
    let gaodeMap = new AMap.Map('mapBox', {
        center: [103.82112953, 30.12207207],
        zoom: 6,
        pitch: "30",
        viewMode: "2D",
        layers: [
            new AMap.TileLayer.Satellite() // Satellite layer
        ]
    })

    scene.value = new Scene({
        id: 'mapBox',
        logoVisible: false,
        map: new GaodeMap({
            mapInstance: gaodeMap, //The map instance uses Gaode map (if you use the official map, you can ignore lines 115-136 of the code)
        })
    })
    //Avoid asynchronous problems
    setTimeout(() => {
        let sichuanLayer = new PolygonLayer()
            .source(sichuanMap)
        scene.value.addLayer(sichuanLayer)
    }, 200)
 scene.value.on('loaded', () => {
        addLayers() //Register various layer nodes
    })

4. Create a layer to control the visibility

let entPointsLayer: any; //Enterprise node
let camerasLayer: any; //Monitoring node
let atmospheresLayer: any //Atmosphere node
//Register picture
function addLayers() {
    //Image registration
    scene.value.addImage('node1', node1)
    scene.value.addImage('node2', node2)
    //Create enterprise mark points
    entPointsLayer = new PointLayer({
        name: 'entPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.enterprise, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //Create monitoring mark points
    camerasLayer = new PointLayer({
        name: 'camPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.camera, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)
    //Create atmospheric monitoring mark points
    atmospheresLayer = new PointLayer({
        name: 'atmPoints',
        visible: false,
        zIndex: 2
    })
        .source(nodesData.value.atmosphere, {
            parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
            }
        })
        .shape('url', ['node1', 'node2'])
        .size(22)

    scene.value.addLayer(entPointsLayer)
    scene.value.addLayer(camerasLayer)
    scene.value.addLayer(atmospheresLayer)
}

5. Multi-select box control events

//Multiple selection box selection event
function checkDataChange(val: any) {
    //Hide all nodes during initialization
    entPointsLayer.hide()
    camerasLayer.hide()
    atmospheresLayer.hide()
    //Determine the selected value in the multi-select box
    if (val & amp; & amp; val.length > 0) {
        val.forEach((item: any) => {
            if (item === 1) {
                entPointsLayer.show()
            } else if (item === 2) {
                camerasLayer.show()
            } else {
                atmospheresLayer.show()
            }
        })
    } else { //If no value is selected, hide all nodes
        entPointsLayer.hide()
        camerasLayer.hide()
        atmospheresLayer.hide()
    }
}

6. Complete code display (including demo data)