Openlayer加载百度地图——OneMap一张图技术框架（1）

成功实现openlayer加载百度地图：

由于百度地图瓦片组织规律与openlayer图层加载规律不同，加载百度地图与加载谷歌地图存在较大差异，经过研究终于设计一组转换规则成功加载百度地图。

页面代码

<div >

</div>

</body>

js代码：

var map;

function init() {

// 使用指定的文档元素创建地图

map = new OpenLayers.Map("rcp1_map");

layerOptions = {};

//7 添加百度地图

var resolutions = [];

for(var i=0; i<19; i++){

resolutions [i]

= Math.pow(2, 18-i);

}

var baidu2 = new KoalaGIS.Layer.WMTS.Baidu('baidu2', 'http://online.XXXXXXXXXXXXXXXXXX.baidu.com/tile/', {

displayOutsideMaxExtent: false,

resolutions: resolutions,

maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)

});

map.addLayer(baidu2);

map.events.register("click", map, onMapClick);

// 注册map点击事件

//map.events.register("zoomend", map, onMapZoom);

// 设定视图缩放地图程度为最大

map.zoomToMaxExtent();

//图层切换控件

map.addControl(new OpenLayers.Control.LayerSwitcher());

//鹰眼控件

map.addControl(new OpenLayers.Control.OverviewMap());

}

function onMapClick(e){

//alert('click');

// 显示地图屏幕坐标

var str = "[Screen]:" + e.xy.x + "," + e.xy.y;

// document.getElementById("screen_xy").innerHTML = str;

// 屏幕坐标向地图坐标的转换

var lonlat = map.getLonLatFromViewPortPx(e.xy);

str = "[Map]:" + lonlat.lon + "," + lonlat.lat;

// document.getElementById("location").innerHTML = str;

//生成点图层

// alert(str);

}

function getInfo(){

var obj=map.getExtent();

var bottom= 475012.34;

left= 6062203.66;

right= 14377083.66;

top= 5939076.34;

var vextent= new OpenLayers.Bounds(bottom, left,right, top);

//var vextent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)

map.setCenter(new OpenLayers.LonLat(11901195, 3432333), 5);

var tt=$("#text1").val(map.getZoom());

var aaa="";

}

引用的脚本：

<!-- 加载OpenLayers 类库

浏览器打开：

http://localhost:8080/entimap/mods/openmap.html

Openlayer加载百度地图——OneMap一张图技术框架（1）

猜你喜欢