GeoServer+vue2+leaflet构建地图服务

因为geoserver就是后端服务，所以如果没有太强烈的数据安全需求，其实没有必要再加一个python django或者java springboot来做服务中转，转发请求。

现在其实有一个大前端的概念，前端开发模式下，能模拟服务端请求，也能解决get和post请求的跨域问题，而且前端也可以直接部署到服务器上，所以，我们只要有一个前端平台就可以了。

我这里选用的前端框架是vue2，主要出于三点考虑，其一是简单易用上手快；其二是leaflet对它的集成比较好；其三是用的人比较多，有点问题上网搜，容易找到回答。

（这里着重提示一下，尽量用比较大众的东西，否则的话，排查问题、查找资料都很难，做得好赖也不好评价。会油然而生孤立无援之感，这是经验之谈。）

我的IDE选择的是sublime，轻量，而且插件多。

Git代码见：https://github.com/yimengyao13/geoserver_vue_leaflet。别忘了给点个star！

前端工程能实现，地图加载WMTS服务，点击渲染geojson，根据属性筛选要素，矢量要素绘制等功能，最常用的功能都涵盖了，怎么实现，往下看，写得很详细。

本例配套的Geoserver发布地图服务见：https://zhuanlan.zhihu.com/p/377826133

视频教程见：

https://www.bilibili.com/video/BV1cK4y1g7Rz/

一、构建工程

1-1.构建vue-cli工程

首先要确保本机已经安装了nodejs和vue。

如果没有安装，nodejs安装参见：https://www.runoob.com/nodejs/nodejs-install-setup.html。

Vue安装参见：https://www.runoob.com/w3cnote/vue2-start-coding.html。

安装完之后，查看一下node和vue的版本。

Vue已经有3版本了，但为了稳定性，我们还是用2版本。记住vue的版本号，后续安装依赖，要考虑版本。

好，我们默认已经安装好nodejs和vue了，接下来我们要开始构建工程了。

打开cmd窗口，切换到指定路径下。

首先，我们切换一下vue的下载源。

因为vue的资源服务器在国外，下载起来特别慢，我们切换到淘宝镜像：

npm config set registry https://registry.npm.taobao.org

然后运行：

mkdir geoserver_vue2_leaflet

新建一个geoserver_vue2_leaflet文件夹。

cd geoserver_vue2_leaflet

切换到文件夹下。

运行：

vue init webpack geoserver_vue_leaflet

新建工程geoserver_vue_leaflet。

根据提示回车，或者输入内容，保持默认设置就行，这些后续都可以修改。

注意install vue-router项，要选择yes。

工程安装完之后，运行：

cd geoserver_vue_leaflet

npm run dev

访问：http://localhost:8080/#/

能看到vue页面，就说明vue-cli工程创建成功了。