【leafletjs】搭建地图

基于leafletjs作为底层框架--搭建二维地图
1、加入依赖包
"leaflet": "^1.7.1",
react-leaflet v.2.x中需引起的依赖
"react-leaflet": "2.6.1",//固定版本
react-leaflet v.3.x中需引起的依赖
"react-leaflet": "^3.0.2",

2、在地图路由页面中依赖
import { Map } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

3、创建地图容器
const mapCenter: any = [30.25027961206251, 120.16514401757941];
react-leaflet v.2.x中的map实例
 <Map style={{ width: '100%', height: '100%' }}   center={mapCenter} zoom={12} > </Map>
react-leaflet v.3.x中的map实例
 <MapContainer style={{ width: '100%', height: '100%' }} center={mapCenter} zoom={12} > </MapContainer>

4、引入地图矢量瓦片
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

项目最终运行起来效果如下：

 这样就把地图的框架搭建起来了，就可以再地图中实现各种功能了。