importReact,{useRef,useState,useEffect}from'react';import{Map,View}from'ol';importTileLayerfrom'ol/layer/Tile';import{defaults}from'ol/control';import{fromLonLat}from'ol/proj';import{OSM,Stamen,BingMaps}from'ol/source';import{Radio}from'antd';import'ol/ol.css';importstylesfrom'./index.less';exportdefaultfunctionIndex(){//mapconstmap=useRef();//当前层const[currentLayer,setCurrentLayer]=useState('osm');useEffect(()=>{//初始化地图initMap();},[])/***初始化地图*/constinitMap=()=>{//使用OpenStreetMap地图创建瓦片层sourceletosmLayer=newTileLayer({来源:newOSM()});osmLayer.set('layerId','osm');//使用StamenMap创建一个图块层mapsourceletstamenMapLayer=newTileLayer({source:newStamen({layer:'watercolor'})});stamenMapLayer.set('layerId','stamenMap');//使用Bing地图创建图块图层mapsourceletbingMapLayer=newTileLayer({source:newBingMaps({key:'必应地图的key，可以去官网申请',imagerySet:'AerialWithLabels'})});bingMapLayer.set('layerId','bingMap');//加载地图map.current=newMap({//挂载到id为map的div容器target:'map',//设置地图层layers:[osmLayer,stamenMapLayer,bingMapLayer],//设置mapviewview:newView({//设置空间参考系为'EPSG:3857'projection:'EPSG:3857',//地图中心的显示中心:fromLonLat([0,0]),//地图的显示级别zoom:3}),controls:defaults({//去掉属性控件attribution:false,//去掉缩放控件zoom:false,//去掉旋转控件rotate:false})})}useEffect(()=>{constlayerCollection=map.current.getLayers().getArray();layerCollection.forEach((v:any)=>{if(v.get('layerId')===currentLayer){v.setVisible(true);}else{v.setVisible(false);}});},[currentLayer])return(
