GIS_DEVELOPER-gcj02-correct
/
baidu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #allmap {
            width: 100%;
            height: 100vh;
        }
    </style>
    <script type="text/javascript" src="./common/util.js"></script>
    <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
</head>

<body>
    <div id="allmap">

    </div>
    <script type="text/javascript">
        var map = null;
        //百度地图API功能
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://api.map.baidu.com/api?v=2.0&ak=cUVK1ijNICAzSLiw7jZDjIGwhDUAmQUA&callback=init";
            document.body.appendChild(script);
        }

        function init() {
            map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(117.116176, 36.673813); // 创建点坐标
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();                 //启用滚轮放大缩小
            addWMSLayer();
            map.addEventListener("click", e => {
                console.log(e);
            })
        }


        function addWMSLayer() {
            let tileLayer = new BMap.TileLayer({
                transparentPng: true
            })

            // 不同的分辨率,数值上等于一像素对应的距离
            var resolutions = []
            for (var i = 0; i < 19; i++) {
                resolutions[i] = Math.pow(2, 18 - i);
            }

            tileLayer.getTilesUrl = function (tileCoord, zoom) {

                // x,y瓦片左上角横纵坐标（米）
                var x = tileCoord.x;
                var y = tileCoord.y;

                var resolution = resolutions[zoom];
                var tileWidth = 256;
                var minx = x * tileWidth * resolution;
                var miny = y * tileWidth * resolution;
                var maxx = (x + 1) * tileWidth * resolution;
                var maxy = (y + 1) * tileWidth * resolution;

                var bottomLeft = gcoord.transform(
                    [minx, miny],
                    gcoord.BD09MC,
                    gcoord.EPSG3857
                );
                var topRight = gcoord.transform(
                    [maxx, maxy],
                    gcoord.BD09MC,
                    gcoord.EPSG3857
                );

                let bbox = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
                // bbox = [minx, miny, maxx, maxy];

                let baseUrl = "http://47.100.34.182:8203/geoserver/JiNanQSPhaseII/wms?";
                let params = {
                    SERVICE: "WMS",
                    VERSION: "1.1.1",
                    REQUEST: "GetMap",
                    FORMAT: "image/png",
                    TRANSPARENT: true,
                    LAYERS: "JiNanQSPhaseII:JiNanQSPhaseII",
                    WIDTH: 256,
                    HEIGHT: 256,
                    SRS: "EPSG:3857"
                }

                var url = baseUrl + objToParams(params) + `&bbox=${bbox.join(",")}`
                return url;
            }
            map.addTileLayer(tileLayer);
        }

        window.onload = loadJScript;  //异步加载地图
    </script>
</body>

</html>