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。

GitHub - tomik23/react-leaflet-examples: A collection of examples on how to use the react-leaflet and leaflet libraries.
:maple_leaf: A collection of examples on how to use the react-leaflet and leaflet libraries. - GitHub - tomik23/react-leaflet-examples: A collection of examples on how to use the react-leaflet and ...
不是我写的,但是这个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

抄一下官网的代码:

<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>

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