xy-map 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.browserslistrc +3 -0
- package/.eslintrc.js +29 -0
- package/README.md +24 -1
- package/babel.config.js +3 -0
- package/jsconfig.json +12 -0
- package/lint-staged.config.js +3 -0
- package/package.json +42 -17
- package/public/favicon.ico +0 -0
- package/public/index.html +21 -0
- package/src/App.vue +13 -0
- package/{compontents → src/components}/detail-dialog.vue +0 -0
- package/{image → src/image}/arrow_white.png +0 -0
- package/{image → src/image}/map_end.png +0 -0
- package/{image → src/image}/map_start.png +0 -0
- package/{image → src/image}/marker.png +0 -0
- package/src/index.js +85 -0
- package/{layers → src/layers}/Line.js +0 -0
- package/{layers → src/layers}/Point.js +0 -0
- package/{layers → src/layers}/Polygon.js +0 -0
- package/{layers → src/layers}/Text.js +0 -0
- package/{layers → src/layers}/index.js +0 -0
- package/src/main.js +12 -0
- package/{map.js → src/map.js} +0 -0
- package/src/router/index.js +19 -0
- package/src/store/index.js +12 -0
- package/{style → src/style}/hoverHtml.css +0 -0
- package/src/style/main.scss +185 -0
- package/{style → src/style}/map.css +0 -0
- package/{util → src/util}/mapEvent.js +0 -0
- package/{util → src/util}/mapHoverHtml.js +10 -5
- package/{util → src/util}/mapTools.js +0 -0
- package/{util → src/util}/measure-area.js +0 -0
- package/{util → src/util}/measure-distance.js +0 -0
- package/src/views/home.vue +69 -0
- package/vue.config.js +31 -0
package/.browserslistrc
ADDED
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
root: true,
|
|
3
|
+
env: {
|
|
4
|
+
node: true,
|
|
5
|
+
},
|
|
6
|
+
extends: [
|
|
7
|
+
'plugin:vue/essential',
|
|
8
|
+
'eslint:recommended',
|
|
9
|
+
// 'plugin:prettier/recommended',
|
|
10
|
+
],
|
|
11
|
+
parserOptions: {
|
|
12
|
+
// parser: "@babel/eslint-parser",
|
|
13
|
+
},
|
|
14
|
+
rules: {
|
|
15
|
+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 禁止 console，上线时要去掉
|
|
16
|
+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 禁止 debugger，上线时要去掉
|
|
17
|
+
'no-alert': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 禁止 alert，上线时要去掉
|
|
18
|
+
indent: [0, 2], // 缩进为2,tab缩进
|
|
19
|
+
semi: [2, 'never'], // 代码结尾处不需要添加分号;
|
|
20
|
+
quotes: [2, 'single'], // 强制使用一致的反勾号、双引号或单引号
|
|
21
|
+
// 'default-case': 2, // switch 语句必须包含 default
|
|
22
|
+
// 'consistent-this': [2, 'self'], // this 的别名规则，只允许 self
|
|
23
|
+
'no-unused-vars': 'off',
|
|
24
|
+
'no-undef': 0,
|
|
25
|
+
'no-useless-escape': 0,
|
|
26
|
+
'vue/comment-directive': 0,
|
|
27
|
+
'vue/multi-word-component-names': 0,
|
|
28
|
+
},
|
|
29
|
+
}
|
package/README.md
CHANGED
|
@@ -1 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
# vue2-project
|
|
2
|
+
|
|
3
|
+
## Project setup
|
|
4
|
+
```
|
|
5
|
+
npm install
|
|
6
|
+
```
|
|
7
|
+
|
|
8
|
+
### Compiles and hot-reloads for development
|
|
9
|
+
```
|
|
10
|
+
npm run serve
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Compiles and minifies for production
|
|
14
|
+
```
|
|
15
|
+
npm run build
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Lints and fixes files
|
|
19
|
+
```
|
|
20
|
+
npm run lint
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Customize configuration
|
|
24
|
+
See [Configuration Reference](https://cli.vuejs.org/config/).
|
package/babel.config.js
ADDED
package/jsconfig.json
ADDED
package/package.json
CHANGED
|
@@ -1,17 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "xy-map",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "地图组件",
|
|
5
|
-
"main": "
|
|
6
|
-
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"dependencies": {
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "xy-map",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "地图组件",
|
|
5
|
+
"main": "src/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "npm run serve",
|
|
8
|
+
"serve": "vue-cli-service serve",
|
|
9
|
+
"build": "vue-cli-service build",
|
|
10
|
+
"lint": "vue-cli-service lint",
|
|
11
|
+
"publish": "npm publish"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"core-js": "^3.8.3",
|
|
15
|
+
"vue": "^2.6.14",
|
|
16
|
+
"vue-router": "^3.5.1",
|
|
17
|
+
"vuex": "^3.6.2",
|
|
18
|
+
"mapbox-gl": "^2.10.0",
|
|
19
|
+
"@turf/turf": "^6.5.0"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@babel/core": "^7.12.16",
|
|
23
|
+
"@babel/eslint-parser": "^7.12.16",
|
|
24
|
+
"@vue/cli-plugin-babel": "~5.0.0",
|
|
25
|
+
"@vue/cli-plugin-eslint": "~5.0.0",
|
|
26
|
+
"@vue/cli-plugin-router": "~5.0.0",
|
|
27
|
+
"@vue/cli-plugin-vuex": "~5.0.0",
|
|
28
|
+
"@vue/cli-service": "~5.0.0",
|
|
29
|
+
"eslint": "^7.32.0",
|
|
30
|
+
"eslint-config-prettier": "^8.3.0",
|
|
31
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
32
|
+
"eslint-plugin-vue": "^8.0.3",
|
|
33
|
+
"lint-staged": "^11.1.2",
|
|
34
|
+
"prettier": "^2.4.1",
|
|
35
|
+
"sass": "^1.32.7",
|
|
36
|
+
"sass-loader": "^12.0.0",
|
|
37
|
+
"vue-template-compiler": "^2.6.14"
|
|
38
|
+
},
|
|
39
|
+
"gitHooks": {
|
|
40
|
+
"pre-commit": "lint-staged"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
8
|
+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
9
|
+
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<noscript>
|
|
14
|
+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
|
15
|
+
Please enable it to continue.</strong>
|
|
16
|
+
</noscript>
|
|
17
|
+
<div id="app"></div>
|
|
18
|
+
<!-- built files will be auto injected -->
|
|
19
|
+
</body>
|
|
20
|
+
|
|
21
|
+
</html>
|
package/src/App.vue
ADDED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/src/index.js
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import mapSdk from './map.js'
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
showLayerText,
|
|
5
|
+
setSource,
|
|
6
|
+
showLayer,
|
|
7
|
+
hasLayer
|
|
8
|
+
} from './layers/index.js'
|
|
9
|
+
|
|
10
|
+
import {
|
|
11
|
+
addLayerLine
|
|
12
|
+
} from './layers/Line.js'
|
|
13
|
+
|
|
14
|
+
import {
|
|
15
|
+
addLayerPoint,
|
|
16
|
+
addLayerImagePoint,
|
|
17
|
+
} from './layers/Point.js'
|
|
18
|
+
|
|
19
|
+
import {
|
|
20
|
+
addLayerPolygon
|
|
21
|
+
} from './layers/Polygon.js'
|
|
22
|
+
|
|
23
|
+
import {
|
|
24
|
+
toGeoJson,
|
|
25
|
+
ranging,
|
|
26
|
+
drawArea,
|
|
27
|
+
clearDraw,
|
|
28
|
+
distance,
|
|
29
|
+
lineCenter,
|
|
30
|
+
polygonCenter,
|
|
31
|
+
} from './util/mapTools.js'
|
|
32
|
+
|
|
33
|
+
import {
|
|
34
|
+
mapHover,
|
|
35
|
+
mapClick,
|
|
36
|
+
changeMapCursor,
|
|
37
|
+
} from './util/mapEvent.js'
|
|
38
|
+
|
|
39
|
+
import {
|
|
40
|
+
mapHoverHtml
|
|
41
|
+
} from './util/mapHoverHtml'
|
|
42
|
+
|
|
43
|
+
// 图层操作
|
|
44
|
+
const mapLayers = {
|
|
45
|
+
showLayerText,
|
|
46
|
+
setSource,
|
|
47
|
+
showLayer,
|
|
48
|
+
hasLayer,
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// 绘制
|
|
52
|
+
const mapDraw = {
|
|
53
|
+
addLayerLine,
|
|
54
|
+
addLayerPoint,
|
|
55
|
+
addLayerImagePoint,
|
|
56
|
+
addLayerPolygon
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// 地图工具
|
|
60
|
+
const mapTools = {
|
|
61
|
+
toGeoJson,
|
|
62
|
+
ranging,
|
|
63
|
+
drawArea,
|
|
64
|
+
clearDraw,
|
|
65
|
+
distance,
|
|
66
|
+
lineCenter,
|
|
67
|
+
polygonCenter,
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// 地图事件
|
|
71
|
+
const mapEvent = {
|
|
72
|
+
mapHover,
|
|
73
|
+
mapClick,
|
|
74
|
+
changeMapCursor,
|
|
75
|
+
mapHoverHtml
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
export {
|
|
80
|
+
mapSdk,
|
|
81
|
+
mapLayers,
|
|
82
|
+
mapDraw,
|
|
83
|
+
mapTools,
|
|
84
|
+
mapEvent
|
|
85
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/src/main.js
ADDED
package/{map.js → src/map.js}
RENAMED
|
File without changes
|
|
@@ -0,0 +1,19 @@
|
|
|
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
|
+
path: '/',
|
|
9
|
+
name: 'home',
|
|
10
|
+
component: Home,
|
|
11
|
+
}]
|
|
12
|
+
|
|
13
|
+
const router = new VueRouter({
|
|
14
|
+
mode: 'history',
|
|
15
|
+
base: process.env.BASE_URL,
|
|
16
|
+
routes,
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
export default router
|
|
File without changes
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0 }
|
|
2
|
+
body, button, input, select, textarea { font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;color: #333; -ms-overflow-style: scrollbar }
|
|
3
|
+
button, input, select, textarea { font-size: 100% }
|
|
4
|
+
a { color: #333; text-decoration: none;outline: 0 }
|
|
5
|
+
table { border-collapse: collapse; border-spacing: 0 }
|
|
6
|
+
fieldset, img, area, a { border: 0; outline: 0 }
|
|
7
|
+
address, caption, cite, code, dfn, em, th, var, i { font-style: normal; font-weight: normal }
|
|
8
|
+
code, kbd, pre, samp { font-family: courier new, courier, monospace }
|
|
9
|
+
ol, ul { list-style: none }
|
|
10
|
+
body { background: #fff;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
|
11
|
+
body, html { width: 100%; height: 100%; }
|
|
12
|
+
small { font-size: 12px }
|
|
13
|
+
h1, h2, h3, h4, h5, h6 { font-size: 100% }
|
|
14
|
+
sup { vertical-align: text-top }
|
|
15
|
+
sub { vertical-align: text-bottom }
|
|
16
|
+
legend { color: #000 }
|
|
17
|
+
a, input { -webkit-tap-highlight-color: rgba(0,0,0,0); }
|
|
18
|
+
div{ -webkit-overflow-scrolling: touch; }
|
|
19
|
+
input, textarea, button, select { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background:none; outline:none; }
|
|
20
|
+
input[type='checkbox'] { -webkit-appearance: checkbox; }
|
|
21
|
+
iframe{border: none; width: 100%;}
|
|
22
|
+
|
|
23
|
+
@media screen and (max-device-width: 828px) {
|
|
24
|
+
body { -webkit-text-size-adjust: none; }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/****************flexbox**************/
|
|
28
|
+
.flex {display:flex;}
|
|
29
|
+
.inline-flex {display:inline-flex;}
|
|
30
|
+
.flex-center{justify-content: center;align-items: center;}
|
|
31
|
+
.flex-center-between{justify-content: space-between;align-items: center;}
|
|
32
|
+
/*横向或纵向*/
|
|
33
|
+
.flex-row {flex-direction:row;}
|
|
34
|
+
.flex-col {flex-direction:column;}
|
|
35
|
+
.flex-row-reverse {flex-direction:row-reverse;}
|
|
36
|
+
.flex-col-reverse {flex-direction:column-reverse;}
|
|
37
|
+
.flex-wrap {flex-wrap:wrap;}
|
|
38
|
+
/*主轴对齐方式*/
|
|
39
|
+
.flex-justify-start {justify-content: flex-start;}
|
|
40
|
+
.flex-justify-end {justify-content:flex-end;}
|
|
41
|
+
.flex-justify-center {justify-content:center;}
|
|
42
|
+
.flex-justify-between {justify-content:space-between;}
|
|
43
|
+
.flex-justify-around {justify-content:space-around;}
|
|
44
|
+
/*侧轴对齐方式*/
|
|
45
|
+
.flex-align-start {align-items:flex-start;}
|
|
46
|
+
.flex-align-end {align-items:flex-end;}
|
|
47
|
+
.flex-align-center {align-items:center;}
|
|
48
|
+
.flex-align-baseline {align-items:baseline;}
|
|
49
|
+
.flex-align-stretch {align-items:stretch;}
|
|
50
|
+
/*主轴换行时行在侧轴的对齐方式，必须定义flex-wrap为换行*/
|
|
51
|
+
.flex-content-start {align-content:flex-start;}
|
|
52
|
+
.flex-content-end {align-content:flex-end;}
|
|
53
|
+
.flex-content-center {align-content:center;}
|
|
54
|
+
.flex-content-between {align-content:space-between;}
|
|
55
|
+
.flex-content-around {align-content:space-around;}
|
|
56
|
+
.flex-content-stretch {align-content:stretch;}
|
|
57
|
+
/*允许子元素收缩*/
|
|
58
|
+
.flex-child-grow {flex-grow: 1;}/*允许拉伸*/
|
|
59
|
+
.flex-child-shrink {flex-shrink: 1;}/*允许收缩*/
|
|
60
|
+
.flex-child-noshrink {flex-shrink: 0;}/*不允许收缩*/
|
|
61
|
+
.flex-child-average {flex:1;}/*平均分布，兼容旧版必须给宽度*/
|
|
62
|
+
.flex-child-first {order: 1;}/*排第一个*/
|
|
63
|
+
/*子元素在侧轴的对齐方式*/
|
|
64
|
+
.flex-child-align-start {align-self:flex-start;}
|
|
65
|
+
.flex-child-align-end {align-self:flex-end;}
|
|
66
|
+
.flex-child-align-center {align-self:center;}
|
|
67
|
+
.flex-child-align-baseline {align-self:baseline;}
|
|
68
|
+
.flex-child-align-stretch {align-self:stretch;}
|
|
69
|
+
|
|
70
|
+
.wrapper { opacity: 0.9 }
|
|
71
|
+
.rem-wrap { width: 10rem; margin: 0 auto; position: relative; display: block; }
|
|
72
|
+
.block { display: block; }
|
|
73
|
+
.inline-block { display: inline-block; }
|
|
74
|
+
.inline { display: inline; }
|
|
75
|
+
.hide { display: none; }
|
|
76
|
+
.full-height{height:100%;}
|
|
77
|
+
.full-width{width:100%;}
|
|
78
|
+
.relative { position: relative; }
|
|
79
|
+
.absolute { position: absolute; }
|
|
80
|
+
.fixed { position: fixed; }
|
|
81
|
+
.clear { clear: both; }
|
|
82
|
+
.overflow-hide { overflow: hidden; }
|
|
83
|
+
.normal { font-weight: normal; }
|
|
84
|
+
.bold { font-weight: bold; }
|
|
85
|
+
.radius { border-radius: 5px; }
|
|
86
|
+
.font-34 { font-size: 34px; }
|
|
87
|
+
.font-30 { font-size: 30px; }
|
|
88
|
+
.font-24 { font-size: 24px; }
|
|
89
|
+
.font-20 { font-size: 20px; }
|
|
90
|
+
.font-18 { font-size: 18px; }
|
|
91
|
+
.font-16 { font-size: 16px; }
|
|
92
|
+
.font-15 { font-size: 15px; }
|
|
93
|
+
.font-14 { font-size: 14px; }
|
|
94
|
+
.font-13 { font-size: 13px; }
|
|
95
|
+
.font-12 { font-size: 12px; }
|
|
96
|
+
.border-box{box-sizing: border-box;}
|
|
97
|
+
.img-cover{object-fit: cover}
|
|
98
|
+
.border { border: 1px solid #ebebeb; }
|
|
99
|
+
.border-top { border-top: 1px solid #ebebeb; }
|
|
100
|
+
.border-bottom { border-bottom: 1px solid #ebebeb; }
|
|
101
|
+
.border-left { border-left: 1px solid #ebebeb; }
|
|
102
|
+
.border-right { border-right: 1px solid #ebebeb; }
|
|
103
|
+
.margin { margin: 10px; }
|
|
104
|
+
.margin-top { margin-top: 10px; }
|
|
105
|
+
.margin-right { margin-right: 10px; }
|
|
106
|
+
.margin-bottom { margin-bottom: 10px; }
|
|
107
|
+
.margin-left { margin-left: 10px; }
|
|
108
|
+
.mt-5 { margin-top: 5px; }
|
|
109
|
+
.mr-5 { margin-right: 5px; }
|
|
110
|
+
.mb-5 { margin-bottom: 5px; }
|
|
111
|
+
.ml-5 { margin-left: 5px; }
|
|
112
|
+
.mt-15 { margin-top: 15px; }
|
|
113
|
+
.mr-15 { margin-right: 15px; }
|
|
114
|
+
.mb-15 { margin-bottom: 15px; }
|
|
115
|
+
.ml-15 { margin-left: 15px; }
|
|
116
|
+
.mt-20 { margin-top: 20px; }
|
|
117
|
+
.mr-20 { margin-right: 20px; }
|
|
118
|
+
.mb-20 { margin-bottom: 20px; }
|
|
119
|
+
.ml-20 { margin-left: 20px; }
|
|
120
|
+
.padding { padding: 10px; }
|
|
121
|
+
.padding-top { padding-top: 10px; }
|
|
122
|
+
.padding-right { padding-right: 10px; }
|
|
123
|
+
.padding-bottom { padding-bottom: 10px; }
|
|
124
|
+
.padding-left { padding-left: 10px; }
|
|
125
|
+
.text-center { text-align: center; }
|
|
126
|
+
.text-right { text-align: right; }
|
|
127
|
+
.pointer{cursor: pointer;}
|
|
128
|
+
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
129
|
+
.nowrap { word-wrap: normal; white-space: nowrap; }
|
|
130
|
+
.lines-height-2{line-height: 2;}
|
|
131
|
+
.lines-height-15{line-height: 1.5;}
|
|
132
|
+
.lines-1{text-overflow:ellipsis;-webkit-line-clamp:1;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;}
|
|
133
|
+
.lines-2{text-overflow:ellipsis;-webkit-line-clamp:2;display: -webkit-box;overflow:hidden;-webkit-box-orient: vertical;word-break: break-all;}
|
|
134
|
+
.row2 { word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
|
|
135
|
+
|
|
136
|
+
/*颜色*/
|
|
137
|
+
.main-color, a.main-color { color: #409EFF; } /*主色*/
|
|
138
|
+
.main-bgcolor { background-color: #409EFF; }
|
|
139
|
+
.assist-color, a.assist-color{color:#78b} /*辅助色*/
|
|
140
|
+
.assist-bgcolor { background-color: #78b; }
|
|
141
|
+
.orange, a.orange { color: #ff6700; }
|
|
142
|
+
.orange-bg { background-color: #ff6700; }
|
|
143
|
+
.grey, a.grey { color: #505050; }
|
|
144
|
+
.grey-bg { background-color: #505050; }
|
|
145
|
+
.grey-6, a.grey-6 { color: #6b6b6b; }
|
|
146
|
+
.grey-6-bg { background-color: #6b6b6b; }
|
|
147
|
+
.grey-9, a.grey-9 { color: #9c9c9c; }
|
|
148
|
+
.grey-9-bg { background-color: #9c9c9c; }
|
|
149
|
+
.grey-d, a.grey-d { color: #dfdfdf; }
|
|
150
|
+
.grey-d-bg { background-color: #dfdfdf; }
|
|
151
|
+
.grey-e, a.grey-e { color: #efefef; }
|
|
152
|
+
.grey-e-bg { background-color: #efefef; }
|
|
153
|
+
.grey-f, a.grey-f { color: #f5f5f5; }
|
|
154
|
+
.grey-f-bg { background-color: #f5f5f5; }
|
|
155
|
+
.black, a.black { color: #333; }
|
|
156
|
+
.black-bg { background-color: #333; }
|
|
157
|
+
.white, a.white { color: #fff; }
|
|
158
|
+
.white-bg { background-color: #fff; }
|
|
159
|
+
.red, a.red { color: #e12e2e; }
|
|
160
|
+
.red-bg { background-color: #e12e2e; }
|
|
161
|
+
.light-red, a.light-red { color: #ff5050; }
|
|
162
|
+
.light-red-bg { background-color: #ff5050; }
|
|
163
|
+
.orange-red, a.orange-red { color: #ff4e00; }
|
|
164
|
+
.orange-red-bg { background-color: #ff4e00; }
|
|
165
|
+
.yellow, a.yellow { color: #fbcb30; }
|
|
166
|
+
.yellow-bg { background-color: #fbcb30; }
|
|
167
|
+
.orange, a.orange { color: #ff6700; }
|
|
168
|
+
.orange-bg { background-color: #ff6700; }
|
|
169
|
+
.orange-yellow, a.orange-yellow { color: #fd9712; }
|
|
170
|
+
.orange-yellow-bg { background-color: #fd9712; }
|
|
171
|
+
.green, a.green { color: #5dc800; }
|
|
172
|
+
.green-bg { background-color: #5dc800; }
|
|
173
|
+
.green-text, a.green-text { color: #008000; }
|
|
174
|
+
.light-green, a.light-green { color: #8fd14c; }
|
|
175
|
+
.light-green-bg { background-color: #8fd14c; }
|
|
176
|
+
.blue, a.blue { color: #3caaff; }
|
|
177
|
+
.blue-bg { background-color: #3caaff; }
|
|
178
|
+
.light-blue, a.light-blue { color: #7597dc; }
|
|
179
|
+
.light-blue-bg { background-color: #7597dc; }
|
|
180
|
+
.pink, a.pink { color: #fb5c9b; }
|
|
181
|
+
.pink-bg { background-color: #fb5c9b; }
|
|
182
|
+
.purple, a.purple { color: #a776d9; }
|
|
183
|
+
.purple-bg { background-color: #a776d9; }
|
|
184
|
+
.light-purple, a.light-purple { color: #b394f3; }
|
|
185
|
+
.light-purple-bg { background-color: #b394f3; }
|
|
File without changes
|
|
File without changes
|
|
@@ -34,11 +34,12 @@ export const mapHoverHtml = (arr, e, beforeHtml, afterHtml) => {
|
|
|
34
34
|
let html = ''
|
|
35
35
|
let content = []
|
|
36
36
|
if (beforeHtml) html += beforeHtml
|
|
37
|
-
arr.forEach(item => {
|
|
37
|
+
arr.forEach((item) => {
|
|
38
38
|
let label = item.label || ''
|
|
39
|
-
let value = data[item.key]
|
|
39
|
+
let value = data[item.key]
|
|
40
|
+
value = (value || value === 0) ? value : '-'
|
|
40
41
|
if (item.dicData && item.dicData.length > 0) {
|
|
41
|
-
value = item.dicData.find(f => f.value == data[item.key]).label || '-'
|
|
42
|
+
value = item.dicData.find((f) => f.value == data[item.key]).label || '-'
|
|
42
43
|
}
|
|
43
44
|
// 是否有后缀
|
|
44
45
|
if (item.suffixText) value += item.suffixText
|
|
@@ -47,8 +48,12 @@ export const mapHoverHtml = (arr, e, beforeHtml, afterHtml) => {
|
|
|
47
48
|
<span class="value ${item.customValueClass || ''}">${value}</span>
|
|
48
49
|
</p>`)
|
|
49
50
|
})
|
|
50
|
-
content.map(m => html += m)
|
|
51
|
+
content.map((m) => (html += m))
|
|
51
52
|
if (afterHtml) html += afterHtml
|
|
52
|
-
mapSdk.addPopup(
|
|
53
|
+
mapSdk.addPopup(
|
|
54
|
+
[e.properties.lgtd, e.properties.lttd],
|
|
55
|
+
`<div class="xy-hover-html line-height-2">${html}</div>`
|
|
56
|
+
)
|
|
53
57
|
}
|
|
54
58
|
|
|
59
|
+
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="full-height relative overflow"
|
|
3
|
+
ref="full_el">
|
|
4
|
+
<div id="map"
|
|
5
|
+
class="full-height"></div>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
import { mapSdk, mapLayers, mapDraw, mapTools, mapEvent } from '../index.js'
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
data () {
|
|
14
|
+
return {
|
|
15
|
+
config: {
|
|
16
|
+
accessToken: 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2t4NzAxZzdvMDZ5MTJ2azN0NzBqZGt0bCJ9.cRDXTquac05DVKJ5wc854w',
|
|
17
|
+
container: 'map',
|
|
18
|
+
zoom: 2,
|
|
19
|
+
minZoom: 2,
|
|
20
|
+
center: [102.83643451528434, 24.81972792178513],
|
|
21
|
+
pitch: 0, // 3d倾斜视角
|
|
22
|
+
bearing: 0, // 旋转
|
|
23
|
+
pitchWithRotate: true, // 禁止绕x轴旋转 false禁止
|
|
24
|
+
terrain: true, // 开启地形
|
|
25
|
+
interactive: true, // 是否开始鼠标平移
|
|
26
|
+
fog: true, // 开启雾
|
|
27
|
+
build: false, // 显示建筑
|
|
28
|
+
// night: true, // 晚上
|
|
29
|
+
projection: 'globe',
|
|
30
|
+
style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'
|
|
31
|
+
},
|
|
32
|
+
view3D: true
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
mounted () {
|
|
36
|
+
this.screenEl = this.$refs.full_el
|
|
37
|
+
this.init()
|
|
38
|
+
},
|
|
39
|
+
methods: {
|
|
40
|
+
fullScreen (isfullScreen) {
|
|
41
|
+
this.barheight = isfullScreen ? 10 : 120
|
|
42
|
+
},
|
|
43
|
+
init () {
|
|
44
|
+
let { initMap, drawCityBorder } = mapSdk
|
|
45
|
+
initMap(this.config).then(map => {
|
|
46
|
+
this.map = map
|
|
47
|
+
this.flyHome().then(() => {
|
|
48
|
+
map.setMinZoom(10)
|
|
49
|
+
})
|
|
50
|
+
})
|
|
51
|
+
},
|
|
52
|
+
flyHome (duration = 3000) {
|
|
53
|
+
return new Promise((resolve) => {
|
|
54
|
+
this.view3D = true
|
|
55
|
+
mapSdk.flyTo({
|
|
56
|
+
center: this.config.center,
|
|
57
|
+
duration: duration, // Animate over 12 seconds
|
|
58
|
+
pitch: 53.5,
|
|
59
|
+
zoom: 11.2,
|
|
60
|
+
bearing: 14.8,
|
|
61
|
+
}).then(() => {
|
|
62
|
+
mapSdk.pitchWithRotate(true)
|
|
63
|
+
resolve(true)
|
|
64
|
+
})
|
|
65
|
+
})
|
|
66
|
+
},
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
</script>
|
package/vue.config.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
const {
|
|
2
|
+
defineConfig
|
|
3
|
+
} = require('@vue/cli-service')
|
|
4
|
+
|
|
5
|
+
module.exports = defineConfig({
|
|
6
|
+
publicPath: '/',
|
|
7
|
+
lintOnSave: true,
|
|
8
|
+
productionSourceMap: false,
|
|
9
|
+
transpileDependencies: true,
|
|
10
|
+
|
|
11
|
+
// 前端代理服务器
|
|
12
|
+
devServer: {
|
|
13
|
+
host: 'localhost',
|
|
14
|
+
port: 8888,
|
|
15
|
+
open: true,
|
|
16
|
+
proxy: {
|
|
17
|
+
// proxyon为代理前缀，如果请求中包含该前缀，就走代理
|
|
18
|
+
'/api': {
|
|
19
|
+
// 真实的后端服务器地址
|
|
20
|
+
target: 'https://www.ynmdgq.com/api',
|
|
21
|
+
ws: true,
|
|
22
|
+
// 控制请求头中的host
|
|
23
|
+
changeOrigin: true,
|
|
24
|
+
// 将代理前缀名称替换为后端的真实前缀名称
|
|
25
|
+
pathRewrite: {
|
|
26
|
+
'^/api': ''
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
})
|