openlayers 加载瓦片详解 一

最新推荐文章于 2023-11-04 20:32:42 发布
最新推荐文章于 2023-11-04 20:32:42 发布
阅读量1w 收藏 12
点赞数 2
分类专栏： gis js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/work888study/article/details/9206527
版权
gis 同时被 2 个专栏收录
9 篇文章 1 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏

            在这先说点题外话，本人在研究webgl 三维球过程中惊人发现，openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于

      webgl的三维gis开源平台，这可能是首个开源的三维平台，在现在三维大趋势下，看来 openlayers  前景还是一片大好，闲话少说，静候佳音。 

      在这将分4篇文章来系统的详细的介绍openlayers 是怎么来加载本地及服务器瓦片，为了提高开发人员的工作效率 采用倒叙，

      在第一篇先给实用的算法及简单的参数说明，后面介绍原理，彻底的理解其工作原理。

      第一篇 ：加载瓦片的算法类

      第二篇 ：瓦片制作

      第三篇 ：瓦片参数确定

      第四篇 ：openlayers 加载的瓦片投影

                                                                                                               第一篇加载瓦片的算法类

 1、先给个类图简单的介绍下

         我们在客户端看到的瓦片其实是一个图片列表 也就是上面的grid 类  ，每张图片都是通过http从后来请求过来的图片也就是方法getURL（bound），

每张图片都有自己的url 也就是他的请求地址，而且grid的列表的每个单元格都有边框也就是bound，那要获取每个单元格中正确的图片都是通过bound来计

算而获取到相应的图片，如想要加载自己瓦片就需要重写grid中的getURL(bound)方法，这也就是最下排6个不同类型的瓦片根据自己的瓦片特点及地图服务

的特点编写的类，如果你有自己的瓦片却跟上面的几种都不相同也不相似，那你可以选择重写grid类，如果你的瓦片操作跟下面的6中服务相同或者类似，那

可以根据自己工作考虑重写那面6个类中的其中某一个中的getURL(bound)的方法。在计算的过程中能涉及到多个参数将在下篇来详细介绍，在这给几个重写

getURL(bound)的例子, 第一个例子是网上的不过在工作中验证过，绝对可用，写的还不错给大家个参考。

1、重写grid类中的getURL(bound)方法加载本地图片(天地图)

OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid,
		{

			TileType : null,
			mirrorUrls : null,
			topLevel : null,
			bottomLevel : null,
			topLevelIndex : 0,
			bottomLevelIndex : 20,
			topTileFromX : -180,
			topTileFromY : 90,
			topTileToX : 180,
			topTileToY : -90,
			isBaseLayer : true,
			initialize : function(name, url, options) {

				options.topLevel = options.topLevel ? options.topLevel
						: this.topLevelIndex;
				options.bottomLevel = options.bottomLevel ? options.bottomLevel
						: this.bottomLevelIndex;
				options.maxResolution = this
						.getResolutionForLevel(options.topLevel);
				options.minResolution = this
						.getResolutionForLevel(options.bottomLevel);
				var newArguments = [ name, url, {}, options ];
				OpenLayers.Layer.Grid.prototype.initialize.apply(this,
						newArguments);
			},

			clone : function(obj) {

				if (obj == null) {
					obj = new OpenLayers.Layer.TDTLayer(this.name, this.url,
							this.options);
				}

				obj = OpenLayers.Layer.Grid.prototype.clone
						.apply(this, [ obj ]);

				return obj;
			},

			getURL : function(bounds) {
				var level = this.getLevelForResolution(this.map.getResolution());
				var coef = 360 / Math.pow(2, level);
				var Row = this.topTileFromX < this.topTileToX ? Math.round((bounds.left - this.topTileFromX) / coef) : Math.round((this.topTileFromX - bounds.right) / coef);
				var Col = this.topTileFromY < this.topTileToY ? Math.round((bounds.bottom - this.topTileFromY) / coef): Math.round((this.topTileFromY - bounds.top) / coef);

				var type = this.TileType;
				if (type == "EMap") {
					if (level >= 2 && level <= 10) {
						type = "A0512_EMap";
					} else if (level == 11 || level == 12) {
						type = "B0627_EMap1112";
					} else if (level >= 13 && level <= 18) {
						type = "siwei0608";
					}
				}else if(type=="RMap"){
				    if (level >= 2 && level <= 7) {
						type = "sbsm0210";
					} else if (level >= 8 && level <= 10) {
						type = "sbsm0210";
					} else if (level >= 11 && level <= 14) {
						type = "e11";
					}else if (level >= 15 && level <= 18) {
						type = "sbsm1518";
					}
				}
           
				var url = this.url;
				
				if (this.mirrorUrls != null) {
					url = this.selectUrl(Row, this.mirrorUrls);
				}
              
				return this.getFullRequestString({
					T : type,
					X : Row,
					Y : Col,
					L : level
				}, url);
			},
			selectUrl : function(a, b) {
				return b[a % b.length]
			},
			getLevelForResolution : function(res) {
				var ratio = this.getMaxResolution() / res;
				if (ratio < 1)
					return 0;
				for ( var level = 0; ratio / 2 >= 1;) {
					level++;
					ratio /= 2;
				}
				return level;
			},
			getResolutionForLevel : function(level) {
				return 360 / 256 / Math.pow(2, level);
			},
			getMaxResolution : function() {
				return this.getResolutionForLevel(this.topLevelIndex)
			},
			getMinResolution : function() {
				return this.getResolutionForLevel(this.bottomLevelIndex)
			},
			addTile : function(bounds, position) {
				var url = this.getURL(bounds);
				return new OpenLayers.Tile.Image(this, position, bounds, url,
						this.tileSize);
			},

			CLASS_NAME : "OpenLayers.Layer.TiandituLayer"
		});


 

 

测试页面

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Tiled Map Service Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
   <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
      
        var map, layer;

        function init(){
		    var extent = new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0);
            var tempScales = [295497593.05875003,147748796.52937502,73874398.264687508,36937199.132343754,18468599.566171877];
		    var mapOptions = {
                maxExtent: extent
            };
			var options= {
			    mapType:"EMap",
                topLevel: 3, 
                bottomLevel: 20
				
            };
            map = new OpenLayers.Map("map",mapOptions);
                        
			layer = new OpenLayers.Layer.TiandituLayer("qincy", "http://tile0.tianditu.com/DataServer",options);
            map.addLayer(layer);
            map.addControls([new OpenLayers.Control.MousePosition()]);
			
            map.setCenter(new OpenLayers.LonLat(106,39), 3);
			
        }
    </script>
  </head>
  <body οnlοad="init()">
    <div id="map" style="width:1000px;height:500px"></div>
  </body>
</html>


 

2、重写TileCache类加载本地图片。

/**
 * 对自定义规则切割的图片进行拼装的类
 */
SimpleTileCache=OpenLayers.Class(OpenLayers.Layer.TileCache,{
	initialize:function(name,url,options){
		var tempoptions = OpenLayers.Util.extend(
{'format': 'image/png',isBaseLayer:true},options);			        
		OpenLayers.Layer.TileCache.prototype.initialize.apply(this,[name, url, {}, tempoptions]);
		this.extension = this.format.split('/')[1].toLowerCase();
		this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
		this.transitionEffect="resize";
		this.buffer=2;		
	},
	/**
     *   按地图引擎切图规则实现的拼接方式
	 */
	getURL: function(bounds) {		    
		var res   = this.map.getResolution();			        
		var bbox  = this.map.getMaxExtent();
		var size  = this.tileSize;
		//计算列号		        
		var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
           //计算行号
		var tileY = Math.round((bbox.top-bounds.top) / (res * size.h));	
		//当前的等级			
		var tileZ = this.map.zoom;				        						        
		if(tileX<0) tileX=tileX+Math.round(bbox.getWidth()/bounds.getWidth());       
		if(tileY<0)  tileY=tileY+Math.round(bbox.getHeight()/bounds.getHeight());			        
		return	this.getTilePic(tileX,tileY,tileZ);
	},
	getTilePic: function(tileX,tileY,tileZ){
		var dir = '';
		if(tileZ > 6) {
			var delta       = Math.pow(2,tileZ-5);	    
			var rowDir   = 'R'+ Math.floor(tileY /delta);
			var colDir   = 'C'+Math.floor(tileX /delta);
			dir      = tileZ  + "/" + rowDir + "/" + colDir + "/";
		} else {
			dir= tileZ + '/';
		}				    
		var tileNo  = tileZ + "-" + tileX + "-" + tileY;
		var sUrl = this.url + dir + tileNo + '.png';
		return sUrl;
	},
	clone: function (obj) { 
		if (obj == null) {
		obj = new SimpleTileCache(this.name,this.url,this.options);
		}
		obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
		return obj;
	},
	CLASS_NAME: "SimpleTileCache"
});


 

3、直接修改TileCache类中的getURL方法
   

  修改后 的 TileCache.js

OpenLayers.Layer.TileCache = OpenLayers.Class(OpenLayers.Layer.Grid, {

    isBaseLayer: true,

    format: 'image/png',

    serverResolutions: null,

    initialize: function(name, url, layername, options) {
        this.layername = layername;
        OpenLayers.Layer.Grid.prototype.initialize.apply(this,
                                                         [name, url, {}, options]);
        this.extension = this.format.split('/')[1].toLowerCase();
        this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
    },    

    clone: function (obj) {
        
        if (obj == null) {
            obj = new OpenLayers.Layer.TileCache(this.name,
                                                 this.url,
                                                 this.layername,
                                                 this.getOptions());
        }

        //get all additions from superclasses
        obj = OpenLayers.Layer.Grid.prototype.clone.apply(this, [obj]);

        // copy/set any non-init, non-simple values here

        return obj;
    },    

	 getURL: function(bounds) {
	    var res = this.map.getResolution();
		var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
		var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
		var z = this.map.getZoom();
		var path =z+9+ "/" + x + "/" + y + "." + this.type;
		var url = this.url;
		if (url instanceof Array) {
			url = this.selectUrl(path, url);
		}
		//我用resin 发布的地图瓦片的位置
		url="http://192.168.0.90:88/roadmap2/"+path;
        return url
    },
	 
    /*getURL: function(bounds) {
        var res = this.getServerResolution();
        var bbox = this.maxExtent;
        var size = this.tileSize;
        var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
        var tileY = Math.round((bounds.bottom - bbox.bottom) / (res * size.h));
        var tileZ = this.serverResolutions != null ?
            OpenLayers.Util.indexOf(this.serverResolutions, res) :
            this.map.getZoom();

        var components = [
            this.layername,
            OpenLayers.Number.zeroPad(tileZ, 2),
            OpenLayers.Number.zeroPad(parseInt(tileX / 1000000), 3),
            OpenLayers.Number.zeroPad((parseInt(tileX / 1000) % 1000), 3),
            OpenLayers.Number.zeroPad((parseInt(tileX) % 1000), 3),
            OpenLayers.Number.zeroPad(parseInt(tileY / 1000000), 3),
            OpenLayers.Number.zeroPad((parseInt(tileY / 1000) % 1000), 3),
            OpenLayers.Number.zeroPad((parseInt(tileY) % 1000), 3) + '.' + this.extension
        ];
        var path = components.join('/'); 
        var url = this.url;
        if (OpenLayers.Util.isArray(url)) {
            url = this.selectUrl(path, url);
        }
        url = (url.charAt(url.length - 1) == '/') ? url : url + '/'; //url+path
		//alert(url+path);
        return "http://192.168.0.90:88/roadmap/1/0/0.png"
    },*/
    
    CLASS_NAME: "OpenLayers.Layer.TileCache"
});


测试页面

 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers TileCache Example</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../lib/OpenLayers.js"></script>
        <script src="../lib/Firebug/firebug.js"></script>
    <script type="text/javascript">
	//alert("adsf");
	   var proj='EPSG:900913'; //900913
        var map, layer;
		var proj2 = new OpenLayers.Projection("EPSG:4326");
		var agsTileOrigin = new OpenLayers.LonLat(-180,85);
		agsTileOrigin.transform(proj2, new OpenLayers.Projection("EPSG:900913"));
		//alert(agsTileOrigin.);
		var mapExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
        function init(){
		
		//添加编辑图层 图层名称为editLayer
			var EditLayer=new OpenLayers.Layer.Vector("EidtLayer");
	    //添加地图
            map = new OpenLayers.Map( 'map', {
			    numZoomLevels:3,                             //缩放级别
                resolutions:[305.7481,152.8741,76.437],      //分别率  单位是米
				controls:[                        
                        new OpenLayers.Control.EditingToolbar(EditLayer), //添加编辑控件 
						new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.Permalink(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
						]
            });
            layer = new OpenLayers.Layer.TileCache("TileCache Layer",
                "http://c0.tilecache.osgeo.org/wms-c/cache/",
                "basic",
                {
				 serverResolutions:[305.7481,152.8741,76.437],
										projection:proj,
										type:'png'
                }
            );
		
            map.addLayers([layer, EditLayer]);
			var  lob_ll=new OpenLayers.LonLat(121.34457, 31.329235);
            map.setCenter(lob_ll.transform(proj2, new OpenLayers.Projection("EPSG:900913")), 0);
        }
    </script>
	<style type="text/css">
	html,body{width:100%;height:100%;margin:0;}
	</style>
  </head>
  <body οnlοad="init()">
    <div id="map"  class="smallmap"  style="width:100%; height:100%; backround-color:Red;"></div>
  </body>
</html>



 

studypower
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
openlayers：实现一个带有非方形tile的自定义tile网格 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 36
openlayers：实现一个带有非方形tile的自定义tile网格 (附完整源码）
Openlayers显示瓦片网格信息的方法
01-18
本文实例为大家分享了Openlayers显示瓦片网格信息的具体代码，供大家参考，具体内容如下 1、新建一个html页面，引入ol.js文件，然后在body中创建一个div标签，用来作为地图加载的容器； 2、代码实现 <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8/> <title></title> [removed]</scrip
openlayers加载本地离线地图瓦片（重新发2018-10-23）
10-24
有朋友反应上一次代码无法运行，我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行！！！
OpenLayers3加载常用控件使用方法详解
10-14
主要为大家详细介绍了OpenLayers3加载常用控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers加载WMS服务
05-31
提供openlayers加载WMS服务的完整示例
openlayers 加载天地图示例
02-24
openlayers 加载天地图示例
【利用oplayers任意更换WMTS瓦片颜色】
layman
05-12 513
precompose事件会在地图渲染前发生，因此在渲染前，改变filter值，即可让地图按设置的滤镜进行渲染。可以使用多个滤镜，值之间用空格隔开，如：contrast(150%) saturate(200%)openlayers3开始，其底层渲染从SVG切换到了canvas，据说渲染效率提高了不少。1）灰度滤镜： 设置filter值为 grayscale(100%)2）褐色： 设置filter值为 sepia（100%）filter值类型为字符串，默认值为"none"；
openlayer加载天地图 并设置地图颜色为科技蓝
josiecici的博客
11-03 2843
openlayer加载天地图 并设置地图颜色为科技蓝
WebGIS瓦片基础原理
samLi0620的博客
11-02 1116
WebGIS瓦片基础原理
OpenLayers加载缩放控件使用方法详解
10-14
主要为大家详细介绍了OpenLayers加载缩放控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers3配置geoserver(WMS)，获取已渲染ImageWMS底图详解
指尖的点滴
11-18 8997
最近，原项目中的openlayers2进行框架升级为openlayers3,因为openlayers3相当于进行了完全重构，导致项目升级遇到了一些问题。而网上大部分资料，对extent,center等参数讲解不详细，这里主要讲一下，在通过openlayers3获取geoserver服务器(WMS)中image底图时，具体步骤和需要注意的一些细节。
WebGIS前端瓦片地图显示原理及实现
weixin_30501857的博客
03-08 843
　　目前，有很多WebGIS开发包，ArcGIS API for JS、OpenLayers、LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能。我们很方便的使用这些库的时候，也让我们忽略了很多原理性的东西。 比如说，我之前一直在被一个问题困扰，就是如何将一个点正确的显示在浏览器屏幕的正确的位置，即经纬度坐标和屏幕坐标的转换问题。直到我看到一位大牛的博客（点击学习），里面对W...
Flutter map瓦片加载及计算原理
PrinceBB的博客
04-13 603
近期在flutter_map开源地图插件的基础上实现了一个可拖拽polygon的功能，觉得还是蛮有意思的，故而记录一下。 先展示一下功能吧 1.在地图上可以根据手指落下的位置绘制点 2.对绘制的点进行拖拽调整，不论封闭与否 3.当大于3个点时，点击第一个点会进行闭合操作 4.线段若相交，则变红 比较郁闷的是flutter_map(0.10.1+1)并没有提供可进行拖拽的marker，所以，为实现这个功能，我们需要先扩展一个drag_marker类，因为是保密类项目，所以只能说下大概的过程，代码细节等可以参
不同坐标系瓦片计算原理
xinyu的记录博客
10-11 823
不同坐标系瓦片计算原理
Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。
qq_42590021的博客
07-13 2866
Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等），弹窗显示。 1.实现效果 1.1点符号设置 1.2弹窗效果 2.实现的符号设置代码 /*****************标记部分****************************/ var features1 = []; for (var i = 0; i < dataSource.items.length; i++) { var coordinate = [lat[i], lon[i
Openlayers--自定义修改天地图颜色
最新发布
m0_50207524的博客
11-04 1208
本篇文章讲解怎样调整地图颜色。
openlayers加载本地瓦片包
09-08
OpenLayers是一个强大的JavaScript开源库，用于在Web地图应用中加载和展示地理数据。要加载本地瓦片包，可以按照以下步骤进行操作： 1. 将瓦片图块文件准备好：首先，需要获取瓦片图块文件（通常是PNG或JPEG格式），并按照切片格式进行命名和组织。每个瓦片图块都应该位于对应的文件夹中，并按照行列号进行命名。 2. 创建图层：在OpenLayers中，通过`ol.layer.Tile`类来加载和显示瓦片图块。使用这个类，可以定义一个新的Tile图层对象，并设置相应的瓦片源（TileSource）。 3. 配置瓦片源：在TileSource对象中，可以选择不同的源类型来加载瓦片图块。对于加载本地瓦片包，可以使用`ol.source.XYZ`类，并设置相应的URL模板。URL模板包含一个包含占位符（像`{z}`，`{x}`，`{y}`）的字符串，用来根据图层的缩放级别和瓦片坐标来加载图块。 4. 添加图层到地图：使用`ol.Map`类来创建地图对象，然后将之前创建的瓦片图层添加到地图中。 下面是一段简单的代码示例，演示了如何加载本地瓦片包： ```javascript // 创建图层 var tileLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'path/to/tiles/{z}/{x}/{y}.png' // 指定本地瓦片图块路径 }) }); // 创建地图 var map = new ol.Map({ target: 'map', layers: [tileLayer], view: new ol.View({ center: [0, 0], zoom: 2 }) }); ``` 上述示例中，`path/to/tiles/{z}/{x}/{y}.png`是本地瓦片图块所在的路径，`{z}`代表缩放级别，`{x}`和`{y}`分别代表瓦片坐标的行列号。 通过上述步骤，就能够成功加载并显示本地瓦片包了。请根据实际情况，替换示例代码中的路径和其他相关参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值