WebGIS——Openlayers加载图层
Openlayers加载图层
一、创建Html文件并在body中放入一个Div作为地图显示的容器
<body>
<div id="map" class="map">div>
body>
二、引入Openlayers的CSS文件及js文件
在head中引入在线文件，如下：
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js">script>
或是下载后引入相对路径（部分离线项目只能下载后引入）
三、初始化地图
也可挂载在window上
window.OlMap = new ol.Map({
target: 'map', //指定渲染的div容器id
layers: [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;
}