百度地图API提供了叠加自定义图层的方法，地址如下：
官网例子：清华校园微观图地图
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
我在这里实现的是在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); // 初始化地图,设置中心点坐标和地图级别。
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返回一个瓦片的链接，因此用geoserver的WMS服务提供一个链接出来。
*2)getTilesUrl传递了2个参数，分别是tileCoord：百度地图瓦片的xy，zoom：百度地图当前级别；
*根据tileCoord、zoom以及百度地图的resolutions，计算出此百度地图瓦片的bbox，然后利用此bbox请求geoserver wms服务，实现图层叠加。
3）因百度地图采用的是火星坐标 (GCJ-02)二次加密为百度经纬度坐标系（BD-09)，其瓦片是百度经纬度坐标系（BD-09)基础上进行百度墨卡托投影后的平面坐标，因此geoserver中的图层数据需要预先进行坐标转换，
推荐公瑾的工具进行坐标转换：https://github.com/FreeGIS/postgis_LayerTransform；
我这里geoserver发布的图层是经过转换后的BD-09坐标，因此需要将百度平面坐标转为经纬度坐标；
4）
百度地图的resolutions是已知的，计算方法如下：
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提供的方法将平面坐标转成经纬度坐标
var PointConvert = new BaiduPointConvert(map);
var lonlat_0 = PointConvert.tileToLngLat(tileCoord);//瓦片左下角坐标；
var tileCoord2 = new Object();
tileCoord2.x = x + 1;
tileCoord2.y = y + 1;
var lonlat2_0 = PointConvert.tileToLngLat(tileCoord2);//瓦片右上角坐标；
var bbox = [lonlat_0.lng, lonlat_0.lat, lonlat2_0.lng, lonlat2_0.lat, ];//左下角与右上角坐标构成一个bbox；
console.log(bbox);
//下面这一段代码和上面的代码效果一模一样！！！利用的公瑾提供的一个js实现坐标转换，地址为：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); //百度墨卡托坐标-》百度经纬度坐标
var topRight = coordtransform.bd_mkt2bd_wgs(maxx, maxy);
var bbox2 = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]]; //计算出bbox
console.log(bbox2);
//根据geoserver WMS服务的规则设置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();
}
//百度地图坐标转换
var BaiduPointConvert = function (map) {
this.map = map;
//瓦片xy计算出经纬度坐标
//step1: this.tileToPixel(pixel);百度地图瓦片大小为 256*256，根据 瓦片xy * 256计算出瓦片的像素坐标；
//step2 : this.pixelToWorld(this.tileToPixel(pixel)) ; 将像素坐标转为平面坐标。
//step3: this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel))); 调用API提供的方法将平面坐标转为经纬度坐标；
//API说明请参考：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>
以上代码实现了叠加geoserver的WMS图层，但是WMS是实时渲染的，对于数据经常变化的适用于WMS，对于数据不常变化的使用预处理好的切片更能提高效率，如何使用切片呢？且听下回分解。
推荐
F3Earth是一群志同道合的伙伴发起的国产Web 3D Engine项目，github地址：https://github.com/f3earth/f3earth ， 目前正在开发中，DEMO已初具功能，期待更多朋友的参与。
Paste_Image.png
网友评论