OpenLayers多源数据加载六：各种瓦片地图加载的总结 |
您所在的位置：网站首页 › origin大厅加载不出来 › OpenLayers多源数据加载六：各种瓦片地图加载的总结 |
OpenLayers多源数据加载六：各种瓦片地图加载的总结
|
目录 一、TMS瓦片 二、WMTS瓦片加载 三、百度瓦片地图 四、腾讯瓦片地图 一、TMS瓦片先看看TMS瓦片的规则，瓦片坐标系原点（origin）在左下角，X轴从左至右递增，Y轴从下往上递增（先计算左下角，然后计算右上角）。
查看OpenLayers的API文档可以发现，瓦片坐标从左向右递增，从下向上递增：
因此，用OpenLayers来加载TMS规范的瓦片需要对ol.tilegrid.TileGrid类做出一些调整。 将ol.tilegrid.TileGrid类的origin设置为ol.extent.getBottomLeft(extent)后，规则也是从左下角到右上角，X轴从左至右递增，Y轴从下往上递增，与TMS规则是完全一致的，参考代码与参考效果如下： var resolutions = []; //分辨率数组 var tileSize = 256; // 瓦片大小 //深圳地区 var extent = [12665080.52765571, 2550703.6338763316, 12725465.780000998, 2601457.820657688]; var projection = new ol.proj.get('EPSG:3857'); // 获得对应的投影坐标系 var projectionExtent = projection.getExtent(); // 投影坐标系的范围 // 初始化分辨率数组 for(var i = 0; i < 19; i++){ resolutions[i] = Math.pow(2, 18 - i); } var tileGrid = new ol.tilegrid.TileGrid({ // 投影坐标系范围的左下角作为瓦片坐标系原点 origin: ol.extent.getBottomLeft(projectionExtent), resolutions: resolutions, extent: projectionExtent, tileSize: [256, 256] }); var map = new ol.Map({ target: 'map', layers: [ // 调试瓦片 new ol.layer.Tile({ source: new ol.source.TileDebug({ projection: projection, tileGrid: tileGrid, wrapX: false }) }) ], view: new ol.View({ projection: projection, center: [12697184.079535482, 2563239.3065151004], //深圳 resolutions: resolutions, zoom: 0 }) });
假如上面代码中，想只显示深圳片区的瓦片，其余的瓦片不显示，这种场景是很普遍的，那么代码调整如下： var tileGrid = new ol.tilegrid.TileGrid({ // 投影坐标系范围的左下角作为瓦片坐标系原点 origin: ol.extent.getBottomLeft(projectionExtent), resolutions: resolutions, extent: extent, // 设置为深圳片区的extent tileSize: [256, 256] });其他代码不要变，效果如下：
二、WMTS瓦片加载 WMTS规则如下，origin在左上角，X轴从左至右递增，Y轴是从上往下递增（与OpenLayers默认设置相反）
三、百度瓦片地图 百度瓦片地图规则如下：origin在[0,0]，X轴从左至右递增，Y轴从下往上递增（从左下角到右上角，与Openlayers默认设置相同）。
从百度的瓦片规则看出来，与OpenLayers的ol.tilegrid.GridTile规则是完全一致的，将origin设置为[0, 0]即可。参考代码如下： Document var resolutions = []; //分辨率数组 var tileSize = 256; // 瓦片大小 //深圳地区 var extent = [12665080.52765571, 2550703.6338763316, 12725465.780000998, 2601457.820657688]; var projection = new ol.proj.get('EPSG:3857'); // 获得对应的投影坐标系 var projectionExtent = projection.getExtent(); // 投影坐标系的范围 // 初始化分辨率数组 for(var i = 0; i < 19; i++){ resolutions[i] = Math.pow(2, 18 - i); } var tileGrid = new ol.tilegrid.TileGrid({ origin: [0, 0], resolutions: resolutions, extent: projectionExtent, tileSize: [256, 256], }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.TileImage({ projection: projection, tileGrid: tileGrid, tileUrlFunction: function(xyz){ if(!xyz){ return ""; } var z = xyz[0]; var x = xyz[1]; var y = xyz[2]; // 百度使用M来代表负号，所以需要调整 if(x < 0){ x = 'M' + (-x); } if(y < 0){ y = "M" + (-y); } return "http://online3.map.bdimg.com/tile/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20141119&scaler=1"; } }) }) ], view: new ol.View({ center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'), zoom: 10, resolutions: resolutions }) });四、腾讯瓦片地图 腾讯瓦片地图完全遵守TMS规则，地图投影坐标系采用Web Mercator投影，最小缩放级别为第四级。参考代码如下： Document var resolutions = []; //分辨率数组 var tileSize = 256; // 瓦片大小 //深圳地区 var extent = [12665080.52765571, 2550703.6338763316, 12725465.780000998, 2601457.820657688]; var projection = new ol.proj.get('EPSG:3857'); // 获得对应的投影坐标系 var projectionExtent = projection.getExtent(); // 投影坐标系的范围 // 初始化分辨率数组 for(var i = 0; i < 19; i++){ resolutions[i] = Math.pow(2, 18 - i); } var tileGrid = new ol.tilegrid.TileGrid({ origin: ol.extent.getBottomLeft(projectionExtent), extent: projectionExtent, resolutions: resolutions, tileSize: [256, 256] }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.TileImage({ projection: projection, tileGrid: tileGrid, tileUrlFunction: function(xyz){ if(!xyz){ return ''; } var z = xyz[0]; var x = xyz[1]; var y = xyz[2]; return "http://rt1.map.gtimg.com/realtimerender?z=" + z + "&x=" + x + "&y=" + y + "&type=vector&style=0&v=1.1.2"; } }) }) ], view: new ol.View({ // 设置成都为地图中心 center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'), zoom: 10, resolutions: resolutions }) });
|
那么将ol.tilegrid.TileGrid的origin设置为ol.extent.getTopLeft(projectionExtent)，但是ol.tilegrid.TileGrid始终都是先计算左下角的瓦片坐标，然后计算右上角的瓦片坐标，因此Y轴是相反的。那么修改Y轴坐标就可以得到正确值：
【本文地址】
今日新闻 |
推荐新闻 |