OpenLayers6学习笔记（三）——瓦片地图基础知识
1.数据加载OpenLayers地图数据是通过图层（Layer）来组织和渲染的，通过数据源（Source）来设置具体的地图数据源。Layer可以看作是渲染地图的容器。具体数据需要通过Source设置。Source和Layer是一对一的关系。源必须有层。根据数据源（Source），地图数据可以分为Image、Tile、Vector三种数据源，分别对应地图图层中Image、Tile、Vector三种图层的设置（层）。其中，矢量图层Vector使用Style来设置矢量图元素的渲染方式和外观。Tile类是瓦片的抽象基类，其子类作为各种瓦片数据的数据源。Vector类是矢量数据源的基类，为矢量图层提供具体的数据源，包括直接组织或读取矢量数据（Features）、来自远程数据源的矢量数据（即通过url设置数据源路径）、etc.Image类是单图基类，其子类有canvas（画布）元素、服务器图片、单张静态图片、WMS单图等2.ol.source.Tile由于一些历史问题，多服务提供者、多种标准等诸多原因，要支持世界上大部分的瓦片数据，就需要针对这些差异（主要是瓦片坐标系不同，分辨率不同等）提供对不同瓦片数据源的支持，ol.source。Tile大致可以分为几类：在线服务源：如ol.source.BingMaps（微软提供的Bing在线地图数据）、ol.source。Stamen（由Stamen提供的在线地图数据）等，无需自己的地图服务器即可直接使用。支持协议标准的源：如ol.source.TileArcGISRest、ol.source.WMTS、ol.source.TileJSON等，如果要使用，必须学习相应的协议，找到支持这些协议的服务器提供数据源（server可以是地图服务商提供的地图服务器，也可以是自己搭建的）。ol.source.XYZ：目前很多地图服务都支持XYZ请求，应用广泛，简单易学。3、瓦片坐标系瓦片坐标系是瓦片地图的组织参照系，它规定了每个瓦片的行号、列号和层号。OpenLayers提供了一个ol.source.TileDebug类用于调试瓦片坐标系。有了这个类，你就可以清楚的看到每一个瓦片的坐标。importReact,{useEffect}from'react';import{Map,View}from'ol';importTileLayerfrom'ol/layer/Tile';importTileDebugfrom'ol/source/TileDebug';import{defaults}from'ol/control'；从'ol/proj'导入{fromLonLat}；从'ol/source/OSM'导入OSM；导入'ol/ol.css'；导出默认函数Index(){useEffect(()=>{//初始化地图initMap();},[])/***初始化地图*/constinitMap=()=>{letosmSource=newOSM();newMap({//挂载到div容器中id为maptarget的对象:'map',//设置地图层layers:[//创建一个使用OpenStreetMapmapsource的瓦片层newTileLayer({source:osmSource}),//创建显示OpenStreetMapTile网格层的地图源newTileLayer({source:newTileDebug({//WebMercatorprojectioncoordinatesystemprojection:'EPSG:3857',//获取OpenStreetMap的tile坐标系mapsourcetileGrid:osmSource.getTileGrid()})})],//设置地图视图view:newView({//将空间参考系统设置为'EPSG:3857'projection:'EPSG:3857',//地图的显示中心center:fromLonLat([0,0]),//地图的显示级别zoom:3}),controls:defaults({//去掉属性控件attribution:false,//去掉缩放控件zoom:false,//去掉旋转控件rotate:false})})}return(
)}第一个数字是水平z，第二个数字是经度方向的x（列号），第三个数字是y（行号）在纬度方向）4.分辨率4.1分辨率介绍分辨率的简单定义就是屏幕上1个像素表示的现实世界中地面上的实际距离。以OpenStreetMap在线地图为例，level0使用1个tile，level1使用4个tile。通过计算可知，第0级整张地球图像的大小为256×256像素，第1级整张地球图像的大小为512×512像素。0级和1级代表的地球范围是一样的（经度[-180°,180°]，纬度[-90°,90°]）。0级时，一个像素表示水平方向的360°÷256=1.40625°的经度范围，垂直方向的180°÷256=0.703125°的纬度范围。这两个数字就是分辨率，即一个像素所代表的现实世界的范围，可以是度（地理坐标系）、米（投影坐标系）或其他单位。4.2Web墨卡托投影坐标系的分辨率。WebGIS中使用的在线瓦片地图采用Web墨卡托（Mercator）投影坐标系（OpenLayers默认使用EPSG:3857）。投影后整个地球是一个正方形，范围为经度[-180°,180°]，纬度[-85°,85°]，单位为度。对应的Web墨卡托投影坐标系范围为x[-20037508.3427892,20037508.3427892],y[-20037508.3427892,20037508.3427892]，计算x和y方向各层级瓦片地图分辨率的公式可概括为：分辨率=范围÷(256×2^z)。rang：表示x方向或y方向的整个范围，如20037508.3427892×2。256：表示??瓦片的边长，单位为像素。2^z：表示层级z下x或y方向的瓦片数。4.3获取OpenLayers使用的默认分辨率'ol/control'；从'ol/proj'导入{fromLonLat}；从'ol/source/OSM'导入OSM；从'ol/Observable'导入{unByKey}；导入'ol/ol.css'；导入样式from'./index.less';exportdefaultfunctionIndex(){//mapconstmap=useRef
();//当前级别const[zoom,setZoom]=useState(3);//当前分辨率const[resolution,setResolution]=useState(19567.8792);useEffect(()=>{//初始化地图initMap();//绑定视图事件constresolutionChange=map.current.getView().on('change:resolution',resolutionChangeEvent);return()=>{//取消绑定视图事件unByKey(resolutionChange);}},[])/***初始化地图*/constinitMap=()=>{map.current=newMap({//挂载到id为div的容器maptarget:'map',//设置地图图层layers:[//使用OpenStreetM创建图层apmapsourcenewTileLayer({source:newOSM()})],//设置地图视图view:newView({//设置空间参考系统为'EPSG:3857'projection:'EPSG:3857',//地图中心的显示中心:fromLonLat([0,0]),//地图的显示级别zoom:zoom,//设置缩放级别为整数constrainResolution:true,//关闭无级缩放贴图smoothResolutionConstraint:false}),controls:defaults({//去掉属性控件attribution:false,//去掉缩放控件zoom:false,//去掉旋转控件rotate:false})})}/***分辨率改变事件*/constresolutionChangeEvent=()=>{letzoom=parseInt(map.current.getView().getZoom());让分辨率=map.current.getView().getResolution().toFixed(4);设置缩放（缩放）；设置分辨率（分辨率）；}return( 