# 八.geo
# 1.json 方案
中国地图：使用json数据渲染中国地图，带南海诸岛
查看代码详情
<template>
<WebMap :config="getOptions" :data="data" @changeData="getData"> </WebMap>
</template>
<script>
export default {
data() {
return {
data: [],
};
},
created() {
this.getData(5);
},
methods: {
async getData(url) {
let res = await this.$api.getMap(url);
if (res.data) {
this.data = res.data.map((item) => ({ ...item, value: item.descript }));
}
},
getOptions(data) {
return {
title: {
text: "中国地图",
subtext: "单位：元",
},
geo: {
roam: true,
map: "china",
zoom: 1,
scaleLimit: {
min: 1,
max: 20,
},
...{
// 普通样式
label: {
show: true,
color: "rgba(130,143,200,1)",
},
itemStyle: {
show: true,
borderWidth: 1,
borderColor: "rgba(196,207,254,1)",
areaColor: "rgba(229,236,249,1)",
},
},
emphasis: {
// hover样式
label: {
show: true,
color: "rgba(130,143,200,1)",
},
itemStyle: {
borderColor: "rgba(196,207,254,1)",
borderWidth: 1,
areaColor: "rgba(229,236,249,1)",
},
},
...{
// 选中样式
selectedMode: "single",
select: {
label: {
color: "rgba(255,255,255,1)",
},
itemStyle: {
areaColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(66,99,232,1)" },
{ offset: 1, color: "rgba(55,183,249,1)" },
],
},
},
},
regions: [
{
name: "南海诸岛",
...{
// 普通样式
label: {
show: true,
color: "rgba(130,143,200,1)",
},
itemStyle: {
show: true,
borderWidth: 1,
borderColor: "rgba(196,207,254,1)",
areaColor: "rgba(229,236,249,1)",
},
},
emphasis: {
// hover样式
label: {
show: true,
color: "rgba(130,143,200,1)",
},
itemStyle: {
borderColor: "rgba(196,207,254,1)",
borderWidth: 1,
areaColor: "rgba(229,236,249,1)",
},
},
},
...data.map((item) => {
return {
...item,
label: {
color: "re96cc34d",
},
itemStyle: {
areaColor: "#96cc34",
},
};
}),
],
},
},
};
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
# 2.svg 方案
中国地图
查看代码详情
<template>
<WebMapConfig
:data="data"
:params="params"
@mapBeforeMount="mapBeforeMount"
></WebMapConfig>
</template>
<script>
export default {
data() {
return {
data: [],
params: {
type: "china",
registerName: "svgmap",
options: {
title: {
text: "旅游导航",
subtext: "时间/详情",
},
},
},
};
},
created() {
this.getData(1);
},
methods: {
mapBeforeMount(echarts) {
echarts.registerMap("svgmap", this.$zhongguosvg);
},
async getData(url) {
let res = await this.$api.getMap(url);
if (res.data) {
this.data = Object.freeze(
res.data.map((item) => ({
...item,
filter: "1",
value: [item.latitude, item.longitude],
}))
);
}
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
中国地图二
查看代码详情
<template>
<WebMapConfig
:data="data"
:params="params"
@mapBeforeMount="mapBeforeMount"
></WebMapConfig>
</template>
<script>
export default {
data() {
return {
data: [],
params: {
type: "china",
registerName: "svgmap",
options: {
title: {
text: "svg地图",
subtext: "时间/详情",
},
},
},
};
},
created() {
this.getData(1);
},
methods: {
mapBeforeMount(echarts) {
echarts.registerMap("svgmap", this.$zhongguosvg2);
},
async getData(url) {
let res = await this.$api.getMap(url);
if (res.data) {
this.data = Object.freeze(
res.data.map((item) => ({
...item,
filter: "2",
value: [item.latitude, item.longitude],
}))
);
}
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
省级地图
查看代码详情
<template>
<WebMapConfig
:data="data"
:params="params"
@mapBeforeMount="mapBeforeMount"
></WebMapConfig>
</template>
<script>
export default {
data() {
return {
data: [],
params: {
type: "china",
registerName: "svgmap",
options: {
title: {
text: "svg地图",
subtext: "时间/详情",
},
},
},
};
},
created() {
this.getData(1);
},
methods: {
mapBeforeMount(echarts) {
echarts.registerMap("svgmap", this.$beijingsvg);
},
async getData(url) {
let res = await this.$api.getMap(url);
if (res.data) {
this.data = Object.freeze(
res.data.map((item) => ({
...item,
filter: "3",
value: [item.latitude, item.longitude],
}))
);
}
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
省级地图二
查看代码详情
<template>
<WebMapConfig :data="data" :params="params" @mapBeforeMount="mapBeforeMount">
</WebMapConfig>
</template>
<script>
export default {
data() {
return {
data: [],
params: {
type: "china",
registerName: "svgmap",
options: {
title: {
text: "svg地图",
subtext: "时间/详情",
},
},
},
};
},
created() {
this.getData(1);
},
methods: {
mapBeforeMount(echarts) {
echarts.registerMap("svgmap", this.$beijingsvg2);
},
async getData(url) {
let res = await this.$api.getMap(url);
if (res.data) {
this.data = Object.freeze(
res.data.map((item) => ({
...item,
filter: "3",
value: [item.latitude, item.longitude],
}))
);
}
},
},
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43