maplibre自定义样式和图层

@王坤

已于 2023-10-31 16:48:31 修改

阅读量746

点赞数 1

分类专栏： maplibre 文章标签： maplibre

于 2023-09-26 16:05:53 首次发布

本文链接：https://blog.csdn.net/qq_52231465/article/details/132356266

版权

maplibre 专栏收录该内容

7 篇文章

订阅专栏

1.整合到一个html文件的源码

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

<head>
    <title>Custom Map Style with Data</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var mapStyle = {
            "version": 8,
            "name": "Custom Map Style with Raster Data",
            "sources": {
                "custom-raster": {
                    "type": "raster",
                    "tiles": ["http://127.0.0.1:8080/geoserver/ne/gwc/service/wmts?layer=ne%3Aworld&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A900913%3A{z}&TileCol={x}&TileRow={y}"],
                    "tileSize": 256
                }
            },
            "layers": [
                {
                    "id": "custom-raster-layer",
                    "type": "raster",
                    "source": "custom-raster"
                }
            ]

        };

        var map = new maplibregl.Map({
            container: 'map',
            style: mapStyle,
            center: [116, 40],
            zoom: 1
        });

        map.on('load', () => {
            map.addSource('railways', {
                type: 'vector',
                // Use any Mapbox-hosted tileset using its tileset id.
                // Learn more about where to find a tileset id:
                // https://docs.mapbox.com/help/glossary/tileset-id/
                // url: 'mapbox://mapbox.mapbox-terrain-v2'
                tiles: ['http://127.0.0.1:8080/geoserver/maplibre/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=maplibre:gis_osm_railways_free_1&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'],
                'minZoom': 0,
                'maxZoom': 14,

            });
            map.addLayer({
                'id': 'my_layer',
                'type': 'line',
                'source': 'railways',
                'source-layer': 'gis_osm_railways_free_1',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#ff69b4',
                    'line-width': 1
                }
            });

        });
    </script>
</body>

</html>