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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy