Skip to content

Commit b5d491b

Browse files
songyumengsongyumeng
committed
【examples】更新ncp地图例子 review by xiongjj
1 parent 32ce7a9 commit b5d491b

File tree

2 files changed

+125
-67
lines changed

2 files changed

+125
-67
lines changed

‎examples/component/components_ncp_china_vue.html‎

Lines changed: 66 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,36 @@
55
<html>
66
<head>
77
<meta charset="UTF-8" />
8+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
89
<title></title>
910
</head>
1011

1112
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
1213
<div id="main">
1314
<sm-web-map :map-options="mapOptions" @load="mapLoaded" @click="mapClicked"></sm-web-map>
14-
<a-radio-group class="radio-group" v-model="type" default-value="china-riskLevel" size="large">
15-
<a-radio-button value="china-riskLevel" data-i18n="resources.text_ncp_riskLevel"></a-radio-button>
16-
<a-radio-button
17-
value="china-incrementConfirmed"
18-
data-i18n="resources.text_ncp_incrementConfirmed"
19-
></a-radio-button>
20-
<a-radio-button value="china-nowConfirmed" data-i18n="resources.text_ncp_nowConfirmed"></a-radio-button>
21-
<a-radio-button value="china-incidence" data-i18n="resources.text_ncp_incidence"></a-radio-button>
22-
</a-radio-group>
23-
<sm-indicator
24-
:title="title"
25-
unit=""
26-
mode="horizontal"
27-
:num="num"
28-
font-size="44px"
29-
font-weight="400"
30-
style="position: absolute; left: 10px;top: 60px;text-align: center;z-index: 1000;"
31-
>
32-
</sm-indicator>
33-
<sm-text
34-
:title="time"
35-
text-color="rgba(255, 255, 255, 0.6)"
36-
:font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
37-
style="position: absolute; left: 10px;top: 110px;text-align: center;z-index: 1000;padding-left: 15px"
38-
>
39-
</sm-text>
15+
<div id="group">
16+
<a-radio-group class="radio-group" v-model="type" default-value="china-riskLevel" size="large">
17+
<a-radio-button value="china-riskLevel" data-i18n="resources.text_ncp_riskLevel"></a-radio-button>
18+
<a-radio-button
19+
value="china-incrementConfirmed"
20+
data-i18n="resources.text_ncp_incrementConfirmed"
21+
></a-radio-button>
22+
<a-radio-button
23+
value="china-nowConfirmed"
24+
data-i18n="resources.text_ncp_nowConfirmed"
25+
></a-radio-button>
26+
<a-radio-button value="china-incidence" data-i18n="resources.text_ncp_incidence"></a-radio-button>
27+
</a-radio-group>
28+
<br />
29+
<sm-indicator :title="title" unit="" mode="horizontal" :num="num" font-size="44px" font-weight="400">
30+
</sm-indicator>
31+
<sm-text
32+
:title="time"
33+
text-color="rgba(255, 255, 255, 0.6)"
34+
:font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
35+
>
36+
</sm-text>
37+
</div>
4038
<sm-image
4139
repeat="noRepeat"
4240
src="../img/online-qr.png"
@@ -56,16 +54,16 @@
5654
width: 100%;
5755
height: 100%;
5856
}
59-
.radio-group {
57+
#group {
6058
position: absolute;
6159
left: 10px;
6260
top: 10px;
63-
text-align: center;
6461
z-index: 1000;
6562
}
6663
.ant-radio-button-wrapper {
6764
color: #fff;
6865
background: #333333;
66+
padding: 0px 10px;
6967
}
7068
.mapboxgl-popup-content {
7169
border: solid 1px #464646;
@@ -84,10 +82,42 @@
8482
.ant-radio-button-wrapper-checked:first-child {
8583
color: #1890ff;
8684
}
85+
.sm-component-indicator {
86+
padding-left: 0px;
87+
}
88+
.sm-component-text {
89+
margin-top: -16px;
90+
}
8791
.sm-component-count-to__numItem {
8892
letter-spacing: 0 !important;
8993
text-indent: 1px !important;
9094
}
95+
@media screen and (max-width: 768px) {
96+
.sm-component-count-to__numItem {
97+
font-size: 32px !important;
98+
}
99+
.sm-component-indicator__title {
100+
font-size: 20px !important;
101+
}
102+
.sm-component-indicator__num {
103+
font-size: 32px !important;
104+
}
105+
.sm-component-text {
106+
font-size: 16px !important;
107+
}
108+
.sm-component-text {
109+
margin-top: -10px;
110+
}
111+
#group {
112+
margin-top: 28px;
113+
}
114+
.ant-radio-group-large .ant-radio-button-wrapper {
115+
height: 32px;
116+
line-height: 30px;
117+
font-size: 14px;
118+
padding: 0 10px;
119+
}
120+
}
91121
</style>
92122
<script>
93123
var styles = {
@@ -249,6 +279,7 @@
249279
tiles: [
250280
'https://maptiles.supermapol.com/iserver/services/map-China/rest/maps/China_Dark_Nolable'
251281
],
282+
transparent: false,
252283
rasterSource: 'iserver',
253284
tileSize: 256
254285
}
@@ -268,7 +299,7 @@
268299
[137.0563536922412, 54.36513803178008]
269300
],
270301
center: [105.9002304535943, 31.9592716277851],
271-
minZoom: 2.5,
302+
minZoom: 1.5,
272303
maxZoom: 6,
273304
zoom: 3.55
274305
}
@@ -298,14 +329,16 @@
298329
background: 'rgba(0, 0, 0,0)',
299330
colorGroup: ['rgb(225, 2, 0)']
300331
});
301-
$.get('https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(), function(response) {
302-
document.title = response[utils.getLanguage()].title;
303-
});
332+
$.get(
333+
'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(),
334+
function(response) {
335+
document.title = response[utils.getLanguage()].title;
336+
}
337+
);
304338
},
305339
methods: {
306340
mapLoaded(e) {
307341
this.map = e.map;
308-
window.map1 = e.map;
309342
$.get(
310343
'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ncp.json?time=' + new Date().getTime(),
311344
function(response) {

‎examples/component/components_ncp_world_vue.html‎

Lines changed: 59 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<html>
66
<head>
77
<meta charset="UTF-8" />
8+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
89
<title></title>
910
</head>
1011

@@ -16,31 +17,25 @@
1617
@load="mapLoaded"
1718
@click="mapClicked"
1819
></sm-web-map>
19-
<a-radio-group class="radio-group" v-model="type" default-value="world-confirmedIncrement" size="large">
20-
<a-radio-button
21-
value="world-confirmedIncrement"
22-
data-i18n="resources.text_ncp_incrementConfirmed"
23-
></a-radio-button>
24-
<a-radio-button value="world-confirmed" data-i18n="resources.text_ncp_confirmed"></a-radio-button>
25-
<a-radio-button value="world-incidence" data-i18n="resources.text_ncp_incidence"></a-radio-button>
26-
</a-radio-group>
27-
<sm-indicator
28-
:title="title"
29-
unit=""
30-
mode="horizontal"
31-
:num="num"
32-
font-size="44px"
33-
font-weight="400"
34-
style="position: absolute; left: 10px;top: 60px;text-align: center;z-index: 1000;"
35-
>
36-
</sm-indicator>
37-
<sm-text
38-
:title="time"
39-
text-color="rgba(255, 255, 255, 0.6)"
40-
:font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
41-
style="position: absolute; left: 10px;top: 110px;text-align: center;z-index: 1000;padding-left: 15px"
42-
>
43-
</sm-text>
20+
<div id="group">
21+
<a-radio-group class="radio-group" v-model="type" default-value="world-confirmedIncrement" size="large">
22+
<a-radio-button
23+
value="world-confirmedIncrement"
24+
data-i18n="resources.text_ncp_incrementConfirmed"
25+
></a-radio-button>
26+
<a-radio-button value="world-confirmed" data-i18n="resources.text_ncp_confirmed"></a-radio-button>
27+
<a-radio-button value="world-incidence" data-i18n="resources.text_ncp_incidence"></a-radio-button>
28+
</a-radio-group>
29+
<br />
30+
<sm-indicator :title="title" unit="" mode="horizontal" :num="num" font-size="44px" font-weight="400">
31+
</sm-indicator>
32+
<sm-text
33+
:title="time"
34+
text-color="rgba(255, 255, 255, 0.6)"
35+
:font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
36+
>
37+
</sm-text>
38+
</div>
4439
<sm-image
4540
repeat="noRepeat"
4641
src="../img/online-qr.png"
@@ -61,11 +56,10 @@
6156
width: 100%;
6257
height: 100%;
6358
}
64-
.radio-group {
59+
#group {
6560
position: absolute;
6661
left: 10px;
6762
top: 10px;
68-
text-align: center;
6963
z-index: 1000;
7064
}
7165
.ant-radio-button-wrapper {
@@ -89,10 +83,39 @@
8983
.ant-radio-button-wrapper-checked:first-child {
9084
color: #1890ff;
9185
}
86+
.sm-component-indicator {
87+
padding-left: 0px;
88+
}
89+
.sm-component-text {
90+
margin-top: -16px;
91+
}
9292
.sm-component-count-to__numItem {
9393
letter-spacing: 0 !important;
9494
text-indent: 1px !important;
9595
}
96+
@media screen and (max-width: 768px) {
97+
.sm-component-count-to__numItem {
98+
font-size: 32px !important;
99+
}
100+
.sm-component-indicator__title {
101+
font-size: 20px !important;
102+
}
103+
.sm-component-indicator__num {
104+
font-size: 32px !important;
105+
}
106+
.sm-component-text {
107+
font-size: 16px !important;
108+
}
109+
.sm-component-text {
110+
margin-top: -10px;
111+
}
112+
.ant-radio-group-large .ant-radio-button-wrapper {
113+
height: 32px;
114+
line-height: 30px;
115+
font-size: 14px;
116+
padding: 0 10px;
117+
}
118+
}
96119
</style>
97120
<script>
98121
var styles = {
@@ -221,7 +244,8 @@
221244
}
222245
]
223246
},
224-
center: [0, 0],
247+
center: [101.58, 33.11],
248+
maxZoom: 5,
225249
zoom: 2,
226250
crs: 'EPSG:4326'
227251
}
@@ -233,9 +257,12 @@
233257
background: 'rgba(0, 0, 0,0)',
234258
colorGroup: ['rgb(225, 2, 0)']
235259
});
236-
$.get('https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(), function(response) {
237-
document.title = response[utils.getLanguage()].title;
238-
});
260+
$.get(
261+
'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(),
262+
function(response) {
263+
document.title = response[utils.getLanguage()].title;
264+
}
265+
);
239266
},
240267
computed: {
241268
num() {
@@ -323,7 +350,7 @@
323350
type: 'geojson',
324351
data: CountryCenterData,
325352
cluster: true,
326-
clusterRadius: 20
353+
clusterRadius: 10
327354
});
328355
this.map.addSource('world-label', {
329356
type: 'geojson',
@@ -469,8 +496,6 @@
469496
'text-field': styles[this.type]['text-field'],
470497
'text-font': ['Microsoft YaHei Regular'],
471498
'text-size': 12,
472-
'text-allow-overlap': false,
473-
'text-ignore-placement': false,
474499
'text-letter-spacing': 0,
475500
'text-max-width': 0,
476501
'symbol-sort-key': 10

0 commit comments

Comments
 (0)