百度地圖API提供了疊加自定義圖層的方法，地址如下：
官網(wǎng)例子：清華校園微觀圖地圖
http://developer.baidu.com/map/jsdemo.htm#g0_2
API說明：
http://developer.baidu.com/map/reference/index.php?title=Class:%E5%9C%B0%E5%9B%BE%E5%9B%BE%E5%B1%82%E7%B1%BB/TileLayer
我在這里實(shí)現(xiàn)的是在baidu地圖上疊加geoserver的WMS圖層，代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1nCQCnDr3Nt3GKDVeBmKGe2Y"></script>
<script src="../JS/coordTransform.js"></script>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="divContainer" style="overflow: scroll">
<div style="width: 100%; height: 600px; border: solid 1px red;" id="allmap"></div>
</div>
</form>
<script type="text/javascript">
var map;
var icon = new BMap.Icon('img/center.gif', new BMap.Size(24, 24));
var resolutions = [262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1];
function init() {
map = new BMap.Map("allmap");
map.centerAndZoom("佛山", 10); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。
map.enableScrollWheelZoom();
map.addControl(new BMap.PanoramaControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }));
map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }));
/*
*加載自定義圖層
*原理：
*1)getTilesUrl返回一個(gè)瓦片的鏈接，因此用geoserver的WMS服務(wù)提供一個(gè)鏈接出來。
*2)getTilesUrl傳遞了2個(gè)參數(shù)，分別是tileCoord：百度地圖瓦片的xy，zoom：百度地圖當(dāng)前級(jí)別；
*根據(jù)tileCoord、zoom以及百度地圖的resolutions，計(jì)算出此百度地圖瓦片的bbox，然后利用此bbox請(qǐng)求geoserver wms服務(wù)，實(shí)現(xiàn)圖層疊加。
3）因百度地圖采用的是火星坐標(biāo) (GCJ-02)二次加密為百度經(jīng)緯度坐標(biāo)系（BD-09)，其瓦片是百度經(jīng)緯度坐標(biāo)系（BD-09)基礎(chǔ)上進(jìn)行百度墨卡托投影后的平面坐標(biāo)，因此geoserver中的圖層數(shù)據(jù)需要預(yù)先進(jìn)行坐標(biāo)轉(zhuǎn)換，
推薦公瑾的工具進(jìn)行坐標(biāo)轉(zhuǎn)換：https://github.com/FreeGIS/postgis_LayerTransform；
我這里geoserver發(fā)布的圖層是經(jīng)過轉(zhuǎn)換后的BD-09坐標(biāo)，因此需要將百度平面坐標(biāo)轉(zhuǎn)為經(jīng)緯度坐標(biāo)；
4）
百度地圖的resolutions是已知的，計(jì)算方法如下：
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
百度地圖瓦片及比率尺的原理參考：http://www.cnblogs.com/cglNet/p/3443637.html
*/
var tileLayer = new BMap.TileLayer({ isTransparentPng: true });
tileLayer.getTilesUrl = function (tileCoord, zoom) {
if (zoom >= 10) {
var x = tileCoord.x;
var y = tileCoord.y;
//console.log("X: " + x + " Y : " + y + " Z: " + zoom);
//方法一，通過baiduMap API提供的方法將平面坐標(biāo)轉(zhuǎn)成經(jīng)緯度坐標(biāo)
var PointConvert = new BaiduPointConvert(map);
var lonlat_0 = PointConvert.tileToLngLat(tileCoord);//瓦片左下角坐標(biāo)；
var tileCoord2 = new Object();
tileCoord2.x = x + 1;
tileCoord2.y = y + 1;
var lonlat2_0 = PointConvert.tileToLngLat(tileCoord2);//瓦片右上角坐標(biāo)；
var bbox = [lonlat_0.lng, lonlat_0.lat, lonlat2_0.lng, lonlat2_0.lat, ];//左下角與右上角坐標(biāo)構(gòu)成一個(gè)bbox；
console.log(bbox);
//下面這一段代碼和上面的代碼效果一模一樣?。?！利用的公瑾提供的一個(gè)js實(shí)現(xiàn)坐標(biāo)轉(zhuǎn)換，地址為：https://github.com/FreeGIS/coordtransform
var res = resolutions[zoom];
var tileWidth = 256;
var minx = x * tileWidth * res;
var miny = y * tileWidth * res;
var maxx = (x + 1) * tileWidth * res;
var maxy = (y + 1) * tileWidth * res;
var bottomLeft = coordtransform.bd_mkt2bd_wgs(minx, miny); //百度墨卡托坐標(biāo)-》百度經(jīng)緯度坐標(biāo)
var topRight = coordtransform.bd_mkt2bd_wgs(maxx, maxy);
var bbox2 = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]]; //計(jì)算出bbox
console.log(bbox2);
//根據(jù)geoserver WMS服務(wù)的規(guī)則設(shè)置URL
var url = 'http://localhost:8080/geoserver/fsum/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&LAYERS=fsum:T_UM_MAP_DISTRICT_GEOMETRY&TRANSPARENT=true&tiled=true&SRS=EPSG:4326&WIDTH=256&HEIGHT=256&BBOX='
+ bbox2.join(',');
//console.log(bbox.join(','));
return url;
}
}
map.addTileLayer(tileLayer);
}
window.onload = function () {
init();
}
//百度地圖坐標(biāo)轉(zhuǎn)換
var BaiduPointConvert = function (map) {
this.map = map;
//瓦片xy計(jì)算出經(jīng)緯度坐標(biāo)
//step1: this.tileToPixel(pixel);百度地圖瓦片大小為 256*256，根據(jù) 瓦片xy * 256計(jì)算出瓦片的像素坐標(biāo)；
//step2 : this.pixelToWorld(this.tileToPixel(pixel)) ; 將像素坐標(biāo)轉(zhuǎn)為平面坐標(biāo)。
//step3: this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel))); 調(diào)用API提供的方法將平面坐標(biāo)轉(zhuǎn)為經(jīng)緯度坐標(biāo)；
//API說明請(qǐng)參考：http://developer.baidu.com/map/reference/index.php?title=Class:%E5%9C%B0%E5%9B%BE%E7%B1%BB%E5%9E%8B%E7%B1%BB/Projection
this.tileToLngLat = function (pixel) {
return this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel)));
}
this.lngLatToTile = function (lngLat) {
return this.pixelToTile(this.worldToPixel(this.lngLatToWorld(lngLat)));
}
this.pixelToLngLat = function (pixel) {
return this.worldToLngLat(this.pixelToWorld(pixel));
}
this.lngLatToPixel = function (lngLat) {
return this.worldToPixel(this.lngLatToWorld(lngLat));
}
this.tileToPixel = function (pixel) {
return new BMap.Pixel(pixel.x * 256,
pixel.y * 256);
}
this.pixelToWorld = function (pixel) {
var zoom = this.map.getZoom();
return new BMap.Pixel(pixel.x / Math.pow(2, zoom - 18),
pixel.y / Math.pow(2, zoom - 18));
}
this.worldToLngLat = function (pixel) {
var projection = this.map.getMapType().getProjection();
return projection.pointToLngLat(pixel)
}
this.pixelToTile = function (pixel) {
return new BMap.Pixel(pixel.x / 256,
pixel.y / 256);
}
this.worldToPixel = function (pixel) {
var zoom = this.map.getZoom();
return new BMap.Pixel(pixel.x * Math.pow(2, zoom - 18),
pixel.y * Math.pow(2, zoom - 18));
}
this.lngLatToWorld = function (lngLat) {
var projection = this.map.getMapType().getProjection();
return projection.lngLatToPoint(lngLat)
}
}
</script>
</body>
</html>
以上代碼實(shí)現(xiàn)了疊加geoserver的WMS圖層，但是WMS是實(shí)時(shí)渲染的，對(duì)于數(shù)據(jù)經(jīng)常變化的適用于WMS，對(duì)于數(shù)據(jù)不常變化的使用預(yù)處理好的切片更能提高效率，如何使用切片呢？且聽下回分解。
推薦
F3Earth是一群志同道合的伙伴發(fā)起的國(guó)產(chǎn)Web 3D Engine項(xiàng)目，github地址：https://github.com/f3earth/f3earth ， 目前正在開發(fā)中，DEMO已初具功能，期待更多朋友的參與。
