mapbox 添加wmts

最新推荐文章于 2024-06-11 00:30:00 发布

炉火纯青-旺

最新推荐文章于 2024-06-11 00:30:00 发布

阅读量3.9k

点赞数

分类专栏： mapbox 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34870529/article/details/111862633

版权

mapbox 专栏收录该内容

22 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.js'></script>
    <link href='https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.10.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
 
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        mapboxgl.accessToken =
            'pk.eyJ1IjoibWFwYm94bWF4IiwiYSI6ImNqbnY4MHM3azA2ZmkzdnBnMThvNzRoZ28ifQ.IffqPZGkhcdPjnZ2dmSO6w';
    var tile = "http://gisserver.tianditu.gov.cn/gwc/service/wmts?layer=tiandituService:demo_road&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}";
    
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        center: [108.438, 34.431],
        zoom: 7
    });
    map.on("load", function () {
        map.addSource('sourceId', {
            type: "raster",
            tiles: [tile],
            tileSize: 256,
        });

        const wmtsLayer = {
            id: 'layerId',
            type: "raster",
            source: 'sourceId',
            minZoom: 1,
            maxZoom: 18,
            paint: {
                "raster-opacity": 1,
            },
        };
        map.addLayer(wmtsLayer);
    })
    </script>
</body>
</html>