leaflet实现地图层级能到18以上

毛三仙

于 2024-07-30 10:51:16 发布

阅读量203

点赞数 2

分类专栏：地图文章标签： javascript 前端 leaflet

本文链接：https://blog.csdn.net/m0_74149462/article/details/140790383

版权

地图专栏收录该内容

26 篇文章 2 订阅

订阅专栏

leaflet-zoom-to19: leaflet地图放大到18层级以上，并且能切换地图图层皮肤

script中引用的脚本可自行在cdn中下载或引入在线链接，或者点击上方链接即可下载源码

<!DOCTYPE html>
<html>

<head>
    <title>leaflet demo</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="./lib/leaflet.css" />
    <link rel="stylesheet" href="./lib/L.Control.Zoominfo.css" />
    <script src="./lib/leaflet.js"></script>
    <script src="./lib/proj4.min.js"></script>
    <script src="./lib/proj4leaflet.min.js"></script>
    <script src="./lib/L.Control.Zoominfo.js"></script>
</head>

<body>
    <div id='map'></div>
</body>

<script type="text/javascript">
    var baiduCRS = new L.Proj.CRS('EPSG:900913',
        '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
            resolutions: function () {
                var level = 19
                var res = [];
                res[0] = Math.pow(2, 18);
                for (var i = 1; i <= level; i++) {
                    res[i] = Math.pow(2, (18 - i))
                }
                return res;
            }(),

            origin: [0, 0],
            bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
        });

    // var normalMapUrl =
        // 'https://maponline2.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&customid=midnight&udt=20231230&from=jsapi2_0',
        var normalMapUrl = 'http://api.map.baidu.com/customimage/tile?x={x}&y={y}&z={z}',
        // var normalMapUrl = 'http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20231205&scale=1&ak=5ieMMexWmzB9jivTq6oCRX9j',
        // var normalMapUrl = 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}',
        satelliteMapUrl = 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
        annotionMapUrl = 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl'

        var normalMap = L.tileLayer(normalMapUrl, {
            maxZoom: 19,
            minZoom: 3,
            maxNativeZoom: 19,
            tms: true
        });

    normalMapOp = L.tileLayer(normalMapUrl, {
        subdomains: '0123456789',
        maxZoom: 19,
        maxNativeZoom: 19,
        minZoom: 18,
        opacity: 0.5,
        tms: true
    });
    satelliteMap = L.tileLayer(satelliteMapUrl, {
            subdomains: '0123456789',
            maxZoom: 21,
            minZoom: 3,
            tms: true
        }),
        annotionMap = L.tileLayer(annotionMapUrl, {
            subdomains: '0123456789',
            maxZoom: 21,
            minZoom: 3,
            tms: true
        });

    var map = L.map("map", {
        crs: baiduCRS,
        center: [28.47, 119.92],
        zoom: 18,
        maxZoom: 19,
        // layers: [satelliteMap, annotionMap],
        layers: [normalMap],
        zoomControl: true,
        zoominfoControl: true,
    });
</script>

</html>