更改地图样式 react-leaflet

React-leaflet 是一个基于 React 和 Leaflet 的库，用来在 React 应用中创建交互式的地图。和 Leaflet 一样，React-leaflet 也支持导入第三方地图并可以自定义地图样式。

更改地图样式

要更改地图样式，我们需要先导入一个第三方地图的样式，然后将其传递给 React-leaflet 组件。

导入样式

我们可以通过 Maptiler 创建并导出一个 .json 文件来得到自己喜欢的地图样式。这里我们将使用一个叫做 Mapbox Streets 的样式。

在 React 中，我们可以先将样式文件放入 public 文件夹下。然后将文件的路径传递给 Map 组件：

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';

const tileUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={your-access-token}';

const accessToken = '<your-access-token>';

function MyMap() {
  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer 
        url={tileUrl} 
        attribution="<a href='https://www.mapbox.com/about/maps/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap</a> <a href='https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/' target='_blank'>Mapbox examples</a>" 
        accessToken={accessToken} />
    </Map>
  );
}

这样我们就成功导入了 Mapbox Streets 样式。

自定义样式

现在我们可以按照个人需求自定义地图样式。

要自定义地图样式，我们需要打开样式文件，找到对应的图层，然后更改它们的样式。比如，我们可以增加 / 减少道路的宽度或者加入自己的图层。

// The style.json file
{
  "version": 8,
  "name": "Mapbox Streets",
  "metadata": {
    "mapbox:autocomposite": true,
    "mapbox:type": "template",
    "mapbox:groups": {
      "Transit, transit-labels": { "name": "Transit, transit-labels" },
      ...
    }
  },
  "sources": {
    "composite": {
      "url": "mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2",
      "type": "vector"
    }
  },
  "layers": [
    {
      "id": "land",
      "type": "background",
      "source": "composite",
      "source-layer": "land",
      "paint": {
        "background-color": "hsl(49, 100%, 50%)"
      }
    },
    ...
  ]
}

layers 里面包含了所有的图层。在这个例子中，最上面那个图层是背景（是一座直接在地球上旋转的球形建筑，它是静态不动的，但是是可以交互的），源为 composite，source-layer 为 land，paint 里面定义了一个背景颜色。我们可以更改颜色或者找到其他的设置。

如果要增加一个新的图层，可以在 layers 中加入以下代码：

{
  "id": "my-layer",
  "type": "line",
  "source": "my-source",
  "paint": {
    "line-color": "#ff0000",
    "line-width": 2
  }
}

需要注意的是，我们新加的图层需要有对应的 source。

导入自定义样式

当你自定义好了地图样式后，在 React-leaflet 里面如何导入呢？

我们需要先将样式文件转成可用的字符串，然后将其传递给 TileLayer 组件。

import React from 'react';
import { Map, TileLayer } from 'react-leaflet';

const tileUrl = 'https://api.mapbox.com/styles/v1/{username}/{style-id}/tiles/{z}/{x}/{y}?access_token={accessToken}';

const accessToken = '<your-access-token>';

const username = '<your-username>';
const styleId = '<your-style-id>';

const customStyle = JSON.stringify(<your-custom-style>);

function MyMap() {
  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer 
        url={tileUrl} 
        attribution="<a href='https://www.mapbox.com/about/maps/' target='_blank'>&copy; Mapbox &copy; OpenStreetMap</a> <a href='https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/' target='_blank'>Mapbox examples</a>" 
        accessToken={accessToken} 
        username={username}
        styleId={styleId}
        customTileUrl={`data:image/png;base64,${btoa(customStyle)}`} />
    </Map>
  );
}

我们需要将自定义样式转化为字符串，并使用 btoa() 将其编码为 base64，然后传递给 customTileUrl 属性。同时，需要传递 username 和 styleId 属性让 React-leaflet 找到你的自定义样式。

总结

以上就是更改地图样式的方法，我们可以根据自己的需求来选择地图样式和进行自定义。React-leaflet 提供了非常方便的 API，让我们可以轻松地在 React 中构建高质量的交互式地图应用。