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切片
WebGIS——Openlayers加载图层_第1张图片
观察可以发现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;
}

你可能感兴趣的:(GIS,html,js,前端)