Skip to content

Commit 0e3e6b5

Browse files
songyumengsongyumeng
committed
【examples】增加示例
1 parent b17fa67 commit 0e3e6b5

File tree

5 files changed

+254
-4
lines changed

5 files changed

+254
-4
lines changed

‎examples/component/components_ncp_world.html

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
9+
<title>国家紧急状态</title>
10+
</head>
11+
12+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
13+
<div id="main">
14+
<sm-web-map
15+
style="background: #081f30;"
16+
:map-options="mapOptions"
17+
@load="mapLoaded"
18+
></sm-web-map>
19+
<div id="group"></div>
20+
</div>
21+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
22+
<script
23+
include="ant-design-vue,iclient-mapboxgl-vue,mapbox-gl-enhance"
24+
src="../../dist/mapboxgl/include-mapboxgl.js"
25+
></script>
26+
<script src="../data/ncp//world_4326.js"></script>
27+
<script src="../data/ncp/Country_Center.js"></script>
28+
<style>
29+
#main {
30+
margin: 0 auto;
31+
width: 100%;
32+
height: 100%;
33+
}
34+
</style>
35+
<script>
36+
//数据截止时间为2020-03-26
37+
var nationalEmergencyArea = [
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+
var styles = { emergencyColor: '#ef6548', defaultColor: '#002F4E' };
101+
new Vue({
102+
el: '#main',
103+
data() {
104+
var attribution =
105+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
106+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
107+
" Map Data <span>© <a href='https://www.supermapol.com/' target='_blank'>SuperMap Online</a></span> ";
108+
109+
return {
110+
mapOptions: {
111+
container: 'map', // container id
112+
style: {
113+
version: 8,
114+
glyphs: 'https://ncov.supermapol.com/statichtml/font/{fontstack}/{range}.pbf',
115+
sources: {
116+
'raster-tiles': {
117+
attribution: attribution,
118+
type: 'raster',
119+
tiles: [
120+
'https://maptiles.supermapol.com/iserver/services/map-China-2/rest/maps/China_DarkBlue_Nolable'
121+
],
122+
prjCoordSys: { epsgCode: 4326 },
123+
rasterSource: 'iserver',
124+
tileSize: 256
125+
}
126+
},
127+
layers: [
128+
{
129+
id: 'simple-tiles',
130+
type: 'raster',
131+
source: 'raster-tiles',
132+
minzoom: 0,
133+
maxzoom: 22
134+
}
135+
]
136+
},
137+
center: [101.58, 33.11],
138+
maxZoom: 5,
139+
zoom: 2,
140+
crs: 'EPSG:4326'
141+
}
142+
};
143+
},
144+
methods: {
145+
mapLoaded(e) {
146+
this.map = e.map;
147+
this.initWorldData();
148+
this.map.addSource('world', {
149+
type: 'geojson',
150+
data: CountryData
151+
});
152+
this.map.addLayer({
153+
id: 'world',
154+
type: 'fill',
155+
source: 'world',
156+
layout: {},
157+
paint: {
158+
'fill-color': [
159+
'case',
160+
['has', 'nationalEmergency'],
161+
[
162+
'case',
163+
['==', ['get', 'nationalEmergency'], true],
164+
styles.emergencyColor,
165+
styles.defaultColor
166+
],
167+
styles.defaultColor
168+
]
169+
}
170+
});
171+
this.map.addLayer({
172+
id: 'world-strokeLine',
173+
type: 'line',
174+
source: 'world',
175+
layout: {},
176+
paint: {
177+
'line-width': 0.5,
178+
'line-color': '#83838D',
179+
'line-opacity': 1
180+
}
181+
});
182+
183+
this.map.addSource('world-label', {
184+
type: 'geojson',
185+
data: CountryCenterData
186+
});
187+
this.map.addLayer({
188+
id: 'world-label',
189+
type: 'symbol',
190+
source: 'world-label',
191+
filter: ['has', 'nationalEmergency'],
192+
layout: {
193+
'text-field': ['get', 'Country'],
194+
'text-font': ['Microsoft YaHei Regular'],
195+
'text-size': 12,
196+
'text-allow-overlap': false,
197+
'text-letter-spacing': 0,
198+
'text-max-width': 0
199+
},
200+
paint: {
201+
'text-color': 'white',
202+
'text-opacity': 1,
203+
'text-halo-color': '#696868',
204+
'text-halo-width': 1.5
205+
}
206+
});
207+
},
208+
initWorldData() {
209+
nationalEmergencyArea.forEach(element => {
210+
var country = CountryData.features.find(function(item) {
211+
if (
212+
findCNName(item.properties.NAME_0) === element ||
213+
findCNName(item.properties.GID_0) === element
214+
) {
215+
item.zhName = element;
216+
return true;
217+
}
218+
return false;
219+
});
220+
if (country) {
221+
country.properties.nationalEmergency = true;
222+
}
223+
var countryCenter = CountryCenterData.features.find(function(item) {
224+
return item.properties.Country === element;
225+
});
226+
if (countryCenter) {
227+
countryCenter.properties.nationalEmergency = true;
228+
}
229+
});
230+
}
231+
}
232+
});
233+
function findCNName(enName) {
234+
for (const key in CountriesNameEn) {
235+
if (CountriesNameEn[key] === enName) return key;
236+
}
237+
return null;
238+
}
239+
</script>
240+
</body>
241+
</html>

‎examples/component/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,14 @@ var exampleConfig = {
6161
thumbnail: 'components_ncp_world_vue.png',
6262
fileName: 'components_ncp_world_vue',
6363
localIgnore: true
64+
},
65+
{
66+
name: '疫情国家紧急状态',
67+
name_en: 'National Emergency',
68+
version: '10.0.2',
69+
thumbnail: 'components_ncp_world.png',
70+
fileName: 'components_ncp_world',
71+
localIgnore: true
6472
}
6573
]
6674
},

‎examples/component/img/components_ncp_world.png

272 KB
Loading

‎examples/data/ncp/Country_Center.js

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/data/ncp/world_4326.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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