├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── docs ├── index.html └── static │ ├── config.json │ ├── css │ ├── app.262003a264ca9119bfe76175ebb13d20.css │ └── app.262003a264ca9119bfe76175ebb13d20.css.map │ ├── data │ ├── whPoint_geojson.json │ ├── whPolygon_geojson.json │ └── whRoads_geojson.json │ ├── fonts │ └── element-icons.6f0a763.ttf │ ├── img │ ├── bg.764f216.png │ ├── header.3a6273a.png │ ├── header_logo.26168e3.png │ ├── left-bg.c0469f0.jpg │ ├── logo_1.f6c09a8.png │ └── wuhan.b72d84b.png │ ├── js │ ├── 0.6fac6cd614690bbb251a.js │ ├── 0.6fac6cd614690bbb251a.js.map │ ├── 1.0de439170e5c78b8706f.js │ ├── 1.0de439170e5c78b8706f.js.map │ ├── app.54f061815d4b617135cf.js │ ├── app.54f061815d4b617135cf.js.map │ ├── manifest.b85fcf5b86cd46a1c1c8.js │ ├── manifest.b85fcf5b86cd46a1c1c8.js.map │ ├── vendor.60b1be98a95786a705ff.js │ └── vendor.60b1be98a95786a705ff.js.map │ └── json │ ├── drawType.json │ └── options.json ├── index.html ├── package.json ├── sh.exe.stackdump ├── src ├── App.vue ├── App.vue.bak ├── assets │ └── images │ │ ├── bg.png │ │ ├── header.png │ │ ├── header_logo.png │ │ ├── left-bg.jpg │ │ ├── logo.png │ │ ├── logo_1.png │ │ ├── svgs.vue │ │ ├── user.png │ │ └── wuhan.png ├── components │ ├── HelloWorld.vue.bak │ ├── home │ │ ├── components │ │ │ ├── components │ │ │ │ ├── analysis │ │ │ │ │ ├── createBuffer.vue │ │ │ │ │ └── index.js │ │ │ │ ├── check │ │ │ │ │ ├── clickCheck.vue │ │ │ │ │ └── valueCheck.vue │ │ │ │ ├── defaultControl │ │ │ │ │ ├── defaultControl.vue │ │ │ │ │ └── defaultControlFactory.js │ │ │ │ ├── draw │ │ │ │ │ ├── coordinateDraw.vue │ │ │ │ │ ├── freeDraw.js │ │ │ │ │ ├── freeDraw.vue │ │ │ │ │ ├── icon.png │ │ │ │ │ ├── initializationDrawElements.js │ │ │ │ │ ├── standardDraw.js │ │ │ │ │ └── standardDraw.vue │ │ │ │ └── edit │ │ │ │ │ ├── editGeometry.vue │ │ │ │ │ ├── editProperties.vue │ │ │ │ │ └── index.js │ │ │ ├── leftBottom.vue │ │ │ └── leftTop.vue │ │ └── home.vue │ ├── login │ │ └── login.vue │ ├── map │ │ ├── map-component.vue │ │ └── vectorLayer.vue │ ├── modules │ │ ├── appBottom.vue │ │ ├── appHeader.vue │ │ └── popForConfirm.vue │ └── utils │ │ ├── dateUtil.js │ │ ├── imagePath.js │ │ ├── localStorage.js │ │ └── vectorLayerFactory.js ├── config │ └── mapconfig.js ├── main.js ├── router │ └── index.js └── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js └── static ├── .gitkeep ├── config.json ├── data ├── whPoint_geojson.json ├── whPolygon_geojson.json └── whRoads_geojson.json └── json ├── drawType.json └── options.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | package-lock.json 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 本仓库记录学习在Vue中使用OpenLayers的过程 2 | 3 | 用到的主要组件: 4 | ``` 5 | "element-ui": "^2.4.4", 6 | "ol": "^5.3.1" 7 | ``` 8 | vuex vue-router eventBus 9 | # 在线测试 10 | 11 | 地址:https://homxuwang.github.io/OpenLayersInVue/ 12 | 用户名: admin 13 | 密码: 123 14 | 15 | # vueopenlayers 16 | 17 | > use Vue.js & OpenLayers. 18 | 19 | # 项目结构 20 | 21 | 本项目没有构建单元测试部分和ESLint功能(因为我太菜了ORZ,省点事吧OAO) 22 | ``` 23 | ├── README.md 24 | ├── index.html 入口页面 25 | ├── build 构建脚本目录 26 | │ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面 27 | │ ├── build.js 生产环境构建脚本 28 | │ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 29 | │ ├── dev-server.js 运行本地开发服务器 30 | │ ├── utils.js 构建相关工具方法 31 | │ ├── webpack.base.conf.js wabpack基础配置 32 | │ ├── webpack.dev.conf.js wabpack开发环境配置 33 | │ └── webpack.prod.conf.js wabpack生产环境配置 34 | ├── config 项目配置 35 | │ ├── dev.env.js 开发环境变量 36 | │ ├── index.js 项目配置文件 37 | │ ├── prod.env.js 生产环境变量 38 | │ └── test.env.js 测试环境变量 39 | ├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息 40 | ├── src 源码目录 41 | │ ├── main.js 入口js文件 42 | │ ├── App.vue 根组件 43 | │ ├── components 公共组件目录 44 | │ │ ├── home 主页组件目录 45 | │ │ │ ├── components 46 | │ │ │ │ ├── components 47 | │ │ │ │ │ ├── analysis 48 | │ │ │ │ │ │ ├── createBuffer.vue 49 | │ │ │ │ │ │ └── index.js 50 | │ │ │ │ │ ├── check 51 | │ │ │ │ │ │ ├── clickCheck.vue 52 | │ │ │ │ │ │ └── valueCheck.vue 53 | │ │ │ │ │ ├── defaultControl 54 | │ │ │ │ │ │ ├── defaultControl.vue 55 | │ │ │ │ │ │ └── defaultControlCode.js 56 | │ │ │ │ │ ├── draw 57 | │ │ │ │ │ │ ├── coordinateDraw.vue 58 | │ │ │ │ │ │ ├── freeDraw.vue 59 | │ │ │ │ │ │ ├── initializationDrawElements.js 60 | │ │ │ │ │ │ └── standardDraw.vue 61 | │ │ │ │ │ └── edit 62 | │ │ │ │ │ ├── editGeometry.vue 63 | │ │ │ │ │ ├── editProperties.vue 64 | │ │ │ │ │ └── index.js 65 | │ │ │ │ ├── leftBottom.vue 66 | │ │ │ │ └── leftTop.vue 67 | │ │ │ └── home.vue 68 | │ │ ├── map 地图组件目录 69 | │ │ │ └── map-component.vue 地图组件 70 | │ │ ├── login 登陆目录 71 | │ │ │ └── login.vue 登陆组件 72 | │ │ ├── modules 通用组件 73 | │ │ │ ├── appHeader.vue 顶部组件 74 | │ │ │ ├── appBottom.vue 底部组件 75 | │ │ │ └── popForConfirm.vue 弹出框组件 76 | │ │ ├── utils 工具目录 77 | │ │ │ ├── dateUtil.js 日期辅助函数 78 | │ │ │ ├── localStorage.js 存取登录信息 79 | │ │ │ ├── imagePath.js 获取图片路径 80 | │ │ │ └── vectorLayerFactory.js 创建矢量图层工厂函数库 81 | │ ├── assets 资源目录，这里的资源会被wabpack构建 82 | │ │ └── images 83 | │ │ │ ├── logo.png 84 | │ │ │ ├── logo_1.png 85 | │ │ │ ├── bg.png 86 | │ │ │ └── .... 87 | │ ├── config 地图配置目录 88 | │ │ └── mapconfig.js 地图配置文件、服务器配置文件 89 | │ ├── routes 前端路由 90 | │ │ └── index.js 91 | │ └── store vuex 92 | │ ├── action.js 93 | │ ├── getter.js 94 | │ ├── index.js 95 | │ ├── mutations.js 96 | │ └── state.js 97 | ├── static 纯静态资源，不会被wabpack构建。 98 | │ │ ├── data 数据文件 99 | │ │ │ ├── whPoint_geojson.json 武汉矢量点数据文件 100 | │ │ │ ├── whPolygon_geojson.json 武汉矢量区划数据文件 101 | │ │ │ └── whRoads_geojson.json 武汉矢量路网数据文件 102 | │ │ ├── json json配置文件 103 | │ │ │ └── options.json 地图操作选项配置 104 | │ │ └── config.js 105 | ``` 106 | 107 | 空间分析功能要使用对应后台服务,见 https://github.com/homxuwang/geoanalysis 108 | 109 | 在`src\config\mapconfig.js`中配置后台服务路径地址 110 | 111 | # todoList 112 | - [x] 矢量图层控制 2019/04/27(加载本地矢量geojson文件,因为没有矢量切片所以加载会很慢,且比较耗费内存资源.暂时使用同步加载,没有采用异步加载的方式.todo: 异步加载数据) 113 | 114 | - [x] 切换底图 2019/04/14 115 | - [x] 地图基本控件 2019/04/15 116 | - [x] 比例尺 117 | - [x] 鼠标位置 118 | - [x] 鹰眼 119 | - [x] 缩放条 120 | - [x] 定位到某位置 121 | 122 | - [x] 正则没有加精度输入负值时的判断,后续要改 123 | - [x] 绘图功能 124 | - [x] 坐标添加 125 | - [x] 点添加 2019/04/18 126 | - [x] 圆添加 2019/04/19 127 | - [x] 线添加 2019/04/19 128 | - [x] 多边形添加 2019/04/19 129 | - [x] 长方形添加 2019/04/19 130 | - [x] 正方形添加 2019/04/19 131 | - [x] 清空图形 132 | - [x] 绘制标准图形 (参考:[官方实例](https://openlayers.org/en/latest/examples/draw-shapes.html?q=draw)) 133 | - [x] 点 2019/04/29 134 | - [x] 线 2019/04/29 135 | - [x] 多边形 2019/04/29 136 | - [x] 圆 2019/04/29 137 | - [x] 长方形 2019/04/29 138 | - [x] 正方形 2019/04/29 139 | 140 | - [x] 自由绘图 ~~自由绘图和标准绘图之间切换会有小bug,自由绘图的圆切换到标准绘图后仍可以继续绘图~~ 141 | - [x] 线 2019/04/29 142 | - [x] 多边形 2019/04/29 143 | - [x] 圆 2019/04/29 144 | - [x] 编辑功能 145 | - [x] 图形编辑 2019/06/15 146 | 147 | - [x] 空间分析功能 148 | - [x] 生成缓冲区 2019/06/25 149 | 150 | 151 | todo:切换底图时绘制的图形会消失 152 | 153 | ## Build Setup 154 | 155 | ``` bash 156 | # install dependencies 157 | npm install 158 | 159 | # serve with hot reload at localhost:8080 160 | npm run dev 161 | 162 | # build for production with minification 163 | npm run build 164 | 165 | # build for production and view the bundle analyzer report 166 | npm run build --report 167 | ``` 168 | 169 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 170 | 171 | # 参考 172 | * https://github.com/openlayer-tutorial-group/ol5-primer 173 | * http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader', 51 | publicPath: '../../' 52 | }) 53 | } else { 54 | return ['vue-style-loader'].concat(loaders) 55 | } 56 | } 57 | 58 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 59 | return { 60 | css: generateLoaders(), 61 | postcss: generateLoaders(), 62 | less: generateLoaders('less'), 63 | sass: generateLoaders('sass', { indentedSyntax: true }), 64 | scss: generateLoaders('sass'), 65 | stylus: generateLoaders('stylus'), 66 | styl: generateLoaders('stylus') 67 | } 68 | } 69 | 70 | // Generate loaders for standalone style files (outside of .vue) 71 | exports.styleLoaders = function (options) { 72 | const output = [] 73 | const loaders = exports.cssLoaders(options) 74 | 75 | for (const extension in loaders) { 76 | const loader = loaders[extension] 77 | output.push({ 78 | test: new RegExp('\\.' + extension + '$'), 79 | use: loader 80 | }) 81 | } 82 | 83 | return output 84 | } 85 | 86 | exports.createNotifierCallback = () => { 87 | const notifier = require('node-notifier') 88 | 89 | return (severity, errors) => { 90 | if (severity !== 'error') return 91 | 92 | const error = errors[0] 93 | const filename = error.file && error.file.split('!').pop() 94 | 95 | notifier.notify({ 96 | title: packageConfig.name, 97 | message: severity + ': ' + error.name, 98 | subtitle: filename || '', 99 | icon: path.join(__dirname, 'logo.png') 100 | }) 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: false 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../docs/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../docs'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: './', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vueopenlayers
-------------------------------------------------------------------------------- /docs/static/config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "userAccount":[ 4 | { 5 | "name":"admin", 6 | "password":"123" 7 | }, 8 | { 9 | "name":"user", 10 | "password":"123" 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /docs/static/fonts/element-icons.6f0a763.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/fonts/element-icons.6f0a763.ttf -------------------------------------------------------------------------------- /docs/static/img/bg.764f216.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/bg.764f216.png -------------------------------------------------------------------------------- /docs/static/img/header.3a6273a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/header.3a6273a.png -------------------------------------------------------------------------------- /docs/static/img/header_logo.26168e3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/header_logo.26168e3.png -------------------------------------------------------------------------------- /docs/static/img/left-bg.c0469f0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/left-bg.c0469f0.jpg -------------------------------------------------------------------------------- /docs/static/img/logo_1.f6c09a8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/logo_1.f6c09a8.png -------------------------------------------------------------------------------- /docs/static/img/wuhan.b72d84b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/docs/static/img/wuhan.b72d84b.png -------------------------------------------------------------------------------- /docs/static/js/0.6fac6cd614690bbb251a.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],{"8jbG":function(e,t){},"9WhO":function(e,t){},C91i:function(e,t){},E6zW:function(e,t){},LqM4:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={render:function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"popForConfirm"}},[r("div",{staticClass:"el-message-box__wrapper",staticStyle:{"z-index":"2005"},attrs:{tabindex:"-1",role:"dialog","aria-modal":"true"}},[r("div",{staticClass:"el-message-box"},[r("div",{staticClass:"el-message-box__header"},[e._m(0),e._v(" "),r("button",{staticClass:"el-message-box__headerbtn",attrs:{type:"button","aria-label":"Close"},on:{click:e.closeBtnClick}},[r("i",{staticClass:"el-message-box__close el-icon-close"})])]),e._v(" "),e._m(1),e._v(" "),r("div",{staticClass:"el-message-box__btns"},[r("button",{staticClass:"el-button el-button--default el-button--small",attrs:{type:"button"},on:{click:e.cancelBtnClick}},[r("span",[e._v("取消")])]),e._v(" "),r("button",{staticClass:"el-button el-button--default el-button--small el-button--primary",attrs:{type:"button"},on:{click:e.enterBtnClick}},[r("span",[e._v("确定")])])])])]),e._v(" "),e._m(2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-message-box__title"},[t("span",[this._v("登出")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"el-message-box__content"},[t("div",{staticClass:"el-message-box__status el-icon-warning"}),this._v(" "),t("div",{staticClass:"el-message-box__message"},[t("p",[this._v("是否登出?")])]),this._v(" "),t("div",{staticClass:"el-message-box__input",staticStyle:{display:"none"}},[t("div",{staticClass:"el-input"},[t("input",{staticClass:"el-input__inner",attrs:{type:"text",autocomplete:"off",placeholder:""}})]),this._v(" "),t("div",{staticClass:"el-message-box__errormsg",staticStyle:{visibility:"hidden"}})])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticStyle:{position:"fixed",left:"0",top:"0",width:"100%",height:"100%",opacity:".5",background:"#000","z-index":"2002"}},[t("iframe",{staticStyle:{position:"absolute","pointer-events":"none",visibility:"inherit",top:"0px",left:"0px",width:"100%",height:"100%","z-index":"-1",filter:"alpha(opacity = 0)"},attrs:{src:"about:blank",frameBorder:"0",marginHeight:"0",marginWidth:"0"}})])}]};var o=r("VU/8")({name:"popForConfirm",data:function(){return{}},methods:{enterBtnClick:function(){this.$emit("enterBtnClick")},cancelBtnClick:function(){this.$emit("cancelBtnClick")},closeBtnClick:function(){this.$emit("closeBtnClick")}}},n,!1,function(e){r("9WhO")},"data-v-36c47d68",null).exports,i=r("fc3b"),a=r("ht9P"),s=r("qVyR"),c={name:"appHeader",components:{svgs:i.default,popForConfirm:o},data:function(){return{fullScreen:!1,theDateTime:"",timer:null,week:"",loginUserName:a.a.getLS("userInfo").name||"",popForConfirmShow:!1}},created:function(){this.theDateTime=Object(s.a)(new Date,"yyyy-MM-dd hh:mm:ss");var e=this;this.timer=setInterval(function(){e.theDateTime=Object(s.a)(new Date,"yyyy-MM-dd hh:mm:ss")},1e3),this.week="星期"+"日一二三四五六".charAt((new Date).getDay())},methods:{ifFullScreen:function(){var e=document.documentElement;this.fullScreen=!this.fullScreen,this.fullScreen?e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullScreen?e.webkitRequestFullScreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.msRequestFullscreen&&e.msRequestFullscreen():document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msRequestFullscreen||document.msExitFullscreen()},userInfoClick:function(e){"logout"===e&&(this.popForConfirmShow=!0)},confirmPopEnterBtnClick:function(){this.popForConfirmShow=!1,a.a.cleanLS("userInfo"),this.$router.replace("/login")},beforeDestroy:function(){this.timer&&clearInterval(this.timer)}}},l={render:function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{attrs:{id:"app_header"}},[r("div",{staticClass:"time-widget"},[r("div",{staticClass:"dateTime"},[e._v(e._s(e.theDateTime))]),e._v(" "),r("div",{staticClass:"week"},[e._v(e._s(e.week))])]),e._v(" "),r("div",{staticClass:"main-title"},[r("img",{attrs:{src:this.$loadImages.loadImages("header_logo.png")}}),e._v("OpenLayersInVue")]),e._v(" "),r("div",{staticClass:"userInfo"},[r("img",{attrs:{src:this.$loadImages.loadImages("user.png")}}),e._v(" "),r("el-dropdown",{on:{command:e.userInfoClick}},[r("span",{staticClass:"el-dropdown-link"},[e._v("\n "+e._s(e.loginUserName)+" "),r("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),r("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[r("el-dropdown-item",{attrs:{command:"logout"}},[e._v("登出")])],1)],1)],1),e._v(" "),r("svgs",{staticStyle:{display:"none"}}),e._v(" "),r("div",{directives:[{name:"show",rawName:"v-show",value:0==e.fullScreen,expression:"fullScreen==false"}],staticClass:"guide-item",on:{click:function(t){return e.ifFullScreen()}}},[r("svg",{staticClass:"icon_style"},[r("use",{attrs:{"xmlns:xlink":"http://www.w3.org/1999/xlink","xlink:href":"#fullScreen",fill:"#000"}})])]),e._v(" "),r("div",{directives:[{name:"show",rawName:"v-show",value:1==e.fullScreen,expression:"fullScreen==true"}],staticClass:"guide-item",on:{click:function(t){return e.ifFullScreen()}}},[r("svg",{staticClass:"icon_style"},[r("use",{attrs:{"xmlns:xlink":"http://www.w3.org/1999/xlink","xlink:href":"#exitFullScreen",fill:"#000"}})])]),e._v(" "),r("pop-for-confirm",{directives:[{name:"show",rawName:"v-show",value:e.popForConfirmShow,expression:"popForConfirmShow"}],on:{enterBtnClick:e.confirmPopEnterBtnClick,cancelBtnClick:function(t){e.popForConfirmShow=!1},closeBtnClick:function(t){e.popForConfirmShow=!1}}})],1)},staticRenderFns:[]};var u=r("VU/8")(c,l,!1,function(e){r("c09k")},"data-v-7c2186a3",null).exports,p=r("fZ3C"),d=r("Dd8w"),h=r.n(d),f=r("RKi4"),m=r("R4Sj"),y=r("ts36"),g=r("O1S/"),v=r("rgPn"),b=r("mjk6"),_=r("YABu"),w=r("gyL3"),C=r("TkS+"),O=function(){this.dataProjection=null,this.defaultFeatureProjection=null};O.prototype.getReadOptions=function(e,t){var r;return t&&(r={dataProjection:t.dataProjection?t.dataProjection:this.readProjection(e),featureProjection:t.featureProjection}),this.adaptOptions(r)},O.prototype.adaptOptions=function(e){return Object(_.a)({dataProjection:this.dataProjection,featureProjection:this.defaultFeatureProjection},e)},O.prototype.getLastExtent=function(){return null},O.prototype.getType=function(){return Object(w.b)()},O.prototype.readFeature=function(e,t){return Object(w.b)()},O.prototype.readFeatures=function(e,t){return Object(w.b)()},O.prototype.readGeometry=function(e,t){return Object(w.b)()},O.prototype.readProjection=function(e){return Object(w.b)()},O.prototype.writeFeature=function(e,t){return Object(w.b)()},O.prototype.writeFeatures=function(e,t){return Object(w.b)()},O.prototype.writeGeometry=function(e,t){return Object(w.b)()};var j=O;function x(e,t,r){var n,o=r?Object(C.d)(r.featureProjection):null,i=r?Object(C.d)(r.dataProjection):null;if(n=o&&i&&!Object(C.c)(o,i)?Array.isArray(e)?Object(C.j)(e,i,o):(t?e.clone():e).transform(t?o:i,t?i:o):e,t&&r&&void 0!==r.decimals&&!Array.isArray(n)){var a=Math.pow(10,r.decimals);n===e&&(n=e.clone()),n.applyTransform(function(e){for(var t=0,r=e.length;t",i.a.getLS("userAccountList")),i.a.getLS("userAccountList")||i.a.setLS("userAccountList",this.userAccountList),document.onkeyup=function(e){13===(e.charCode||e.keyCode)&&("login"===s.mode?s.loginBtnClick():"register"===s.mode?s.registerBtnClick():"changePass"===s.mode&&s.changePassBtnClick())}},methods:{loginBtnClick:function(){if(""===this.login_account)return this.$message.error("请输入账号！"),!1;if(""===this.login_password)return this.$message.error("请输入密码！"),!1;for(var s=i.a.getLS("userAccountList"),e=!1,t=null,a=0;a10||this.register_account.length<3)return this.$message.error("用户名长度3-10位"),!1;if(""===this.register_password)return this.$message.error("请输入密码"),!1;if(this.register_password.length>10||this.register_password.length<3)return this.$message.error("密码长度3-10位"),!1;if(""===this.register_rePassword)return this.$message.error("请再次输入密码"),!1;if(this.register_rePassword!==this.register_password)return this.$message.error("两次密码不一致"),!1;for(var s=i.a.getLS("userAccountList"),e=!1,t=0;t10)return this.$message.error("密码长度3-10位"),!1;if(""===this.changePass_rePassword)return this.$message.error("请再次输入密码"),!1;if(this.changePass_rePassword!==this.changePass_newPassword)return this.$message.error("两次密码不一致"),!1;if(this.changePass_oldPassword===this.changePass_newPassword)return this.$message.error("新旧密码不能一样"),!1;for(var s=i.a.getLS("userAccountList"),e=!1,t="",a=0;a 2 | 3 | 4 | 5 | 6 | vueopenlayers 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vueopenlayers", 3 | "version": "1.0.0", 4 | "description": "use Vue.js & OpenLayers.", 5 | "author": "homxuwang", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "element-ui": "^2.7.2", 14 | "less": "^3.9.0", 15 | "less-loader": "^4.1.0", 16 | "ol": "^5.3.1", 17 | "vue": "^2.5.2", 18 | "vue-router": "^3.0.1", 19 | "vuex": "^3.1.0" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^7.1.2", 23 | "babel-core": "^6.22.1", 24 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-syntax-jsx": "^6.18.0", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-plugin-transform-vue-jsx": "^3.5.0", 29 | "babel-preset-env": "^1.3.2", 30 | "babel-preset-stage-2": "^6.22.0", 31 | "chalk": "^2.0.1", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "extract-text-webpack-plugin": "^3.0.0", 35 | "file-loader": "^1.1.4", 36 | "friendly-errors-webpack-plugin": "^1.6.1", 37 | "html-webpack-plugin": "^2.30.1", 38 | "node-notifier": "^5.1.2", 39 | "optimize-css-assets-webpack-plugin": "^3.2.0", 40 | "ora": "^1.2.0", 41 | "portfinder": "^1.0.13", 42 | "postcss-import": "^11.0.0", 43 | "postcss-loader": "^2.0.8", 44 | "postcss-url": "^7.2.1", 45 | "rimraf": "^2.6.0", 46 | "semver": "^5.3.0", 47 | "shelljs": "^0.7.6", 48 | "uglifyjs-webpack-plugin": "^1.1.1", 49 | "url-loader": "^0.5.8", 50 | "vue-loader": "^13.3.0", 51 | "vue-style-loader": "^3.0.1", 52 | "vue-template-compiler": "^2.5.2", 53 | "webpack": "^3.6.0", 54 | "webpack-bundle-analyzer": "^2.9.0", 55 | "webpack-dev-server": "^2.9.1", 56 | "webpack-merge": "^4.1.0" 57 | }, 58 | "engines": { 59 | "node": ">= 6.0.0", 60 | "npm": ">= 3.0.0" 61 | }, 62 | "browserslist": [ 63 | "> 1%", 64 | "last 2 versions", 65 | "not ie <= 8" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /sh.exe.stackdump: -------------------------------------------------------------------------------- 1 | Stack trace: 2 | Frame Function Args 3 | 001802FC020 0018005CE9E (001802287F0, 0018021AC39, 001802FC020, 000FFFFB9F0) 4 | 001802FC020 00180046559 (00000000002, 00000000003, 00000000002, 000C0000000) 5 | 001802FC020 00180046592 (00000000002, 001802FC330, 001802FC020, 00000000008) 6 | 001802FC020 001800573C2 (00000000000, 000FFFFCC35, 000FFFFCC53, 00180219490) 7 | 000FFFFCCB0 00180057470 (645C655C725C635C, 695C745C6E5C655C, 6D5C2D5C6C5C615C, 675C615C6E5C615C) 8 | 000FFFFCCB0 00180046CF5 (00000000000, 00000000000, 00000000000, 00000000000) 9 | 00000000000 001800457C3 (00000000000, 00000000000, 00000000000, 00000000000) 10 | 000FFFFFFF0 00180045874 (00000000000, 00000000000, 00000000000, 00000000000) 11 | End of stack trace 12 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | 24 | 38 | -------------------------------------------------------------------------------- /src/App.vue.bak: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /src/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/bg.png -------------------------------------------------------------------------------- /src/assets/images/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/header.png -------------------------------------------------------------------------------- /src/assets/images/header_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/header_logo.png -------------------------------------------------------------------------------- /src/assets/images/left-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/left-bg.jpg -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/logo_1.png -------------------------------------------------------------------------------- /src/assets/images/svgs.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/assets/images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/user.png -------------------------------------------------------------------------------- /src/assets/images/wuhan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/assets/images/wuhan.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue.bak: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /src/components/home/components/components/analysis/createBuffer.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 101 | 102 | 106 | -------------------------------------------------------------------------------- /src/components/home/components/components/analysis/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/components/home/components/components/analysis/index.js -------------------------------------------------------------------------------- /src/components/home/components/components/check/clickCheck.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /src/components/home/components/components/check/valueCheck.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /src/components/home/components/components/defaultControl/defaultControl.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 142 | 143 | 147 | -------------------------------------------------------------------------------- /src/components/home/components/components/defaultControl/defaultControlFactory.js: -------------------------------------------------------------------------------- 1 | import ZoomSlider from 'ol/control/ZoomSlider' 2 | import MousePosition from 'ol/control/MousePosition' 3 | import {createStringXY} from 'ol/coordinate' 4 | import ScaleLine from 'ol/control/ScaleLine' 5 | import OverviewMap from 'ol/control/OverviewMap' 6 | import ZoomToExtent from 'ol/control/ZoomToExtent' 7 | 8 | import mapconfig from '@/config/mapconfig.js' 9 | 10 | import { mapGetters } from 'vuex' 11 | //缩放控件 12 | var zoomslider = function() { 13 | return new ZoomSlider(); 14 | } 15 | //鼠标位置控件 16 | var mouseposition = () => new MousePosition({ 17 | coordinateFormat: createStringXY(4), 18 | className: 'mousePositionValue', 19 | target: document.getElementById('mousePosition') 20 | }); 21 | 22 | //比例尺控件 23 | var scaleline = () => new ScaleLine({ 24 | //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位） 25 | units: "metric" 26 | }) 27 | 28 | //鹰眼控件 29 | //参数意义： 30 | // collapsed，收缩选项； 31 | // collapseLabel，收缩后的图标按钮； 32 | // collapsible，是否可以收缩为图标按钮，默认为 true； 33 | // label，当 overviewmapcontrol 收缩为图标按钮时，显示在图标按钮上的文字或者符号，默认为 »； 34 | // layers，overviewmapcontrol针对的图层，默认情况下为所有图层； 35 | // render，当 overviewmapcontrol 重新绘制时，调用的函数； 36 | // target，放置的 HTML 元素； 37 | // tipLabel，鼠标放置在图标按钮上的提示文字。 38 | var overviewmap = () => new OverviewMap({ 39 | className: 'ol-overviewmap ol-custom-overviewmap', 40 | layers: mapconfig.streetmap(0), 41 | collapseLabel: '\u00AB', 42 | //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码） 43 | label: '\u00BB', 44 | //初始为展开显示方式 45 | collapsed: false 46 | }) 47 | 48 | 49 | //导航控件 50 | var zoomtoextent = () => new ZoomToExtent({ 51 | // extent: [113.30144842, 30.5285152, 114.45160558, 30.4366038] 52 | extent: mapconfig.ZoomToExtent_Extent 53 | // extent: [813079.7791264898, 5929220.284081122, 848966.9639063801, 5936863.986909639] 54 | }) 55 | 56 | export default { 57 | zoomslider, 58 | mouseposition, 59 | scaleline, 60 | overviewmap, 61 | zoomtoextent 62 | } -------------------------------------------------------------------------------- /src/components/home/components/components/draw/coordinateDraw.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 284 | 285 | 289 | -------------------------------------------------------------------------------- /src/components/home/components/components/draw/freeDraw.js: -------------------------------------------------------------------------------- 1 | import Draw from 'ol/interaction/Draw.js' 2 | 3 | const freeDrawUtils = { 4 | freeDraw: (source,type) => { 5 | return new Draw({ 6 | source: source, 7 | type: type, 8 | freehand: true 9 | }) 10 | } 11 | } 12 | 13 | 14 | export default freeDrawUtils -------------------------------------------------------------------------------- /src/components/home/components/components/draw/freeDraw.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 79 | 80 | 84 | -------------------------------------------------------------------------------- /src/components/home/components/components/draw/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/src/components/home/components/components/draw/icon.png -------------------------------------------------------------------------------- /src/components/home/components/components/draw/initializationDrawElements.js: -------------------------------------------------------------------------------- 1 | import olFeature from 'ol/Feature' 2 | import olPoint from 'ol/geom/Point' 3 | import olCircle from 'ol/geom/Circle' 4 | import olLineString from 'ol/geom/LineString' 5 | import {fromCircle as fromCircle,fromExtent as fromExtent} from 'ol/geom/Polygon' 6 | import olPolygon from 'ol/geom/Polygon' 7 | //坐标转换 8 | import {transform} from 'ol/proj.js' 9 | import VectorSource from 'ol/source/Vector' 10 | import LayerVector from 'ol/layer/Vector' 11 | //***样式相关 */ 12 | import { Icon,Style,Circle,Fill,Stroke} from 'ol/style.js' 13 | //***样式相关 */ 14 | 15 | 16 | // var wgs84Sphere = new Sphere(6378137); 17 | // var groundRadius = wgs84Sphere.haversineDistance( 18 | // ProjTransforms(center, 'EPSG:3857', 'EPSG:4326'), 19 | // ProjTransforms(edgeCoordinate, 'EPSG:3857', 'EPSG:4326') 20 | // ); 21 | const initializationDrawElements = { 22 | 23 | //根据类型生成要素 24 | FeatureFactory: (featureTpye,coordinate) => { 25 | switch(featureTpye){ 26 | case 'Point':{ 27 | return new olFeature({ 28 | geometry: new olPoint(coordinate) 29 | }) 30 | break; 31 | } 32 | case 'LineString':{ 33 | return new olFeature({ 34 | geometry: new olLineString([coordinate[0],coordinate[1]]) 35 | }) 36 | break; 37 | } 38 | case 'Circle': { 39 | let circleIn3857 = new olCircle(transform(coordinate[0], 'EPSG:4326', 'EPSG:3857'),coordinate[1],'XY'); 40 | let circleIn4326 = circleIn3857.transform('EPSG:3857','EPSG:4326'); 41 | return new olFeature({ 42 | geometry: circleIn4326 43 | }) 44 | break; 45 | } 46 | case 'Square': { 47 | let circleIn3857 = new olCircle(transform(coordinate[0], 'EPSG:4326', 'EPSG:3857'), coordinate[1],'XY'); 48 | let circleIn4326 = circleIn3857.transform('EPSG:3857','EPSG:4326'); 49 | let Square = new fromCircle(circleIn4326,4,150) 50 | // console.log(Square) 51 | return new olFeature({ 52 | geometry: Square 53 | }) 54 | } 55 | case 'Rectangle':{ 56 | let Rectangle = new fromExtent(coordinate) 57 | let ret = null 58 | try{ 59 | ret = new olFeature({ 60 | geometry: Rectangle 61 | }) 62 | return ret; 63 | } 64 | catch(ex){ 65 | this.$message.error(ex) 66 | return; 67 | } 68 | 69 | } 70 | case 'Polygon':{ 71 | let Polygon = new olPolygon([coordinate]) 72 | return new olFeature({ 73 | geometry: Polygon 74 | }) 75 | } 76 | } 77 | }, 78 | 79 | /** 80 | * 根据类型生成样式 81 | * 后面可以封装成一个函数，根据用户的输入生成各种要素的类型 82 | * */ 83 | StyleFactory: (featureTpye) => { 84 | switch(featureTpye) { 85 | case 'Point':{ 86 | return new Style({ 87 | image: new Icon({ 88 | anchor: [0.5, 46], 89 | anchorXUnits: 'fraction', 90 | anchorYUnits: 'pixels', 91 | // src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' 92 | src: require('./icon.png') 93 | }) 94 | }) 95 | } 96 | case 'LineString': { 97 | return new Style({ 98 | //填充色 99 | fill: new Fill({ 100 | color: 'rgba(255, 255, 255, 0.2)' 101 | }), 102 | //边线颜色 103 | stroke: new Stroke({ 104 | color: '#0099FF', 105 | width: 5 106 | }), 107 | //形状 108 | image: new Circle({ 109 | radius: 7, 110 | fill: new Fill({ 111 | color: '#ffcc33' 112 | }) 113 | }) 114 | }) 115 | } 116 | case 'Circle': { 117 | return new Style({ 118 | //填充色 119 | fill: new Fill({ 120 | color: 'rgba(255, 255, 255, 0.5)' 121 | }), 122 | //边线颜色 123 | stroke: new Stroke({ 124 | color: '#0099FF', 125 | width: 6 126 | }), 127 | //形状 128 | image: new Circle({ 129 | radius: 7, 130 | fill: new Fill({ 131 | color: '#ffcc33' 132 | }) 133 | }) 134 | }) 135 | } 136 | case 'Square': { 137 | return new Style({ 138 | //填充色 139 | fill: new Fill({ 140 | color: 'rgba(255, 255, 255, 0.8)' 141 | }), 142 | //边线颜色 143 | stroke: new Stroke({ 144 | color: 'red', 145 | width: 2 146 | }), 147 | //形状 148 | image: new Circle({ 149 | radius: 7, 150 | fill: new Fill({ 151 | color: '#0099FF' 152 | }) 153 | }) 154 | }) 155 | } 156 | case 'Polygon': { 157 | return new Style({ 158 | //填充色 159 | fill: new Fill({ 160 | color: 'rgba(255, 255, 255, 0.8)' 161 | }), 162 | //边线颜色 163 | stroke: new Stroke({ 164 | color: '#0099FF', 165 | width: 2 166 | }), 167 | //形状 168 | image: new Circle({ 169 | radius: 7, 170 | fill: new Fill({ 171 | color: '#0099FF' 172 | }) 173 | }) 174 | }) 175 | } 176 | } 177 | }, 178 | 179 | 180 | 181 | DrawVectorSource : () => {return new VectorSource()}, 182 | 183 | LayerVector:() =>{ return new LayerVector() } 184 | 185 | 186 | } 187 | 188 | 189 | export default initializationDrawElements -------------------------------------------------------------------------------- /src/components/home/components/components/draw/standardDraw.js: -------------------------------------------------------------------------------- 1 | //***画图相关 */ 2 | import {Draw as interactionDraw} from 'ol/interaction.js' 3 | import {createRegularPolygon,createBox} from 'ol/interaction/Draw.js' 4 | import Polygon from 'ol/geom/Polygon' 5 | //***画图相关 */ 6 | 7 | const standardDrawUtils = { 8 | /** 9 | * 绘图控件 10 | */ 11 | interactionDraw: (source,data) => { 12 | return new interactionDraw({ 13 | source: source, 14 | type: data.type, 15 | geometryFunction: data.geometryFunction, 16 | maxPoints: data.maxPoints 17 | }) 18 | }, 19 | 20 | /** 21 | * 画正方形(圆) 22 | */ 23 | createRegularPolygon: createRegularPolygon(4), 24 | /** 25 | * 画矩形 26 | */ 27 | createRectangle: createBox() 28 | 29 | } 30 | 31 | export default standardDrawUtils -------------------------------------------------------------------------------- /src/components/home/components/components/draw/standardDraw.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 81 | 82 | 86 | -------------------------------------------------------------------------------- /src/components/home/components/components/edit/editGeometry.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 44 | 45 | 49 | -------------------------------------------------------------------------------- /src/components/home/components/components/edit/editProperties.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /src/components/home/components/components/edit/index.js: -------------------------------------------------------------------------------- 1 | import {Select,Modify }from 'ol/interaction.js' 2 | import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js' 3 | 4 | const editFunctions = { 5 | //交互选择控件 6 | newSelection: () => {return new Select()}, 7 | //交互编辑控件 8 | newModify: (DrawVectorSource) => { 9 | return new Modify({ 10 | source: DrawVectorSource 11 | }) 12 | } 13 | } 14 | 15 | 16 | export default editFunctions -------------------------------------------------------------------------------- /src/components/home/components/leftBottom.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 45 | 46 | 81 | 99 | 100 | -------------------------------------------------------------------------------- /src/components/home/components/leftTop.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 118 | 119 | 154 | 190 | 191 | -------------------------------------------------------------------------------- /src/components/home/home.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 51 | 52 | 133 | -------------------------------------------------------------------------------- /src/components/login/login.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 271 | 272 | -------------------------------------------------------------------------------- /src/components/map/map-component.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 253 | 254 | 316 | -------------------------------------------------------------------------------- /src/components/map/vectorLayer.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/modules/appBottom.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | 26 | 46 | -------------------------------------------------------------------------------- /src/components/modules/appHeader.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 133 | 134 | 217 | 218 | -------------------------------------------------------------------------------- /src/components/modules/popForConfirm.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 74 | 75 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/components/utils/dateUtil.js: -------------------------------------------------------------------------------- 1 | //日期控件类 2 | /** 3 | * 获取上一个月 4 | */ 5 | let getPreMonth = (date) => { 6 | let arr = date.split('-') 7 | let year = arr[0] //获取当前日期的年份 8 | let month = arr[1] //获取当前日期的月份 9 | let day = arr[2] //获取当然日期的日 10 | 11 | let year2 = year 12 | let month2 = parseInt(month) - 1 13 | if(month2 === 0){ 14 | year2 = parseInt(year) - 1 15 | month = 12 16 | } 17 | 18 | let day2 = day 19 | let days2 = new Date(year2, month2, 0) 20 | days2 = days2.getDate() 21 | if (day2 > days2){ 22 | day2 = days2 23 | } 24 | if( month2 < 10){ 25 | month2 = '0' + month2 26 | } 27 | let time2 = new Array(); 28 | time2.push(year2,month2,day2) 29 | return time2.join('-') 30 | } 31 | 32 | /** 33 | * 获取几天前或几天后 34 | * 如果是几天前要输入负值,如果是几天后要输入正值 35 | */ 36 | let getPerOrNextDays = (date,days) => { 37 | return new Date(date.getTime() + (1000 * 60 * 60 * 24 * days)) 38 | } 39 | 40 | let dateFormater = (inputDate,format) => { 41 | let date = inputDate || new Date() 42 | let o = { 43 | 'M+': date.getMonth() + 1, 44 | 'd+': date.getDate(), 45 | 'h+': date.getHours(), 46 | 'm+': date.getMinutes(), 47 | 's+': date.getSeconds(), 48 | 'q+': Math.floor((date.getMonth() + 3) / 3 ), //quarter 49 | 'S': date.getMilliseconds() 50 | } 51 | if(/(y+)/.test(format)){ 52 | format = format.replace(RegExp.$1,(date.getFullYear() + '' ).substr(4 - RegExp.$1.length)) 53 | } 54 | for(let k in o) { 55 | if(new RegExp('(' + k + ')').test(format)){ 56 | format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)) 57 | } 58 | } 59 | return format 60 | } 61 | 62 | 63 | /** 64 | * 将时间戳转成时间 65 | */ 66 | let formatDateTime = (timeStamp) => { 67 | let date = new Date() 68 | date.setTime(timeStamp) 69 | let y = date.getFullYear() 70 | let m = date.getMonth() + 1 71 | m = m < 10 ? '0' + m : m 72 | let d = date.getDate() 73 | d = d < 10 ? '0' + d : d 74 | let h = date.getHours() 75 | h = h < 10 ? '0' + h : h 76 | let minute = date.getMinutes() 77 | let second = date.getSeconds() 78 | minute = minute < 10 ? '0' + minute : minute 79 | second = second < 10 ? '0' + second : second 80 | 81 | return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second 82 | } 83 | 84 | export { 85 | getPreMonth, 86 | dateFormater, 87 | getPerOrNextDays, 88 | formatDateTime 89 | } -------------------------------------------------------------------------------- /src/components/utils/imagePath.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /** 3 | * 4 | * @param {*} imgName 图片名称 5 | */ 6 | loadImages(imgName) { 7 | //如果不用require()引入，那么就只返回"@/assets/images/imgName.png"字符串, 8 | //因为Vue不知道你是要获取文件路径还是只是返回一个字符串 9 | return require('@/assets/images/'+imgName); 10 | } 11 | } -------------------------------------------------------------------------------- /src/components/utils/localStorage.js: -------------------------------------------------------------------------------- 1 | export default { 2 | //设置kay,value 3 | setLS (LSname, Lsdata) { 4 | window.localStorage.setItem(LSname, JSON.stringify((Lsdata))) 5 | }, 6 | //获取key对应的value 7 | getLS (LSname) { 8 | return (JSON.parse(window.localStorage.getItem(LSname))) 9 | }, 10 | //清除key对应的数据 11 | cleanLS (LSname) { 12 | window.localStorage.removeItem(LSname) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/utils/vectorLayerFactory.js: -------------------------------------------------------------------------------- 1 | import VectorSource from 'ol/source/Vector' 2 | import VectorLayer from 'ol/layer/Vector' 3 | import GeoJSON from 'ol/format/GeoJSON.js' 4 | import mapconfig from '@/config/mapconfig' 5 | const vectorLayerFactory = { 6 | 7 | VectorSource : (url) => { 8 | return new VectorSource({ 9 | url: url, 10 | format: new GeoJSON() 11 | }) 12 | }, 13 | 14 | VectorLayer: (vectorSource) =>{ 15 | return new VectorLayer({ 16 | source: vectorSource 17 | }) 18 | } 19 | 20 | 21 | } 22 | 23 | export default vectorLayerFactory -------------------------------------------------------------------------------- /src/config/mapconfig.js: -------------------------------------------------------------------------------- 1 | import TileLayer from "ol/layer/Tile" 2 | import TileArcGISRest from 'ol/source/TileArcGISRest' 3 | import OSM from "ol/source/OSM" 4 | import XYZ from 'ol/source/XYZ' 5 | 6 | 7 | /** 8 | * 9 | * @param {*} maptype 0表示OSM,1表示使用Arcgis在线午夜蓝地图服务 10 | */ 11 | var streetmap = function(maptype) { 12 | var maplayer = null; 13 | var reNumber = /^[0-9]+.?[0-9]*$/; //数字判断 14 | if (reNumber.test(maptype)){ 15 | switch (maptype){ 16 | case 0: 17 | maplayer = new TileLayer({ 18 | source: new OSM() 19 | }) 20 | break; 21 | case 1: 22 | maplayer = new TileLayer({ 23 | source:new TileArcGISRest({ 24 | url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer' 25 | }) 26 | }) 27 | break; 28 | case 2: 29 | maplayer = new TileLayer({ 30 | source: new OSM({ 31 | 'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg' 32 | }) 33 | }) 34 | break; 35 | } 36 | } 37 | return [maplayer]; 38 | } 39 | 40 | var view = { 41 | x: 114.30, //中心点经度和纬度 42 | y: 30.60, 43 | zoom: 10, //地图缩放级别 44 | streetmap: streetmap 45 | }; 46 | 47 | /** 48 | * 左边栏上半部分 地图图层信息 49 | * name 图层名称 50 | * url 获取图层的链接(static文件的目录要用绝对路径) 51 | */ 52 | var vectorLayers = [ 53 | { 54 | "id": "root", 55 | "label": "图层", 56 | "children": [ 57 | { 58 | "id": "water", 59 | "label": '武汉市区划', 60 | "url": '@/../static/data/whPolygon_geojson.json', 61 | "vectorLayer": null 62 | }, 63 | { 64 | "id": "road", 65 | "label": '武汉市路网', 66 | "url": '@/../static/data/whRoads_geojson.json', 67 | "vectorLayer": null 68 | }, 69 | { 70 | "id": "point", 71 | "label": '武汉市兴趣点', 72 | "url": '@/../static/data/whPoint_geojson.json', 73 | "vectorLayer": null 74 | } 75 | ] 76 | } 77 | ] 78 | /** 79 | * 左边栏上半部分 地图底层信息 80 | * name 图层名称 81 | * url 获取图层的链接 82 | */ 83 | var leftTopBaseLayers = [ 84 | { 85 | "name": 'OSM底图', 86 | "url": 0 87 | }, 88 | { 89 | "name": 'ArcGISChinaOnlineCommunity', 90 | "url": 1 91 | } 92 | ] 93 | 94 | 95 | /** 96 | * 导航控件导航的区域 97 | */ 98 | var ZoomToExtent_Extent = [120.05144842, 30.95285152, 120.25160558, 36.04366038] 99 | 100 | // 后台空间分析接口地址 101 | const localSrc = 'http://localhost:8088/geoanalysis/' 102 | 103 | export default { 104 | view, 105 | vectorLayers, 106 | streetmap, 107 | leftTopBaseLayers, 108 | ZoomToExtent_Extent, 109 | localSrc 110 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | 4 | import Vue from 'vue' 5 | import App from './App' 6 | import router from './router' 7 | import ElementUI from 'element-ui'; 8 | import 'element-ui/lib/theme-chalk/index.css' 9 | import loadImages from './components/utils/imagePath.js' 10 | import VueBus from 'vue-bus' 11 | 12 | import store from './store' 13 | 14 | // import 'animate.css/animate.min.css'; 15 | 16 | Vue.config.productionTip = false 17 | 18 | Vue.use(ElementUI); 19 | Vue.use(VueBus); 20 | //注册全局组件 21 | Vue.prototype.$loadImages = loadImages //获取图片 22 | 23 | //注册全局组件 24 | 25 | /* eslint-disable no-new */ 26 | new Vue({ 27 | el: '#app', 28 | router, 29 | store, 30 | components: { App }, 31 | template: '' 32 | }) 33 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import freeDraw from '@/components/home/components/components/draw/freeDraw.vue' 4 | import standardDraw from '@/components/home/components/components/draw/standardDraw.vue' 5 | import coordinateDraw from '@/components/home/components/components/draw/coordinateDraw' 6 | import clickCheck from '@/components/home/components/components/check/clickCheck' 7 | import valueCheck from '@/components/home/components/components/check/valueCheck' 8 | import editGeometry from '@/components/home/components/components/edit/editGeometry' 9 | import editProperties from '@/components/home/components/components/edit/editProperties' 10 | import createBuffer from '@/components/home/components/components/analysis/createBuffer' 11 | 12 | import defaultControl from '@/components/home/components/components/defaultControl/defaultControl' 13 | Vue.use(Router) 14 | 15 | export default new Router({ 16 | // mode: 'history', //如果使用history模式,会直接使用 主机名:端口名/路由 的模式,在gitpage上无法使用 17 | routes: [ 18 | { 19 | path: '/', 20 | redirect: '/login' 21 | }, 22 | { 23 | path: '/home', 24 | name: 'home', 25 | meta: { 26 | index: 0, 27 | keepAlive: true, 28 | title: '主窗口' 29 | }, 30 | children: [ 31 | { 32 | path: 'freeDraw', 33 | component: freeDraw 34 | }, 35 | { 36 | path: 'standardDraw', 37 | component: standardDraw 38 | }, 39 | { 40 | path: 'coordinateDraw', 41 | component: coordinateDraw 42 | }, 43 | { 44 | path: 'clickCheck', 45 | component: clickCheck 46 | }, 47 | { 48 | path: 'valueCheck', 49 | component: valueCheck 50 | }, 51 | { 52 | path: 'defaultControl', 53 | component: defaultControl 54 | }, 55 | { 56 | path: 'editGeometry', 57 | component: editGeometry 58 | }, 59 | { 60 | path: 'editProperties', 61 | component: editProperties 62 | }, 63 | { 64 | path: 'createBuffer', 65 | component: createBuffer 66 | } 67 | ], 68 | component: resolve => require(['@/components/home/home'], resolve) 69 | }, 70 | { 71 | path: '/login', 72 | name: 'login', 73 | meta: { 74 | index: 0, 75 | keepAlive: true, 76 | title: '登陆' 77 | }, 78 | component: resolve => require(['@/components/login/login'], resolve) 79 | }, 80 | { 81 | path: '*', 82 | redirect: '/' 83 | } 84 | ] 85 | }) 86 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | const actions = { 2 | 3 | } 4 | 5 | 6 | export default actions -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | const getters = {//实时监听state值的变化(最新状态) 2 | //获取地图底图 3 | layers : state => state.baseLayer, 4 | //获取地图中心 5 | center : state => state.center, 6 | //***************地图控件相关*********************/ 7 | 8 | //获取地图默认控件总函数(后期修改) 9 | getDefaultControl: (state,getters) => (ControlName) => state[ControlName], 10 | //获取地图默认控件显示状态总函数(后期修改) 11 | getDefaultControlShowState: (state,getters) => (ControlShowStateName) => state[ControlShowStateName], 12 | // //获取地图缩放控件 13 | // getZoomSlider : state => state.ZoomSlider, 14 | // //地图缩放控件显示状态 15 | isShowZoomSlider : state => state.isShowZoomSlider, 16 | 17 | // //获取鼠标位置控件 18 | // getMousePosition : state => state.MousePosition, 19 | // //获取鼠标位置显示状态 20 | isShowMousePosition : state => state.isShowMousePosition, 21 | 22 | // //获取比例尺控件 23 | // getScaleLine: state => state.ScaleLine, 24 | // //获取比例尺控件显示状态 25 | isShowScaleLine: state => state.isShowScaleLine, 26 | 27 | // //获取鹰眼控件 28 | // getOverviewMap: state => state.OverviewMap, 29 | // //获取鹰眼控件显示状态 30 | isShowOverviewMap: state => state.isShowOverviewMap, 31 | 32 | // //获取地图导航控件 33 | // getZoomToExtent: state => state.ZoomToExtent, 34 | // //获取地图导航控件显示状态 35 | isShowZoomToExtent: state => state.isShowZoomToExtent, 36 | //***************地图控件相关*********************/ 37 | 38 | //***************地图绘图相关*********************/ 39 | 40 | getDrawVectorSource: state => state.DrawVectorSource, 41 | 42 | getLayerVector: state => state.LayerVector, 43 | 44 | getFeature: (state,featureName) => state[featureName], 45 | 46 | getPointFeature: state => state.PointFeature, 47 | 48 | getLineStringFeature: state => state.LineStringFeature, 49 | 50 | getPolygonFeature: state => state.PolygonFeature, 51 | 52 | getCircleFeature: state => state.CircleFeature, 53 | 54 | getSquareFeature: state => state.SquareFeature, 55 | 56 | getRectangleFeature: state => state.RectangleFeature, 57 | //***************地图绘图相关*********************/ 58 | }; 59 | 60 | export default getters -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import getters from './getters' 4 | import actions from './actions' 5 | import mutations from './mutations' 6 | import state from './state' 7 | 8 | import { Map, View } from 'ol'; 9 | 10 | Vue.use(Vuex) 11 | 12 | const debug = process.env.NODE_ENV !== 'production' 13 | 14 | 15 | const store = new Vuex.Store({ 16 | state, 17 | mutations, 18 | actions, 19 | getters 20 | }); 21 | 22 | 23 | export default store -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import mapconfig from '@/config/mapconfig.js' 2 | import state from './state' 3 | 4 | 5 | const mutations = { 6 | //修改地图底图 7 | changeBaseLayer : (state,index) => state.baseLayer = mapconfig.streetmap(index), 8 | //修改地图中心 9 | changeCenter : (state,value) => state.center = value, 10 | //***************地图控件相关*********************/ 11 | 12 | //添加控件总函数(后期改进) 13 | addDefaultControl : (state,DefaultControlObj) => { 14 | //添加对应的控件 15 | state[DefaultControlObj.ControlType] = DefaultControlObj.DefaultControl 16 | let ifShow = 'isShow' + DefaultControlObj.ControlType 17 | //更改对应的显示状态 18 | state[ifShow] = true 19 | }, 20 | 21 | //删除控件总函数(后期改进) 22 | removeDefaultControl: (state,DefaultControName) => { 23 | state[DefaultControName] = false 24 | }, 25 | 26 | //销毁控件总函数(后期修改) 27 | destoryDefaultControl: (state,DefaultControName) => { 28 | state[DefaultControName] = null 29 | }, 30 | 31 | //缩放控件 32 | addZoomSlider : (state,ZoomSlider) => { 33 | //添加缩放控件 34 | state.ZoomSlider = ZoomSlider 35 | //添加时修改地图缩放控件显示状态为true 36 | state.isShowZoomSlider = true 37 | }, 38 | //从屏幕上删除地图缩放控件 39 | removeZoomSlider: state => { 40 | //此时仅修改地图缩放控件的显示状态为false,因为map页面还需要该zoomslider对象，以在地图中对其进行删除 41 | //真实的删除地图控件操作交给map页面由commit调用destoryZoomSlider进行 42 | state.isShowZoomSlider = false 43 | }, 44 | //销毁地图缩放控件 45 | destoryZoomSlider: state => { 46 | //销毁当前state中的zoomslider 47 | state.ZoomSlider = null 48 | }, 49 | 50 | //鼠标控件 51 | //添加鼠标位置控件 52 | addMousePosition : (state,MousePosition) => { 53 | state.MousePosition = MousePosition 54 | state.isShowMousePosition = true 55 | }, 56 | //从屏幕上删除鼠标位置控件 57 | removeMousePosition: state => state.isShowMousePosition = false, 58 | //销毁鼠标位置控件 59 | destoryMousePosition: state => state.MousePosition = null, 60 | 61 | //比例尺控件 62 | //添加比例尺控件 63 | addScaleLine: (state,ScaleLine) => { 64 | state.ScaleLine = ScaleLine 65 | state.isShowScaleLine = true 66 | }, 67 | //从屏幕上删除比例尺控件 68 | removeScaleLine: state => state.isShowScaleLine = false, 69 | //销毁比例尺控件 70 | destoryScaleLine: state => state.ScaleLine = null, 71 | 72 | //鹰眼控件 73 | //添加鹰眼控件 74 | addOverviewMap: (state,OverviewMap) => { 75 | state.OverviewMap = OverviewMap 76 | state.isShowOverviewMap = true 77 | }, 78 | //从屏幕上删除鹰眼控件 79 | removeOverviewMap: state => state.isShowOverviewMap = false, 80 | //销毁鹰眼控件 81 | destoryOverviewMap: state => state.OverviewMap = null, 82 | 83 | //地图导航控件 84 | //添加地图导航控件 85 | addZoomToExtent: (state,ZoomToExtent) => { 86 | state.ZoomToExtent = ZoomToExtent 87 | state.isShowZoomToExtent = true 88 | }, 89 | //从屏幕上删除地图导航控件 90 | removeZoomToExtent: state => state.isShowZoomToExtent = false, 91 | //销毁地图导航控件 92 | destoryZoomToExtent: state => state.ZoomToExtent = null, 93 | 94 | //***************地图控件相关*********************/ 95 | 96 | //***************地图绘图相关*********************/ 97 | //添加显示vector的图层 98 | addLayerVector: (state,LayerVector) => state.LayerVector = LayerVector, 99 | //添加绘制层 100 | addDrawVectorSource: (state,DrawVectorSource) => state.DrawVectorSource = DrawVectorSource, 101 | //添加要素,第二个参数为自定义要素对象， 102 | //FeatureType属性为要素类型 103 | //PointFeature、PolygonFeature等为要添加的要素类 104 | addFeature: (state,FeatureObjs) => { 105 | state[FeatureObjs.FeatureType] = FeatureObjs.PointFeature 106 | }, 107 | 108 | //添加各种要素的函数 109 | addPointFeature: (state,PointFeature) => state.PointFeature = PointFeature, 110 | 111 | addLineStringFeature: (state,LineStringFeature) => state.LineStringFeature = LineStringFeature, 112 | 113 | addPolygonFeature: (state,PolygonFeature) => state.PolygonFeature = PolygonFeature, 114 | 115 | addCircleFeature: (state,CircleFeature) => state.CircleFeature = CircleFeature, 116 | 117 | addSquareFeature: (state,SquareFeature) => state.SquareFeature = SquareFeature, 118 | 119 | addRectangleFeature: (state,RectangleFeature) => state.RectangleFeature = RectangleFeature, 120 | 121 | //***************地图绘图相关*********************/ 122 | } 123 | 124 | export default mutations -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | import mapconfig from '@/config/mapconfig.js' 2 | 3 | const state = { 4 | //地图底图 5 | baseLayer: mapconfig.streetmap(0), 6 | center: [mapconfig.view.x, mapconfig.view.y], 7 | //***************地图控件相关*********************/ 8 | //缩放控件 9 | ZoomSlider: null, 10 | //地图缩放控件显示状态 11 | isShowZoomSlider: false, 12 | //地图鼠标位置控件 13 | MousePosition: null, 14 | //地图鼠标位置控件显示状态 15 | isShowMousePosition: false, 16 | //地图比例尺控件 17 | ScaleLine: null, 18 | //地图比例尺控件显示状态 19 | isShowScaleLine: false, 20 | //地图鹰眼控件 21 | OverviewMap: null, 22 | //地图鹰眼控件显示状态 23 | isShowOverviewMap: false, 24 | //地图导航控件 25 | ZoomToExtent: null, 26 | //地图导航控件显示状态 27 | isShowZoomToExtent: false, 28 | //***************地图控件相关*********************/ 29 | 30 | //***************地图绘图相关*********************/ 31 | 32 | //绘图的显示图层 33 | LayerVector: null, 34 | //绘图的绘制图层 35 | DrawVectorSource: null, 36 | //绘图的点要素 37 | PointFeature: null, 38 | //绘图的线要素 39 | LineStringFeature: null, 40 | //绘图的普通多边形要素 41 | PolygonFeature: null, 42 | //绘图的圆要素 43 | CircleFeature: null, 44 | //绘图的正方形要素 45 | SquareFeature: null, 46 | //绘图的长方形要素 47 | RectangleFeature: null, 48 | 49 | //***************地图绘图相关*********************/ 50 | }; 51 | 52 | export default state -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/homxuwang/OpenLayersInVue/96eacc47dc89c26fa978316fc7ce5d68766998ff/static/.gitkeep -------------------------------------------------------------------------------- /static/config.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "userAccount":[ 4 | { 5 | "name":"admin", 6 | "password":"123" 7 | }, 8 | { 9 | "name":"user", 10 | "password":"123" 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /static/json/drawType.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": [ 3 | { 4 | "value": "None", 5 | "label": "无" 6 | }, 7 | { 8 | "value": "Point", 9 | "label": "点" 10 | }, 11 | { 12 | "value": "LineString", 13 | "label": "线" 14 | }, 15 | { 16 | "value": "Polygon", 17 | "label": "多边形" 18 | }, 19 | { 20 | "value": "Circle", 21 | "label": "圆" 22 | }, 23 | { 24 | "value": "Square", 25 | "label": "正方形" 26 | }, 27 | { 28 | "value": "Rectangle", 29 | "label": "长方形" 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /static/json/options.json: -------------------------------------------------------------------------------- 1 | { 2 | "options": [ 3 | { 4 | "id": "defaultControl", 5 | "label": "地图控件", 6 | "path": "defaultControl" 7 | }, 8 | { 9 | "id": "draw", 10 | "label": "绘图功能", 11 | "path": "coordinateDraw", 12 | "children": [ 13 | { 14 | "id": "addByCoordinates", 15 | "label": "坐标添加", 16 | "path": "coordinateDraw" 17 | }, 18 | { 19 | "id": "addByStandardDraw", 20 | "label": "绘制标准图形", 21 | "path": "standardDraw" 22 | }, 23 | { 24 | "id": "addByFreeDraw", 25 | "label": "自由绘图", 26 | "path": "freeDraw" 27 | } 28 | ] 29 | }, 30 | { 31 | "id": "edit", 32 | "label": "编辑功能", 33 | "path": "editGeometry", 34 | "children": [ 35 | { 36 | "id": "editGeometry", 37 | "label": "编辑图形", 38 | "path": "editGeometry" 39 | }, 40 | { 41 | "id": "editProperties", 42 | "label": "编辑属性", 43 | "path": "editProperties" 44 | } 45 | ] 46 | }, 47 | { 48 | "id": "search", 49 | "label": "查询功能", 50 | "path": "clickCheck", 51 | "children": [ 52 | { 53 | "id": "searchByClick", 54 | "label": "点击查询", 55 | "path": "clickCheck" 56 | },{ 57 | "id": "searchByValue", 58 | "label": "关键字查询", 59 | "path": "valueCheck" 60 | } 61 | ] 62 | }, 63 | { 64 | "id": "analysis", 65 | "label": "空间分析", 66 | "path": "createBuffer", 67 | "children": [ 68 | { 69 | "id": "createBuffer", 70 | "label": "生成缓冲区", 71 | "path": "createBuffer" 72 | } 73 | ] 74 | } 75 | ] 76 | } --------------------------------------------------------------------------------