从零开始，构建电子地图网站：0_15_VUE+leaflet+springboot数据交互功能实现

还是在HistoryMap.vue中实现最初的设计。

Vue适合搭建交互简单的前端工程，像是整合leaflet这样，涉及到地图交互，组件之间的数据通信，挺麻烦的，最好还是用原生的来写。

不管如何，我们把这个工程完成吧。

因为通信比较复杂，所以取消了drawer抽屉移出属性table，直接用的leaflet的bindPopup。

一、效果图

 

二、文件结构

文件结构长这样。Icon文件夹中是点图标，一个红色，一个黑色。

三、HistoryMap.vue代码

所有内容都写在HistoryMap.vue中，其他的没有变化。

主要注意三点。

一是，每次重新加载的时候，对全部覆盖物会有一个移除的过程。

二是，地图加载覆盖物，后加载的会压在之前加载的上面，所以程序里，做了三次循环，先加载polygon，再加载point。

三是，覆盖物会横跨几个朝代，所以为了避免重复加载，用数组cntyindexlist[]、prefptsindexlist[]、prefpgnindexlist[]记录geometry对象的唯一索引gid，先判断geometry对象有没有被加载过，没有被加载过，再加载。

 

 

四、git

 

https://github.com/yimengyao13/vue-gismap.git

分支：leaflets

 

接下来该做的就是打包，整合到后端工程中了。