Leaflet 在 React 使用自定义地图（百度地图，高德地图）

Leaflet简介

Leaflet是前端处理 geoJson数据的重要组件。它能很方便地在地图上构建Polygon, marker, line等地理图形。常规的地图服务需要底图，底图上会显示街道、交通和商铺等信息。但leaflet默认采用的街道和卫星图片在国内加载可能缓慢，而且它们的地图信息不够精细。于是在国内，我们可以采用百度地图或者高德地图作为底图。本篇将进行介绍。

准备工作

使用 npm 下载 leaflet 组件，并将它记录在package.json的依赖中

npm install leaflet --save

在项目的页面模板处引入leaflet的样式表（这一步非常重要。如果没有导入，地图会出现错乱。本项目是create-umi脚手架创建的ant-design-pro项目，页面模板文件在src/pages/document.ejs。其他脚手架创建的页面模板可能在src/app.js或者src/index.js）。

代码奉上（其中含有版本，修改版本时记得先查看该版本是否存在。不同版本差别不大）：

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

在很多关于leaflet的文档中，会建议用如下的方式在组件中导入leaflet的样式表。

import 'leaflet/dist/leaflet.css';

但这样可能会出现这样的错误（关于这个问题， 这篇文章 提出了一种解决办法，但它有副作用，这里不展开）：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'images/layers-2x.png' in 'path\to\node_modules\[email protected]@leaflet\dist'

Leaflet 地理地图

接下来我们可以使用leaflet的地图：

import React from "react";
import L from 'leaflet';
class NormalMap extends React.Component{
   
  componentDidMount (){
   
    // react的生命周期中，只有当Mount结束后才能通过id获得真实dom元素。
    L.map('normal-map', {
   
      center: [49.8419, 24.0315],
      zoom: 16,
      layers: [