注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Mr.7

我将骄傲的活在这个大唐盛世

 
 
 

日志

 
 

如何在openlayers中叠加高德地图,并且正确叠加WMS图层  

2014-08-01 08:11:22|  分类: 挨踢咋活 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何在openlayers中叠加高德地图呢?很简单就实现了。参考来源于网上。

如何在openlayers中叠加自定义WMS图层呢?也很简单。甚至GeoServer中自动可以生成事例。

最后当然是要把这两个图层叠在一起。因为双剑合璧,威力无比。因为,可以很简单的就会有WFS的查询功能。

一切似乎很简单,最终却又破费周折。过程中发现这两个图层叠放时,总存在位置上的偏差。主要是维度的偏差。这种情况,一般想象的就是二者的原点选的不一样,或者瓦片索引的编码规则不一样,投影设置不正确而已。由此因为多般设置,参数查找,网上查询,无一有效;十分生气。

最终发现还是很简单,可是最后那临门一脚的突破,又是让人气得想揍一遍这几天的自己------居然是参数调整但没有设置进去。MMD!

最终的结论很简单:EPSG:900913投影是基础而已。

1.如何在Openlayers中叠加高德AMAP地图

其实网上就行。而且可行。

String.prototype.format = function(strFormat)
{
var args = arguments;
return this.replace( /\{(\d+)\}/g,
function(m,i)
{
return args[i];
}
);
}

/**
* 对高德AMAP瓦片层封装
*/
OpenLayers.Layer.AMap = OpenLayers.Class(OpenLayers.Layer.TileCache, {
sateTiles:false,
realtimeurl:"",
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 = 0;
this.realtimeurl = url;
},

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());

var url = this.realtimeurl.format(tileX, tileY, tileZ);
return url;
},

clone: function (obj)
{
if (obj == null)
{
obj = new OpenLayers.Layer.AMap(this.name, this.url, this.options);
}
obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
return obj;
},
CLASS_NAME: "OpenLayers.Layer.AMap"
});

2.如何叠加WMS图层呢

function getWmsLayer(isBaseLayer)
{
var tiled = new OpenLayers.Layer.WMS(
"localshape:ROAD - Tiled", "http://192.168.1.101:8080/geoserver/localshape/wms",
{
LAYERS: 'localshape:ROAD',
STYLES: '',
format: 'image/png',
TRANSPARENT:true
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: isBaseLayer?true:false,
yx : {'EPSG:4326' : true},
visibility:false
}
);
return tiled;
}

3.最忽略的一步,如何设置正确的Map参数

以上一切正确,但是这一步没有设置好,结果全坏。最后导致怀疑上面正确的那些步骤。

直接看结果:

var options =
{
projection: "EPSG:900913",
displayProjection: "EPSG:4326",
units: 'm'
};

map = new OpenLayers.Map("map" ,options);

最后有一个鼠标移动坐标查看的功能,对于调试非常有作用,强烈推荐加上。

map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));


这个小问题其实耗费了好几天的功夫。本想在7月底弄完,然后欢欢喜喜迎接新的八月。不过还是拖到了八月;虽然豁然开朗那一刻还是在7月的最后那一刹那。总是有那么多延迟不尽如人意,但求不放弃吧

  评论这张
 
阅读(2935)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018