master

分支 (1)

管理

管理

master

gcj02-correct
/
gaode.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>异步加载地图</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
    <script src="./common/util.js"></script>

</head>

<body>
    <div id="container"></div>
    <script>
        var map = null;
        function onApiLoaded() {
            map = new AMap.Map('container', {
                center: [117.10709087356923, 36.67459186502283],
                zoom: 15
            });
            map.on("click", e => {
                console.log(e);
            })
            addWMSLayer();
        }

        // 切片转经度
        function tile2lon(x, z) {
            return (x / Math.pow(2, z) * 360 - 180);
        }

        // 切片转纬度
        function tile2lat(y, z) {
            var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
            return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
        }

        function addWMSLayer() {

            var resolutions = []
            for (var i = 0; i < 19; i++) {
                resolutions[i] = Math.pow(2, 18 - i);
            }

            var tileLayer = new AMap.TileLayer({
                tileSize: 256,
                tileUrl: function (x, y, z) {
                    let xmin = tile2lon(x, z);
                    let xmax = tile2lon(x + 1, z);
                    let ymin = tile2lat(y + 1, z);
                    let ymax = tile2lat(y, z);

                    // 转换对应坐标
                    let t1 = gcoord.transform([xmin, ymin], gcoord.GCJ02, gcoord.EPSG3857);
                    let t2 = gcoord.transform([xmax, ymax], gcoord.GCJ02, gcoord.EPSG3857);

                    // 查询对象
                    let url = 'http://47.100.34.182:8203/geoserver/JiNanQSPhaseII/wms?';
                    let params = {
                        service: "WMS",
                        version: "1.1.0",
                        transparent: true,
                        request: "GetMap",
                        layers: "JiNanQSPhaseII:JiNanQSPhaseII",
                        width: 256,
                        height: 256,
                        srs: "EPSG:3857",
                        format: "image/png",
                        bbox: [t1[0], t1[1], t2[0], t2[1]].join(',')
                    };

                    // 构建查询字符串
                    let str = objToParams(params);

                    return url + str;
                },
                zIndex: 10
            })
            map.add(tileLayer);
        }

        var url = 'https://webapi.amap.com/maps?v=1.4.15&key=b07420cb1cf83ae2be531b9bfec38c86&callback=onApiLoaded';
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.head.appendChild(jsapi);
    </script>
</body>

</html>