WebGIS——Openlayers加载图层

最新推荐文章于 2024-09-13 10:30:00 发布

置顶 CheryW

最新推荐文章于 2024-09-13 10:30:00 发布

阅读量1.5k

点赞数

分类专栏： GIS 文章标签： html js 前端

本文链接：https://blog.csdn.net/CheryW/article/details/121639401

版权

GIS 专栏收录该内容

16 篇文章 11 订阅

订阅专栏

本文详细介绍了如何使用OpenLayers库加载地图，包括创建HTML地图容器、引入库文件以及初始化地图。示例中展示了加载谷歌离线切片和geoserver EPSG900913切片的方法，通过XYZ源和TileUrlFunction实现瓦片的动态拼接。此外，还提供了处理行列号和层级的转换函数，确保正确显示地图切片。

摘要由CSDN通过智能技术生成

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;
}