leaflet加载geojson数据_【小马开发笔记】从leaflet与vue2leaflet的区别理解vue的生命周期与mounted...

背景：

最近的工作想用vue想把原来全栈用django做的geodjano网站区分出来。我们长期用leaflet做地理网站的前端显示，之前一直是把数据整体加载进去的，作为demo尝试可以。数据量大了，权限的问题，还有缓存管理等问题，不得不把整个项目重构一遍，后端数据全部做成restful的api接口，前端用vue进行重构。

前期逻辑进度还挺好的，基本登陆注册和各种控件用vue的组件式开发方便太多，用vue的webpack打包成一个静态index.html作为django的入口，等于放弃django的一套模板工具。前期基本没什么阻力，到leaflet的时候问题开始出现。

问题：

leaflet的基本逻辑如下：

1、先找一个id为map的div。

2、设置基本的属性，如缩放大小，地图中心点。

3、添加基本底图，如openstreet的到这个上，主要是raster的png格式的，会动态加载

3、添加geojson格式的地理矢量图层

4、添加各种图层控制、搜索框等

以1-3为例，官方的demo如下：

//新建map实例，设置基本属性，设置地图中心点经纬度与缩放大小

整个的逻辑是图层添加的，一层层加上去的（每个具体图层后面都有个.addTo(map)）。

而vue的逻辑是双向绑定和我的理解中，类似于wpf里面那套先声明html要素，定义变量在html要素里面，然后写方法在script里面，然后实现html要素动态刷新和双向绑定的的。因此，理论上leaflet在vue中应该是类似这个样子。

<

里面的属性我乱写的，作为一个参考，然后后续的script定义和操作options这类变量，这种逻辑和leaflet的一层层叠加，操作dom的方式完全相左。并且很难兼容，所以问题来了：

1、如何在vue框架中使用leaflet?（问题1）

2、以往的leaflet项目如何迁移到vue中？（问题2）

方案：

问题1比较好解决，有人做了vue2leaflet项目，把leaflet包裹成为了一个适合vue这种组件化开发的状态，其基本的实现逻辑为：

<

也是先定义组件和ref，随后在后面通过this.$refs和mapObject的方式调用leaflet的地图方法。但是这里涉及两个不熟悉的东西。

1、mounted

2、$nextTick

经过搜索引擎搜索，大概明白发生了什么。

vue整个文件实质是一个vue对象，有自己的整个生命周期，图片如下：

例如常用的create，就是为了让method中能使用自己声明的函数，就是在整个vue对象初步生成之后，定义自己声明的函数。mounted则是在模板html要素编译结束过一次后，进入的流程，基本类似于以前用原生html，然后在里面放script块的情况。

随后vue会看情况刷新这个页面，通过一个异步方法和消息队列来处理数据的更新，具体nextTick的情况参考这篇文章。

简单理解为mounted中其他部分运行完了，然后下一个轮回（tick）后再运行tick内的内容。具体的应用场景就是，地图底图加载完了，然后再添加控制底图开关的控件和地理处理的内容。

今天写累了，看看每天写点这种小的涉及具体业务的知识点的内容的反馈吧，没人看就算自己整理思路，自己学习了。

问题2以后再更新吧。