openlayer:07点击实现切换图层之addLayer

在地图应用中，通常包含多个图层，如影像图层、底图图层和注记图层。为了显示特定图层，可以将其置于最上层。

1. removeLayer和addLayer方法：通过移除和添加图层来控制显示。例如，使用map.removeLayer(biaojilayer)隐藏标记图层，使用map.addLayer(biaojilayer)重新显示。

完整代码

import { useState ,useEffect} from 'react';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import {fromLonLat} from 'ol/proj';
import './System.css'
import 'ol/ol.css';
let map=null;
function System() {let view=new View({center:fromLonLat([116.3903,39.9072]),zoom:7,})let ditulayer=new TileLayer({source:new XYZ({url :"http://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=528881a2c3d647268c04ab43dc46bd51"})})let biaojilayer=new TileLayer({source:new XYZ({url :"http://t3.tianditu.com/DataServer?T=cva_w&tk=faf4cf166d31edcaba5de523eae8084f&x={x}&y={y}&l={z}"})})useEffect(()=>{map=new Map({target:"mapp",view:view,layers:[ditulayer,biaojilayer]})})function go(){map.removeLayer(biaojilayer)}function back(){map.addLayer(biaojilayer)}return (<><div id="mapp" style={{width: "100%",height: "97vh"}}><div className="updown_btns"><div onClick={go}>显示底图层</div><div onClick={back}>显示标记图层</div></div></div></>)
}export default System