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)
<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>