在百度地图加载wms图层

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZqsKQeiiEjGLpZvtTsbEYAPzmgoD4v5F"></script>
    <title>自定义网格</title>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        #allmap {
            width: 100%;
            height: 100%;
        }
        
        #r-result {
            width: 100%;
            margin-top: 5px;
        }
        
        p {
            margin: 5px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="allmap"></div>
    <div id="r-result">
        <input type="button" onclick="add_control();" value="添加" />
        <input type="button" onclick="delete_control();" value="删除" />
    </div>
</body>

</html>
<script type="text/javascript">
    
    var resolutions = []
    for (var i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
    }
    var coordtransform = new CoordinateTransform()
        // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    var point = new BMap.Point(104.069, 31.489); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_HYBRID_MAP
        ]
    }));
    map.enableScrollWheelZoom(); //启用滚轮放大缩小
    var tileLayer = new BMap.TileLayer({
        isTransparentPng: true
    });

    tileLayer.getTilesUrl = function(tileCoord, zoom) {

        var x = tileCoord.x;
        var y = tileCoord.y;
        //console.log("X: " + x + " Y : " + y + " Z: " + zoom);

        //下面这一段代码和上面的代码效果一模一样！！！利用的公瑾提供的一个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_MKT2WGS(minx, miny); //百度墨卡托坐标-》百度经纬度坐标
        var topRight = coordtransform.BD_MKT2WGS(maxx, maxy);
        bottomLeft = coordtransform.BD2WGS(bottomLeft[0], bottomLeft[1])
        topRight = coordtransform.BD2WGS(topRight[0], topRight[1])
        var bbox2 = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]]; //计算出bbox
        console.log(bbox2);
        //根据geoserver WMS服务的规则设置URL
        // 
        var url = 'http://localhost:2000/geoserver/huangong/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&tiled=true&STYLES&LAYERS=huangong%3Apng-qingping&tilesOrigin=104.069%2C31.489&WIDTH=256&HEIGHT=256&SRS=EPSG%3A4326&BBOX=' +
            //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;
    }

    function add_control() {
        map.addTileLayer(tileLayer);
    }

    function delete_control() {
        map.removeTileLayer(tileLayer);
    }
    add_control();
</script>
来源：oschina
链接：https://my.oschina.net/linx/blog/4266711
标签
GeoServer
javascript
tiled
github
geometry