leaflet前端可视化学习（1）

基于react的leaflet可视化开发

1.使用npm将leaflet导入项目：

npm i leaflet --save-dev

首先是要安装leaflet到开发环境中，然后再在页面中进行引用；

2.如何将其引入页面：

import L from ‘leaflet’

通常我们会使用L来作为其引入的实例；

3.进行地图的绘制：
地图api参考链接： http://blog.sina.com.cn/s/blog_5ff72f610101ku5d.html
http://blog.sina.com.cn/s/blog_5ff72f610101ku5e.html
L.map(id,options}
id指的是其地图渲染的锚点，通常是以id选择器来确定，options是其多种属性，通常包含crs（参考坐标系）等；然后通过setView进行地图的设定，并将其存在一个变量中，以便后续的操作；示例代码如下：

this.map = L.map("mapDiv", {
            crs: L.CRS.EPSG3857,
            zoomControl: false,
            minZoom: 7,
            attributionControl: false
        }).setView([29.59, 106.59], 12);

如果在这一步遇到瓦片地图加载混乱，加载不全的时候，一定记得将leaflet.css引进来；
然后是标记地图上的一个点

L.marker(latLng, {
            highlight: "permanent"
        }).addTo(this.map);