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)