├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── README.md ├── babel.config.js ├── deploy.sh ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html └── lib │ └── lodash.min.js ├── src ├── App.vue ├── assets │ ├── logo.png │ └── styles │ │ ├── icon.scss │ │ ├── index.scss │ │ └── reset.scss ├── components │ ├── HelloWorld.vue │ ├── edit-style-dialog │ │ └── edit-style-dialog.vue │ ├── info-window │ │ └── info-window.vue │ └── style-setting │ │ └── style-setting.vue ├── main.js └── utils │ └── index.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/standard'], 7 | rules: { 8 | // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 9 | // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 10 | }, 11 | parserOptions: { 12 | parser: 'babel-eslint' 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | node_js: 4 | - "8.11.0" 5 | before_install: 6 | - chmod +x deploy.sh 7 | script: 8 | - ./deploy.sh 9 | branch: master 10 | cache: 11 | directories: 12 | - node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-openlayers 2 | 3 | 基于vue+高德贴图+openlayers简单实现一个地图区域划分。 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Run your tests 21 | ``` 22 | npm run test 23 | ``` 24 | 25 | ### Lints and fixes files 26 | ``` 27 | npm run lint 28 | ``` 29 | 30 | ### Customize configuration 31 | See [Configuration Reference](https://cli.vuejs.org/config/). 32 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | npm run build 2 | cd dist 3 | git init 4 | git add -A 5 | git commit -m 'deploy' 6 | git config --local user.name "liub1934" 7 | git config --local user.email "liub1934@gmail.com" 8 | git push -f https://${access_token}@github.com/liub1934/vue-openlayers.git master:gh-pages -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-openlayers", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "ol": "^5.3.3", 13 | "element-ui": "^2.10.0", 14 | "good-storage": "^1.1.0", 15 | "vue": "^2.6.10" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.10.0", 19 | "@vue/cli-plugin-eslint": "^3.10.0", 20 | "@vue/cli-service": "^3.10.0", 21 | "@vue/eslint-config-standard": "^4.0.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "vue-template-compiler": "^2.6.10", 26 | "node-sass": "^4.12.0", 27 | "sass-loader": "^7.1.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liub1934/vue-openlayers/ecf6e0f81ba4952f7ac218e093ea8ff3be895fd3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-openlayers 10 | 11 | 12 | 13 | 14 | 15 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/lib/lodash.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Minified by jsDelivr using UglifyJS v3.3.20. 3 | * Original file: /npm/lodash@3.10.1/index.js 4 | * 5 | * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files 6 | */ 7 | (function(){var vu,n,t,_u="3.10.1",gu=1,yu=2,du=4,wu=8,mu=16,xu=32,bu=64,Au=128,ju=256,ku=30,Iu="...",Ru=150,Ou=16,Eu=200,Cu=1,Uu=2,$u="Expected a function",Su="__lodash_placeholder__",Wu="[object Arguments]",Fu="[object Array]",Nu="[object Boolean]",Tu="[object Date]",Lu="[object Error]",Bu="[object Function]",r="[object Map]",zu="[object Number]",Du="[object Object]",qu="[object RegExp]",e="[object Set]",Mu="[object String]",u="[object WeakMap]",Pu="[object ArrayBuffer]",Ku="[object Float32Array]",Vu="[object Float64Array]",Yu="[object Int8Array]",Gu="[object Int16Array]",Ju="[object Int32Array]",Xu="[object Uint8Array]",Zu="[object Uint8ClampedArray]",Hu="[object Uint16Array]",Qu="[object Uint32Array]",ni=/\b__p \+= '';/g,ti=/\b(__p \+=) '' \+/g,ri=/(__e\(.*?\)|\b__t\)) \+\n'';/g,ei=/&(?:amp|lt|gt|quot|#39|#96);/g,ui=/[&<>"'`]/g,ii=RegExp(ei.source),oi=RegExp(ui.source),fi=/<%-([\s\S]+?)%>/g,ai=/<%([\s\S]+?)%>/g,ci=/<%=([\s\S]+?)%>/g,li=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\n\\]|\\.)*?\1)\]/,si=/^\w*$/,pi=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\n\\]|\\.)*?)\2)\]/g,hi=/^[:!,]|[\\^$.*+?()[\]{}|\/]|(^[0-9a-fA-Fnrtuvx])|([\n\r\u2028\u2029])/g,vi=RegExp(hi.source),_i=/[\u0300-\u036f\ufe20-\ufe23]/g,gi=/\\(\\)?/g,yi=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,di=/\w*$/,wi=/^0[xX]/,mi=/^\[object .+?Constructor\]$/,xi=/^\d+$/,bi=/[\xc0-\xd6\xd8-\xde\xdf-\xf6\xf8-\xff]/g,Ai=/($^)/,ji=/['\n\r\u2028\u2029\\]/g,ki=(n="[A-Z\\xc0-\\xd6\\xd8-\\xde]",t="[a-z\\xdf-\\xf6\\xf8-\\xff]+",RegExp(n+"+(?="+n+t+")|"+n+"?"+t+"|"+n+"+|[0-9]+","g")),Ii=["Array","ArrayBuffer","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Math","Number","Object","RegExp","Set","String","_","clearTimeout","isFinite","parseFloat","parseInt","setTimeout","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap"],Ri=-1,Oi={};Oi[Ku]=Oi[Vu]=Oi[Yu]=Oi[Gu]=Oi[Ju]=Oi[Xu]=Oi[Zu]=Oi[Hu]=Oi[Qu]=!0,Oi[Wu]=Oi[Fu]=Oi[Pu]=Oi[Nu]=Oi[Tu]=Oi[Lu]=Oi[Bu]=Oi[r]=Oi[zu]=Oi[Du]=Oi[qu]=Oi[e]=Oi[Mu]=Oi[u]=!1;var Ei={};Ei[Wu]=Ei[Fu]=Ei[Pu]=Ei[Nu]=Ei[Tu]=Ei[Ku]=Ei[Vu]=Ei[Yu]=Ei[Gu]=Ei[Ju]=Ei[zu]=Ei[Du]=Ei[qu]=Ei[Mu]=Ei[Xu]=Ei[Zu]=Ei[Hu]=Ei[Qu]=!0,Ei[Lu]=Ei[Bu]=Ei[r]=Ei[e]=Ei[u]=!1;var i={"À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","Ç":"C","ç":"c","Ð":"D","ð":"d","È":"E","É":"E","Ê":"E","Ë":"E","è":"e","é":"e","ê":"e","ë":"e","Ì":"I","Í":"I","Î":"I","Ï":"I","ì":"i","í":"i","î":"i","ï":"i","Ñ":"N","ñ":"n","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","Ù":"U","Ú":"U","Û":"U","Ü":"U","ù":"u","ú":"u","û":"u","ü":"u","Ý":"Y","ý":"y","ÿ":"y","Æ":"Ae","æ":"ae","Þ":"Th","þ":"th","ß":"ss"},o={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},f={"&":"&","<":"<",">":">",""":'"',"'":"'","`":"`"},a={function:!0,object:!0},c={0:"x30",1:"x31",2:"x32",3:"x33",4:"x34",5:"x35",6:"x36",7:"x37",8:"x38",9:"x39",A:"x41",B:"x42",C:"x43",D:"x44",E:"x45",F:"x46",a:"x61",b:"x62",c:"x63",d:"x64",e:"x65",f:"x66",n:"x6e",r:"x72",t:"x74",u:"x75",v:"x76",x:"x78"},l={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},s=a[typeof exports]&&exports&&!exports.nodeType&&exports,p=a[typeof module]&&module&&!module.nodeType&&module,h=s&&p&&"object"==typeof global&&global&&global.Object&&global,v=a[typeof self]&&self&&self.Object&&self,_=a[typeof window]&&window&&window.Object&&window,g=p&&p.exports===s&&s,Ci=h||_!==(this&&this.window)&&_||v||this;function Ui(n,t){if(n!==t){var r=null===n,e=n===vu,u=n==n,i=null===t,o=t===vu,f=t==t;if(t>>1,Y=9007199254740991,G=C&&new C,J={};function X(n){if(Pi(n)&&!le(n)&&!(n instanceof Q)){if(n instanceof H)return n;if(m.call(n,"__chain__")&&m.call(n,"__wrapped__"))return nr(n)}return new H(n)}function Z(){}function H(n,t,r){this.__wrapped__=n,this.__actions__=r||[],this.__chain__=!!t}X.support={};function Q(n){this.__wrapped__=n,this.__actions__=[],this.__dir__=1,this.__filtered__=!1,this.__iteratees__=[],this.__takeCount__=M,this.__views__=[]}function nn(){this.__data__={}}function tn(n){var t=n?n.length:0;for(this.data={hash:$(null),set:new k};t--;)this.push(n[t])}function rn(n,t){var r=n.data;return("string"==typeof t||ve(t)?r.set.has(t):r.hash[t])?0:-1}function en(n,t){var r=-1,e=n.length;for(t||(t=E(e));++r=Eu?at(t):null,a=t.length;f&&(i=rn,o=!1,t=f);n:for(;++u>>0,t>>>=0;for(var i=E(u);++e>>1,o=n[i];(r?o<=t:o=Eu)return u.plant(t).value();for(var r=0,e=i?o[r].apply(this,n):t;++r=Ru)return n}else Yt=0;return Mn(n,t)});function Xt(n){for(var t=Ne(n),r=t.length,e=r&&n.length,u=!!e&&Mt(e)&&(le(n)||ce(n)),i=-1,o=[];++i>>0,r>>>=0;r=L(t,r)&&n=(n=Fi(n)).length)return n;var o=e-u.length;if(o<1)return u;var f=n.slice(0,o);if(null==i)return f+u;if(de(i)){if(n.slice(o).search(i)){var a,c,l=n.slice(0,o);for(i.global||(i=d(i.source,(di.exec(i)||"")+"g")),i.lastIndex=0;a=i.exec(l);)c=a.index;f=f.slice(0,null==c?o:c)}}else if(n.indexOf(i,o)!=o){var s=f.lastIndexOf(i);-1 2 |
3 | 4 |
5 | 6 | 7 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liub1934/vue-openlayers/ecf6e0f81ba4952f7ac218e093ea8ff3be895fd3/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/styles/icon.scss: -------------------------------------------------------------------------------- 1 | [class^="icon-"], 2 | [class*=" icon-"] { 3 | /* use !important to prevent issues with browser extensions that change fonts */ 4 | font-family: 'iconfont' !important; 5 | speak: none; 6 | font-style: normal; 7 | font-weight: normal; 8 | font-variant: normal; 9 | text-transform: none; 10 | line-height: 1; 11 | 12 | /* Better Font Rendering =========== */ 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | } -------------------------------------------------------------------------------- /src/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./reset.scss"; 2 | @import "./icon.scss"; -------------------------------------------------------------------------------- /src/assets/styles/reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | 95 | body, 96 | html { 97 | width: 100%; 98 | height: 100%; 99 | } 100 | 101 | /* HTML5 display-role reset for older browsers */ 102 | article, 103 | aside, 104 | details, 105 | figcaption, 106 | figure, 107 | footer, 108 | header, 109 | hgroup, 110 | menu, 111 | nav, 112 | section { 113 | display: block; 114 | } 115 | 116 | body { 117 | line-height: 1; 118 | } 119 | 120 | ol, 121 | ul { 122 | list-style: none; 123 | } 124 | 125 | blockquote, 126 | q { 127 | quotes: none; 128 | } 129 | 130 | a { 131 | -webkit-backface-visibility: hidden; 132 | text-decoration: none; 133 | } 134 | 135 | blockquote:before, 136 | blockquote:after, 137 | q:before, 138 | q:after { 139 | content: ''; 140 | content: none; 141 | } 142 | 143 | table { 144 | border-collapse: collapse; 145 | border-spacing: 0; 146 | } -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 120 | 121 | 671 | 672 | 787 | -------------------------------------------------------------------------------- /src/components/edit-style-dialog/edit-style-dialog.vue: -------------------------------------------------------------------------------- 1 | 91 | 92 | 160 | 161 | 225 | -------------------------------------------------------------------------------- /src/components/info-window/info-window.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 61 | 111 | -------------------------------------------------------------------------------- /src/components/style-setting/style-setting.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 112 | 190 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | // 加载样式 5 | import './assets/styles/index.scss' 6 | 7 | import Element from 'element-ui' 8 | import 'element-ui/lib/theme-chalk/index.css' 9 | 10 | Vue.use(Element, { 11 | size: 'small' 12 | }) 13 | 14 | Vue.config.productionTip = false 15 | 16 | new Vue({ 17 | render: h => h(App) 18 | }).$mount('#app') 19 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 动态加载高德地图 3 | * 4 | * @export 5 | * @param {*} key 高德地图key 6 | * @param {*} plugins 高德地图插件 7 | * @param {string} [v='1.4.14'] 高德地图版本 8 | * @returns 9 | */ 10 | export function loadMap (key, plugins, v = '1.4.14') { 11 | return new Promise(function (resolve, reject) { 12 | if (typeof AMap !== 'undefined') { 13 | // eslint-disable-next-line no-undef 14 | resolve(AMap) 15 | return true 16 | } 17 | window.onCallback = function () { 18 | // eslint-disable-next-line no-undef 19 | resolve(AMap) 20 | } 21 | let script = document.createElement('script') 22 | script.type = 'text/javascript' 23 | script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback` 24 | script.onerror = reject 25 | document.head.appendChild(script) 26 | }) 27 | } 28 | 29 | /** 30 | * HEX十六进制颜色颜色转RGBA 31 | * 32 | * @export 33 | * @param {*} hex HEX颜色 34 | * @param {number} [trans=1] 透明度 35 | * @returns 36 | */ 37 | export function hexToRgba (hex, trans = 1) { 38 | let hexColor = /^#/.test(hex) ? hex.slice(1) : hex 39 | let r 40 | let g 41 | let b 42 | hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff' 43 | if (hexColor.length === 3) { 44 | hexColor = hexColor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3') 45 | } 46 | r = hexColor.slice(0, 2) 47 | g = hexColor.slice(2, 4) 48 | b = hexColor.slice(4, 6) 49 | r = parseInt(r, 16) 50 | g = parseInt(g, 16) 51 | b = parseInt(b, 16) 52 | return `rgba(${r}, ${g}, ${b}, ${trans})` 53 | } 54 | 55 | /** 56 | * 生成uid 57 | * 58 | * @export 59 | * @returns 60 | */ 61 | export function uid () { 62 | function s4 () { 63 | return Math.floor((1 + Math.random()) * 0x10000) 64 | .toString(16) 65 | .substring(1) 66 | } 67 | return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}` 68 | } 69 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? '/vue-openlayers/' : '/' 3 | } 4 | --------------------------------------------------------------------------------