腾讯地图使用谷歌卫星地图瓦片提高卫星地图清晰度

原创已于 2023-11-02 15:58:37 修改 · 491 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #javascript

于 2023-11-02 15:21:31 首次发布

代码如下，完全贴合火星坐标

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>叠加自定义瓦片</title>
    <style type="text/css">
      	html,body{
            width:100%;
            height:100%;
        }
        #container{
            width:100%;
            height:90%;
        }
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        .btn {
            width: 100px;
            height: 26px
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        
        function getNormalizedCoord(coord, zoom) {
            var y = coord.y;
            var x = coord.x;
            var tileRange = 1 << zoom;
            if (y < 0 || y >= tileRange) {
                return null;
            }
            if (x < 0 || x >= tileRange) {
                x = (x % tileRange + tileRange) % tileRange;
            }
            return {
                x: x,
                y: y
            };
        }

        var map;
        function init() {
            //新建一个ImageMapType，实现ImageMapTypeOptions规范
            var earthlayer = new qq.maps.ImageMapType({
                tileSize: new qq.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 5,
                opacity: 1,
                getTileUrl: function (tile, zoom) {
                    var normalizedCoord = getNormalizedCoord(tile, zoom);
                    //console.log(normalizedCoord.x);
                    var z = zoom,
                            x = tile.x,
                            y = tile.y;
                    return 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x='+normalizedCoord.x+'&y='+normalizedCoord.y+'&z='+z;
                }
            });

            map = new qq.maps.Map(document.getElementById("container"), {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(29.566981, 106.588633),
                zoom: 15
            });
            map.overlayMapTypes.push(earthlayer);
            var info_span = document.getElementById("info");
            var n = 0;
            //监听ImageMapType图片加载
            qq.maps.event.addListener(earthlayer, "tilesloaded", function () {
                info_span.innerText = "tilesloaded:第" + ++n + "次";
            });
          qq.maps.event.addListener(map, 'click', function(event) {
       var marker=new qq.maps.Marker({
                position:event.latLng, 
          map:map
          });
    });
        }
    </script>
</head>
<body onload="init();">
<div id="container"></div>
<span id="info"></span>
</body>
</html>

新版API

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义栅格图层</title>
</head>
<script charset="utf-8"
    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div id="mapContainer"></div>
    <script>
        var center = new TMap.LatLng(26.870355,100.239704);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map('mapContainer', {
            center: center,
            zoom: 15,
			maxZoom:19
        });
        //初始化imageTileLayer
        var imageTileLayer = new TMap.ImageTileLayer({
            getTileUrl: function (x, y, z) {
				//拼接瓦片URL
				var url='https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x='+x+'&y='+y+'&z='+z ;
                return url;
            },
            tileSize: 256,	//瓦片像素尺寸
            minZoom: 1,	//显示自定义瓦片的最小级别
            maxZoom: 19,	//显示自定义瓦片的最大级别
            visible: true,	//是否可见
            zIndex: 5000,	//层级高度（z轴）
            opacity: 1,	//图层透明度：1不透明，0为全透明
            map: map,		//设置图层显示到哪个地图实例中
        });
    </script>
</body>

</html>