一、控件介绍属性控件（Attribution）：显示地图资源的版权或属性，默认添加到地图中。全屏控制（FullScreen）：控制地图的全屏显示。坐标选择器控件（MousePosition）：显示鼠标所在的地图位置的坐标。鹰眼控制（OverviewMap）：地图的概览图。比例尺控件（ScaleLine）：地图比例尺。旋转控件（Rotate）：控制地图的旋转，默认添加到地图中，alt+shift+左键旋转地图。缩放控件（Zoom）：控制地图的缩放比例，默认添加到地图中。滑块缩放控件（ZoomSlider）：以滑块的形式缩放地图。缩放到特定位置控件（ZoomToExtent）：将地图缩放到特定位置。2.控件的使用2.1所属控件2.2全屏控件map.current.addControl(newFullScreen());2.3坐标拾取控件map.current.addControl(newMousePosition({//设置数据格式coordinateFormat:createStringXY(6),//设置空间参考系为'EPSG:4326'projection:'EPSG:4326'}));2.4鹰眼控件map.current.addControl(newOverviewMap({//概览层layers:[newTileLayer({source:newOSM()})],//控制鹰眼控件展开collapsed:false}));2.5缩放控制map.current.addControl(newScaleLine());2.6旋转控制2.7缩放控制2.8滑块缩放控制map.current.addControl(newZoomSlider());2.9缩放到特定位置控制map.current。addControl(newZoomToExtent({extent:[//位置矩形左下角坐标12667718,2562800,//位置矩形右上角坐标12718359,2597725]}))3.删除控件默认添加到地图map.current=newMap({//挂载到id为div的容器target:'map',//设置地图图层layers:[//使用OpenStreetMap地图源创建一个图块层newTileLayer({source:newOSM()})],//设置地图视图view:newView({//将空间参考系统设置为'EPSG:3857'projection:'EPSG:3857',//地图显示中心center:fromLonLat([0,0]),//地图显示级别zoom:3}),controls:defaults({//去掉属性控件attribution:false,//去掉缩放控件zoom:false,//去掉旋转控件rotate:false})})4.修改控件样式OpenLayers承载控件DOM元素都设置了类名，可以通过CSS类选择器修改指定的控件样式importReact,{useRef,useEffect}from'react';import{Map,View}from'ol';importTileLayerfrom'ol/layer/Tile';import{defaults,FullScreen,MousePosition,OverviewMap,ScaleLine,ZoomSlider,ZoomToExtent}从'ol/control'；从'ol/coordinate'导入{createStringXY}；从'ol/proj'导入{fromLonLat}；从'ol/source/OSM'导入OSM；导入'ol/ol.css'；从'./index.less'导入样式；exportdefaultfunctionIndex(){//mapconstmap=useRef
