本仓库记录学习在Vue中使用OpenLayers的过程
用到的主要组件:
"element-ui": "^2.4.4",
"ol": "^5.3.1"
vuex vue-router eventBus
地址:https://homxuwang.github.io/OpenLayersInVue/ 用户名: admin 密码: 123
use Vue.js & OpenLayers.
本项目没有构建单元测试部分和ESLint功能(因为我太菜了ORZ,省点事吧OAO)
├── README.md
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── App.vue 根组件
│ ├── components 公共组件目录
│ │ ├── home 主页组件目录
│ │ │ ├── components
│ │ │ │ ├── components
│ │ │ │ │ ├── analysis
│ │ │ │ │ │ ├── createBuffer.vue
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── check
│ │ │ │ │ │ ├── clickCheck.vue
│ │ │ │ │ │ └── valueCheck.vue
│ │ │ │ │ ├── defaultControl
│ │ │ │ │ │ ├── defaultControl.vue
│ │ │ │ │ │ └── defaultControlCode.js
│ │ │ │ │ ├── draw
│ │ │ │ │ │ ├── coordinateDraw.vue
│ │ │ │ │ │ ├── freeDraw.vue
│ │ │ │ │ │ ├── initializationDrawElements.js
│ │ │ │ │ │ └── standardDraw.vue
│ │ │ │ │ └── edit
│ │ │ │ │ ├── editGeometry.vue
│ │ │ │ │ ├── editProperties.vue
│ │ │ │ │ └── index.js
│ │ │ │ ├── leftBottom.vue
│ │ │ │ └── leftTop.vue
│ │ │ └── home.vue
│ │ ├── map 地图组件目录
│ │ │ └── map-component.vue 地图组件
│ │ ├── login 登陆目录
│ │ │ └── login.vue 登陆组件
│ │ ├── modules 通用组件
│ │ │ ├── appHeader.vue 顶部组件
│ │ │ ├── appBottom.vue 底部组件
│ │ │ └── popForConfirm.vue 弹出框组件
│ │ ├── utils 工具目录
│ │ │ ├── dateUtil.js 日期辅助函数
│ │ │ ├── localStorage.js 存取登录信息
│ │ │ ├── imagePath.js 获取图片路径
│ │ │ └── vectorLayerFactory.js 创建矢量图层工厂函数库
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ │ ├── logo.png
│ │ │ ├── logo_1.png
│ │ │ ├── bg.png
│ │ │ └── ....
│ ├── config 地图配置目录
│ │ └── mapconfig.js 地图配置文件、服务器配置文件
│ ├── routes 前端路由
│ │ └── index.js
│ └── store vuex
│ ├── action.js
│ ├── getter.js
│ ├── index.js
│ ├── mutations.js
│ └── state.js
├── static 纯静态资源，不会被wabpack构建。
│ │ ├── data 数据文件
│ │ │ ├── whPoint_geojson.json 武汉矢量点数据文件
│ │ │ ├── whPolygon_geojson.json 武汉矢量区划数据文件
│ │ │ └── whRoads_geojson.json 武汉矢量路网数据文件
│ │ ├── json json配置文件
│ │ │ └── options.json 地图操作选项配置
│ │ └── config.js
空间分析功能要使用对应后台服务,见 https://github.com/homxuwang/geoanalysis
在src\config\mapconfig.js中配置后台服务路径地址
-
矢量图层控制 2019/04/27(加载本地矢量geojson文件,因为没有矢量切片所以加载会很慢,且比较耗费内存资源.暂时使用同步加载,没有采用异步加载的方式.todo: 异步加载数据)
-
切换底图 2019/04/14
-
地图基本控件 2019/04/15
- 比例尺
- 鼠标位置
- 鹰眼
- 缩放条
- 定位到某位置
-
正则没有加精度输入负值时的判断,后续要改
-
绘图功能
-
坐标添加
- 点添加 2019/04/18
- 圆添加 2019/04/19
- 线添加 2019/04/19
- 多边形添加 2019/04/19
- 长方形添加 2019/04/19
- 正方形添加 2019/04/19
- 清空图形
-
绘制标准图形 (参考:官方实例)
- 点 2019/04/29
- 线 2019/04/29
- 多边形 2019/04/29
- 圆 2019/04/29
- 长方形 2019/04/29
- 正方形 2019/04/29
-
自由绘图
自由绘图和标准绘图之间切换会有小bug,自由绘图的圆切换到标准绘图后仍可以继续绘图- 线 2019/04/29
- 多边形 2019/04/29
- 圆 2019/04/29
-
-
编辑功能
- 图形编辑 2019/06/15
-
空间分析功能
- 生成缓冲区 2019/06/25
todo:切换底图时绘制的图形会消失
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor a detailed explanation on how things work, check out the guide and docs for vue-loader.