React typescript + leaflet + openstreetmap 集成

💡

本文主要内容：大概介绍一下如何在typescript+react的条件下通过leaflet集成openstreetmap。

为什么要选择openstreetmap

与其问为什么选择openstreetmap，不如问为什么不选择百度地图、google地图等知名地图呢？
因为openstreetmap是开源免费的，具体可以参考他们的about页面。
以Google Map为例，如果和Google Map集成，是会需要注册GCP，并且在超过一定的用量之后会产生费用。具体可以参考这一份文档。
其他的地图，比如某度，其信用甚至还不如Google。其实也是尽可能避免使用商业公司的东西。

另外一个问题就是可靠性的考量。主要两个方面：1. 用的人多不多？2. 稳定性靠不靠谱。
从这个页面我们可以看到，其实这个map还是有一些欧美的政府在使用，维基百科等等的都还是不少人用。加上我用过的Nextcloud其实也是集成的这个地图。所以我认为这个地图的用户虽然不如Google，但是也还算是有一定的用户。
至于稳定性来说，首先我相信欧美政府部门肯定也是考虑过这个问题。其次，我自己的Nextcloud也算是比较重度的使用，大概4-5年的体验来看，没见挂过。

所以，从减少商业依赖的角度、从可靠性的角度，综合考虑之后，我选择了openstreetmap。

为什么选择leaflet

因为google搜索“react openstreetmap”，第一条就是React Leaflet

如何集成

Leaflet其实默认就是使用的openstreetmap，所以其实集成起来还算是比较简单。但是呢，Leaflet的文档还是有点小坑。

Working Demo

先上一个别人写的，可以work的Demo。

安装依赖

就安装以来来说，其官方文档还是写的很清楚的。其实就是安装三个库leaflet、react-leaflet、@types/leaflet。
就这么简单yarn add一下就好了。

引入css

在安装完依赖之后，如果直接按照官方文档里的Setup的代码写的话，你大概会得到下面这张图：

其原因是没有引入leaflet的css，这里有两种方法引入，一种是参考上面的demo里的index.html，直接从外部下载就好。

另外一种就是直接在tsx里引入包里的css：

import 'leaflet/dist/leaflet.css';

引入了css之后，整个地图就能展示出来了。

类似的问题还有Maker图标丢失等等，也是类似的解决方案。

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

具体代码

不得不说，官网的代码还是没错的。

Setup | React Leaflet

1. Follow all the steps from the installation page

React Leaflet

抄一下官网的代码：

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>

总之，还算是比较简单好用的一个地图工具，就是感觉文档啥的有点小坑。