php百度地图图层,baidu地图API叠加自定义图层（一）

最新推荐文章于 2024-05-14 09:10:33 发布

黄啸宇

最新推荐文章于 2024-05-14 09:10:33 发布

阅读量309

点赞数 1

文章标签： php百度地图图层

我在这里实现的是在baidu地图上叠加geoserver的WMS图层，代码如下：

body, html, #allmap {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

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坐标，因此需要将百度平面坐标转为经纬度坐标；

百度地图的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)

}

以上代码实现了叠加geoserver的WMS图层，但是WMS是实时渲染的，对于数据经常变化的适用于WMS，对于数据不常变化的使用预处理好的切片更能提高效率，如何使用切片呢？且听下回分解。