<%= htmlWebpackPlugin.options.title %>

├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── hot.gif ├── logo.png └── mark.png ├── components ├── MapCircle.vue ├── MapIconMark.vue ├── MapLineString.vue ├── MapOverlay.vue ├── MapPointCollection.vue ├── MapPolygon.vue └── MapPopup.vue ├── main.js ├── mapconfig.js ├── router └── index.js └── views └── Home.vue /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-unused-vars': 'off' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # openlayer + vue 2 | 3 | ## 效果展示 4 | 5 | See ![效果展示.jpg](https://upload-images.jianshu.io/upload_images/24062394-81004090b212b22f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 6 | 7 | ## Project setup 8 | ``` 9 | npm install 10 | ``` 11 | 12 | ### Compiles and hot-reloads for development 13 | ``` 14 | npm run serve 15 | ``` 16 | 17 | ### Compiles and minifies for production 18 | ``` 19 | npm run build 20 | ``` 21 | 22 | ### Lints and fixes files 23 | ``` 24 | npm run lint 25 | ``` 26 | 27 | ### Customize configuration 28 | See [Configuration Reference](https://cli.vuejs.org/config/). 29 | 30 | ### 使用 31 | ``` 32 | 60 | 93 | ``` 94 | 95 | ### 点标注（MapIconMark） 96 | ``` 97 | 98 | /** 99 | * position // 标注点的位置 array [lng, lat] 100 | * label // 标注点的标签 string | null ，非必须，默认 null， 101 | * icon // 标注点的图标 string(url) | 如果只要标签名称就设置成一个像素的透明图标, 必须 102 | * elmentName // 通过feature.get('name') 方法可以获得该叠加图层，非必须，默认 'el-mapIconMark' 103 | * className // 设置class名称，非必须，默认 'map-icon-mark' 104 | * zIndex // 图层z轴高度，非必须，默认 800 105 | */ 106 | 107 | ``` 108 | ### 折线（MapLineString） 109 | ``` 110 | 111 | /** 112 | * pointList // 组成线的点列表数组 array [[lng, lat],...] 113 | * lineColor // 线条颜色 String，非必须，默认为 '#409eff' 114 | * lineWidth // 线条宽度 Number，非必须，默认为 2 115 | * lineDash // 虚线 Array[number]，是否使用虚线，默认为 null 116 | * className // 图层的class String，非必须，默认 "map-line-string" 117 | * zIndex // 图层z轴高度，非必须，默认 300 118 | * elmentName // 通过feature.get('name') 方法可以获得该叠加图层 119 | */ 120 | 121 | ``` 122 | ### 多边形（MapPolygon） 123 | ``` 124 | 125 | /** 126 | * pointList // 组成多边形的点列表数组 array [[lng, lat],...] 127 | * fillColor // 多边形填充颜色，非必须，默认为 'rgba(0,0,0,0.8)' 128 | * elementName // 多边形识别名称 String, 非必须，默认为 'el-mapPolygon' 129 | * lineColor // 多边形线条颜色 String，非必须，默认为 '#409eff' 130 | * lineWidth // 多边形线条宽度 Number，非必须，默认为 2 131 | * lineDash // 多边形虚线 Array[number], 是否使用虚线，默认为 null 132 | * className // 图层的class String, 非必须，默认为 'map-polygon' 133 | */ 134 | 135 | ``` 136 | ### 圆形（MapCircle） 137 | ``` 138 | 139 | /** 140 | * position // 圆中心点 Array，必须 141 | * radius // 圆半径 number ，默认为 100 142 | * fillColor // 圆形填充颜色，非必须，默认为 'rgba(255,255,255,0.5)' 143 | * elementName // 圆形识别名称 String, 非必须，默认为 'el-mapCircle' 144 | * lineColor // 圆形线条颜色 String，非必须，默认为 '#409eff' 145 | * lineWidth // 圆形线条宽度 Number，非必须，默认为 2 146 | * lineDash // 圆形虚线 Array[number], 是否使用虚线，默认为 null 147 | * className // 图层的class String, 非必须，默认为 'map-circle' 148 | */ 149 | 150 | ``` 151 | ### 自定义覆盖物（MapOverlay） 152 | ``` 153 |

154 | /** 155 | * position // 标注中心点 Array, 必须 156 | * className // 设置自定义图层的class String ，非必须，默认 'map-overlay' 157 | * offset // 设置自定义图层的偏移量 Array[number] ，非必须,默认[0, 0] 158 | */ 159 | 160 | ``` 161 | ### 弹出窗体（MapPopup） 162 | ``` 163 | {{ popupText }} 164 | /** 165 | * position // 弹窗中心点 Array[array]，必须 166 | * title // 弹窗标题 String，非必须，默认为 ' ' 167 | * mapShow // 弹窗显隐 Boolean，必须，默认为 true 168 | * offset // 弹窗偏移 Array[number]，必须，默认为 [0, 0] 169 | * className // 图层的class String，非必须，默认为 'map-popup' 170 | * close() // 弹窗关闭事件 171 | */ 172 | 173 | ``` 174 | ### 海量点（MapPointCollection） 175 | ``` 176 | 177 | /** 178 | * pointlist // 组成多边形的点列表数组 array [[lng, lat],...] 179 | * distance // 收起点的间距 number，必须，默认为 40 180 | * zIndex // 图层z轴高度，非必须，默认 400 181 | * offset // 文字偏移距离 [x,y]，非必须，默认 [0,0] 182 | * fontColor // 文字的颜色 string （色彩标识，支持rgba），默认'#fff'(如果去掉文字那么直接rgba透明度设置为0) 183 | * fillColor // 文字的背景颜色 string（色彩标识，支持rgba），默认'#f00'(如果去不要背景颜色那么直接rgba透明度设置为0) 184 | * bgImg // 设置背景图，如果设置了此那么文字背景可以不设置 185 | */ 186 | 187 | ``` -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "openlayer", 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": "^3.6.5", 12 | "ol": "^6.4.3", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^4.5.0", 18 | "@vue/cli-plugin-eslint": "^4.5.0", 19 | "@vue/cli-plugin-router": "^4.5.0", 20 | "@vue/cli-service": "^4.5.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^6.2.2", 24 | "sass": "^1.26.5", 25 | "sass-loader": "^8.0.2", 26 | "vue-template-compiler": "^2.6.11" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zmannnnn/openlayers/a46edb730fb985ea32797099f43d228810fc45a5/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | -------------------------------------------------------------------------------- /src/assets/hot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zmannnnn/openlayers/a46edb730fb985ea32797099f43d228810fc45a5/src/assets/hot.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zmannnnn/openlayers/a46edb730fb985ea32797099f43d228810fc45a5/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zmannnnn/openlayers/a46edb730fb985ea32797099f43d228810fc45a5/src/assets/mark.png -------------------------------------------------------------------------------- /src/components/MapCircle.vue: -------------------------------------------------------------------------------- 1 | 134 | -------------------------------------------------------------------------------- /src/components/MapIconMark.vue: -------------------------------------------------------------------------------- 1 | 125 | -------------------------------------------------------------------------------- /src/components/MapLineString.vue: -------------------------------------------------------------------------------- 1 | 115 | 116 | 118 | -------------------------------------------------------------------------------- /src/components/MapOverlay.vue: -------------------------------------------------------------------------------- 1 | 8 | 65 | 66 | 68 | -------------------------------------------------------------------------------- /src/components/MapPointCollection.vue: -------------------------------------------------------------------------------- 1 | 167 | 168 | 170 | -------------------------------------------------------------------------------- /src/components/MapPolygon.vue: -------------------------------------------------------------------------------- 1 | 125 | 126 | 128 | -------------------------------------------------------------------------------- /src/components/MapPopup.vue: -------------------------------------------------------------------------------- 1 | 10 | 89 | 90 | 142 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /src/mapconfig.js: -------------------------------------------------------------------------------- 1 | import TileLayer from 'ol/layer/Tile' 2 | import { OSM, XYZ, TileArcGISRest } from 'ol/source' 3 | const maptype = 2 4 | // 0 表示部署的离线瓦片地图，1表示OSM, 2表示使用Arcgis在线午夜蓝地图服务 5 | const streetmap = function() { 6 | let maplayer = null 7 | switch(maptype) { 8 | case 0: 9 | maplayer = new TileLayer({ 10 | source: new XYZ({ 11 | url:'http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg' 12 | }) 13 | }) 14 | break 15 | case 1: 16 | maplayer = new TileLayer({ 17 | source: new OSM() 18 | }) 19 | break 20 | case 2: 21 | maplayer = new TileLayer({ 22 | source:new TileArcGISRest({ 23 | url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer' 24 | }) 25 | }) 26 | break 27 | } 28 | return [ maplayer ] 29 | } 30 | const mapconfig = { 31 | streetmap: streetmap 32 | } 33 | export default mapconfig -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home 12 | } 13 | ] 14 | 15 | const router = new VueRouter({ 16 | mode: 'history', 17 | base: process.env.BASE_URL, 18 | routes 19 | }) 20 | 21 | export default router 22 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 29 | 230 | 251 | --------------------------------------------------------------------------------

{{ title || ' ' }}