mapbox加载栅格瓦片后如何修改地图风格-CFANZ编程社区

前言：mapbox加载矢量切片，能做到快捷自定义地图样式的优势非常明显。然而还是有加载栅格瓦片的需求存在。栅格瓦片是已经切图完成的图片，并不能像矢量数据那样在前端自定义样式。但我们仍然可以通过添加css滤镜（filter）做到整体地图风格的变换以适应前端风格的需要。

1 mapbox加载栅格瓦片的基本代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add a raster tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <!-- <script src='js/mapbox-gl.js'></script>
    <link href='css/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.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ';
// var tileset = 'mapbox.streets';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: {
        "version": 8,
        "sources": {
            // "raster-tiles": {
            //     "type": "raster",
            //     'tiles': [
            //       "http://localhost:8088/tile/{z}/{x}/{y}.png"
            //   ],
            //     "tileSize": 256
            // },
            "raster-tiles": {
                "type": "raster",
                'tiles': [
                    // "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                    // "https://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
                    "https://mt1.google.cn/maps/vt?lyrs=s%40721&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}"
                //   "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
              ],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 0,
            "maxzoom": 18
        },
        // {
        //     "id": "simple-tiles1",
        //     "type": "raster",
        //     "source": "raster-tiles1",
        //     "minzoom": 4,
        //     "maxzoom": 21
        // }
    ]
    },
    center: [120.150, 30.140], // starting position
    zoom: 8 // starting zoom
});
</script>

</body>
</html>

2 在开发者工具中测试添加css滤镜效果：

canvas.mapboxgl-canvas {
    filter: grayscale(1);
}

截图如下：

3 所以在样式中添加所需的滤镜即可修改风格

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add a raster tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <!-- <script src='js/mapbox-gl.js'></script>
    <link href='css/mapbox-gl.css' rel='stylesheet' /> -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        canvas.mapboxgl-canvas {
            filter: grayscale(1);
        }
    </style>
</head>

<body>

    <div id='map'></div>
    <script>
        // mapboxgl.accessToken = 'pk.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ';
        // var tileset = 'mapbox.streets';
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    // "raster-tiles": {
                    //     "type": "raster",
                    //     'tiles': [
                    //       "http://localhost:8088/tile/{z}/{x}/{y}.png"
                    //   ],
                    //     "tileSize": 256
                    // },
                    "raster-tiles": {
                        "type": "raster",
                        'tiles': [
                            // "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                            // "https://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
                            "https://mt1.google.cn/maps/vt?lyrs=s%40721&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}"
                            //   "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        ],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 18
                },
                    // {
                    //     "id": "simple-tiles1",
                    //     "type": "raster",
                    //     "source": "raster-tiles1",
                    //     "minzoom": 4,
                    //     "maxzoom": 21
                    // }
                ]
            },
            center: [120.150, 30.140], // starting position
            zoom: 8 // starting zoom
        });
    </script>

</body>

</html>

css filter 可以修改的样式有很多，例子中仅演示了灰度值的修改，请多多尝试其他效果。
grayscale灰度
sepia褐色（求专业指点翻译）
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊

css filter 参考：https://www.w3cplus.com/css3/ten-effects-with-css3-filter
https://www.jianshu.com/p/ca7a2bdcc1e7