leaflet+vue实现webgis小系统(附源码下载)

        这个是在我前面写的博库leaflet+geoserver+jquery基础上进行了一点调整,将jquery框架拆解替换为Vue3,我们都知道Vue框架适用于项目中有多个部分是相同的,并可以封装成一个组件,但是针对我这个小demo-webgis系统来说,使用vue3真实大材小用了,里面涉及到组件间通信(使用了大量的inject,provide),拆分成多个组件需要使用Hook函数封装公共方法将结果暴露出去。最后只能拆解1/3,因为到后面做不下去了,主要是自己太菜了,拆解的组件和Hook方法如下图所示:

leaflet+vue实现webgis小系统(附源码下载)_第1张图片

       看到这个我已经乱了,vue学习中涉及到的todoist案例很简单,但是组件也达到了4个,现在想想这种简单的单页面应用APS使用Vue框架我还是不太熟悉,需要参与其他vue项目来多加练习。         本次使用Vue框架代替jquery实现的功能主要有显示地图参数、定位、显示经纬度和显示日志以及删除leaflet.draw插件绘制的图形(该图形具有属性信息)。 源代码链接放在了评论区。

leaflet+vue实现webgis小系统(附源码下载)_第2张图片

你可能感兴趣的:(vue.js,web)