baidu地图API叠加自定义图层(一)

作者: 老羽 | 来源:发表于2016-06-25 01:14 被阅读6804次

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

    相关文章

      网友评论

      • 遇健空间:你好,按你的放成功加载了面图层的wms服务,面图层的sld填充设为了空或者透明,但是面图层里面和外面的区域都显示为白色,并且会将底图给覆盖掉是怎么回事?
      • Giser:您好,问下这个百度地图可以直接加载GeoJson数据么?
      • 02b164f0d19a:您好!请教个问题,百度地图叠加自定义图层,我现在也需要实现这个效果。能给下完整的代码示例吗?
        02b164f0d19a:@老羽 很高心,能回复啊,我现在也是用的百度api,需要叠加自己的图层,苦恼不知道怎么做,能不能给些代码样例啊。。辛苦辛苦。。
        老羽:这个demo叠加的是geoserver的图层,原理就是计算bbox请求wms
      • IIGEOywq:你好,按照这个逻辑,不知道能叠加arcgis的动态服务图层吗?
        老羽:@ywq云杉 可以的,原理是一样的,我这里用的是geoserver的 WMS URL,你用arcgis rest路径就可以了,关键是坐标计算好。

      本文标题:baidu地图API叠加自定义图层(一)

      本文链接:https://www.haomeiwen.com/subject/ovfadttx.html