以MapBox为核心构建Vue地图组件库教程
近期接触MapBox ,为了避免重复的编写地图应用,我计划以mapbox gl为核心构建一套GIS组件库。
不多废话直接讲干货,首先我们要清楚如何写一套组件库,类似于使用vue编写的elementui,使用react编写的antdesign等,我们现在要以GIS为核心写组件库,其实原理类似。
首先我们以vue为例,我们之前肯定也有过以插件的方式使用第三方库的体验,例如:
Vue.use(ElementUI)
因此我们开发一套地图框架也尽量是以插件的方式,用Vue的use方法来引入组件。
接下来我们详细的记录一下构建流程。
1.安装node环境,测试npm版本。大家自行百度
2.使用vue create app命令创建一个vue项目
vue create MapboxApp
这里项目的名称最好不要用-连字符,因为不方便后续的发布和引入,尽量使用驼峰命名
3.打开项目结构,先删除不需要的helloworld,App.vue,这两个在我们的组件库当中没有用的。
将项目结构整理成如下图的样子就行:
最重要的是在src目录下面要有存放组件的components文件夹,和平级目录下要有一个index.js用于暴露我们所有的组件给外部。
4.我们可以在components目录下建立多个组件的文件夹