Openlayers加载图层
一、创建Html文件并在body中放入一个Div作为地图显示的容器
<body><div id="map" class="map"></div></body>
二、引入Openlayers的CSS文件及js文件
在head中引入在线文件，如下：
<link rel="stylesheet" href="/en/v4.6.5/css/ol.css"><script src="/en/v4.6.5/build/ol.js"></script>
或是下载后引入相对路径（部分离线项目只能下载后引入）
三、初始化地图
也可挂载在window上
window.OlMap = new ol.Map({target: 'map', //指定渲染的div容器idlayers: [GoogleLayer,geoLayer], // 要加载的切片数据，以下以谷歌离线切片及geoserver EPSG900913切片为例view: new ol.View({center: ol.proj.fromLonLat([116.083114, 24.564743]), //中心点坐标zoom: 15 //默认显示的地图层级})});
切片加载
谷歌离线切片及geoserver EPSG900913切片加载都是通过layer里面的Tile进行添加的，souce是通过地图级别，行列号的规律对URL进行拼接的，即需要用到source.XYZ，具体用到哪个方法需要根据切片类型调取相关方法，代码如下：
new ol.layer.Tile({source:new ol.source.XYZ({// 不同切片写法不同，自行按规律填写})})
1、谷歌离线切片
观察下载的离线切片的命名，xyz很明显，直接加载如下：
window.GoogleLayer= new ol.layer.Tile({source : new ol.source.XYZ({url : 'http://localhost:8080/baseMap/{z}/{x}/{y}.png'})});
2、geoserver EPSG900913切片
观察可以发现epsg_900913是坐标系，后面的_10是z，图片层级通过金字塔原理可知道为行列号，即x_y，但会有需要补0的情况，第二级有点看不懂，研究了好久才整出来。
设瓦片级别为z，图片层级分别为x,y
第二层文件总数为w
取整—— f =floor(( z-1）/2)
w=pow(4,f)
第二层文件的行列号数相等，设为h=pow(2,f)
第三层——每一级别的瓦片数为p=pow(4,z)
第三层——每一级别行列号的个数g=pow(2,z)
window.geoLayer= new ol.layer.Tile({source : new ol.source.XYZ({tileUrlFunction :function (xyz) {if (!xyz) return ""; const z=xyz[0];let x=Math.abs(xyz[1]);let y=Math.abs(xyz[2]);const xyz_convert= convert_(z,x,y);x=xyz_convert[0];y=xyz_convert[1];const shift = z / 2;const half = 2 << shift; // 将2转为二进制后，右移shift位，如2转化为二进制为00000010，然后再右移一位变成00001000，转换为十进制就是8 n右移位数m的结果a=n*pow(2,m)，左移的话结果b=n/pow(2,m)let digits = 1;if (half > 10)digits = parseInt(Math.log(half));const halfx = parseInt(x / half);const halfy = parseInt(y / half);x=parseInt(x);y=parseInt(y)+1;var url=tileRoot+"/EPSG_900913"+"_"+padLeft_(2,z)+"/"+padLeft_(digits,halfx)+"_"+padLeft_(digits,halfy)+"/"+padLeft_(2*digits,x)+"_"+padLeft_(2*digits,y)+"."+format;return url;}})});//字符截取var padLeft_ = function(num, val) {return (new Array(num).join('0') + val).slice(-num);};//xy行列转换var convert_=function(z, x, y) {var extent = Math.pow(2, z);if (x < 0 || x > extent - 1) {console.log("The X coordinate is not sane: " + x);return;}if (y < 0 || y > extent - 1) {console.log("The Y coordinate is not sane: " + y);return;}var gridLoc = [x, extent - y - 1, zoomLevel];return gridLoc;}
![[推荐]中国达人秀：刘伟的1500字作文](https://1500zi.500zi.com/uploadfile/img/2024/08/28/d8eef0d8c8c197a59e7d5cc3ca1e9f0f.jpg)
