Skip to content

Commit ceb1d91

Browse files
committed
【feature】新增mbgl端单值专题图、分段专题图、等级符号专题图、标签专题图微件范例, review by liqian
1 parent 3a0af6b commit ceb1d91

13 files changed

+4901
-9604
lines changed

dist/mapboxgl/iclient9-mapboxgl-widgets-vue.js

Lines changed: 3744 additions & 9586 deletions
Large diffs are not rendered by default.

dist/mapboxgl/iclient9-mapboxgl-widgets-vue.min.js

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

examples/locales/en-US/resources.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -546,6 +546,10 @@ window.examplesResources = {
546546
"title_widgetsVectorTile_Vue": 'Vector Tile Layer Widget(Vue)',
547547
"title_widgetsHeatmap_Vue": 'Heatmap Layer Widget(Vue)',
548548
"title_widgetsGraphThemeLayer_Vue": 'Statistical Thematic Chart Widget(Vue)',
549+
"title_widgetsUniqueTheme_Vue": 'UniqueTheme Layer Widget(Vue)',
550+
"title_widgetsRangeTheme_Vue": 'RangeTheme Layer Widget(Vue)',
551+
"title_widgetsRankSymbolTheme_Vue": 'RankSymbolTheme Layer Widget(Vue)',
552+
"title_widgetsLabelTheme_Vue": 'LabelTheme Layer Widget(Vue)',
549553

550554
"text_code": "Forward Match",
551555
"text_decode": "Reverse Match",
@@ -1207,7 +1211,7 @@ window.examplesResources = {
12071211
'text_symbolEqualSize':"Equal large",
12081212
'text_symbolDistribution':"Uniform distribution",
12091213
'text_myRasterLayer':"My Raster Layer",
1210-
1214+
12111215
"btn_overlayAnalyst": "Start analysis",
12121216
"btn_terrainCurvatureCalculation": "Start calculation",
12131217
"btn_mathExpression": "Start calculation",
@@ -1487,4 +1491,4 @@ window.examplesResources = {
14871491
"style_heatMapWidth": "width: 340px",
14881492
"style_plotAnimation": "width: 170px; height: 35px; margin-bottom: 0; border-bottom-right-radius: 4px; border-top-right-radius: 4px;"
14891493
}
1490-
};
1494+
};

examples/locales/zh-CN/resources.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -494,7 +494,11 @@ window.examplesResources = {
494494
"title_widgetsVectorTile_Vue": '矢量瓦片图层微件(Vue)',
495495
"title_widgetsHeatmap_Vue": '热力图图层微件(Vue)',
496496
"title_widgetsGraphThemeLayer_Vue": '图表专题图微件(Vue)',
497-
497+
"title_widgetsUniqueTheme_Vue": '单值专题图图层微件(Vue)',
498+
"title_widgetsRangeTheme_Vue": '分段专题图图层微件(Vue)',
499+
"title_widgetsRankSymbolTheme_Vue": '等级符号专题图图层微件(Vue)',
500+
"title_widgetsLabelTheme_Vue": '标签专题图图层微件(Vue)',
501+
498502
"text_code": "正向匹配",
499503
"text_decode": "反向匹配",
500504
"text_address": "地址   ",
@@ -1438,4 +1442,4 @@ window.examplesResources = {
14381442

14391443

14401444
}
1441-
};
1445+
};

examples/mapboxgl/config.js

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1187,12 +1187,36 @@ var exampleConfig = {
11871187
thumbnail: "widgets_cluster_vue.png",
11881188
fileName: "widgets_cluster_vue"
11891189
} ,{
1190-
name: "图表专题图",
1191-
name_en: "Statistical chart",
1192-
version: "9.1.2",
1193-
thumbnail: "widgets_graph_theme_layer_vue.png",
1194-
fileName: "widgets_graph_theme_layer_vue"
1195-
} ,{
1190+
name: "单值专题图",
1191+
name_en: "Unique Theme layer",
1192+
version: "9.1.2",
1193+
thumbnail: "widgets_uniquetheme_vue.png",
1194+
fileName: "widgets_uniquetheme_vue"
1195+
} ,{
1196+
name: "分段专题图",
1197+
name_en: "Range Theme layer",
1198+
version: "9.1.2",
1199+
thumbnail: "widgets_rangetheme_vue.png",
1200+
fileName: "widgets_rangetheme_vue"
1201+
} ,{
1202+
name: "等级符号专题图",
1203+
name_en: "RanSymbol Theme layer",
1204+
version: "9.1.2",
1205+
thumbnail: "widgets_ranksymboltheme_vue.png",
1206+
fileName: "widgets_ranksymboltheme_vue"
1207+
} ,{
1208+
name: "标签专题图",
1209+
name_en: "Label Theme layer",
1210+
version: "9.1.2",
1211+
thumbnail: "widgets_labeltheme_vue.png",
1212+
fileName: "widgets_labeltheme_vue"
1213+
} ,{
1214+
name: "图表专题图",
1215+
name_en: "Statistical chart",
1216+
version: "9.1.2",
1217+
thumbnail: "widgets_graph_theme_layer_vue.png",
1218+
fileName: "widgets_graph_theme_layer_vue"
1219+
} ,{
11961220
name: "热力图图层",
11971221
name_en: "Heatmap layer",
11981222
version: "9.1.2",
@@ -1268,4 +1292,4 @@ var exampleIconConfig = {
12681292
"widgets": "fa-window-restore",
12691293
'multiCoordSys': "fa-globe"
12701294
};
1271-
window.mapboxglExampleConfig = exampleConfig;
1295+
window.mapboxglExampleConfig = exampleConfig;
15.8 KB
Loading
14.3 KB
Loading
Loading
Loading
Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html lang="en-US">
6+
7+
<head>
8+
<meta charset="UTF-8" />
9+
<title data-i18n="resources.title_widgetsLabelTheme_Vue"></title>
10+
<style>
11+
#main {
12+
margin: 0 auto;
13+
width: 100%;
14+
height: 100%
15+
}
16+
</style>
17+
</head>
18+
19+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
20+
<div id="main">
21+
<sm-map :map-options="mapOptions" @load="mapIsLoaded">
22+
<sm-label-theme-layer :theme-layer-options="themeOptions" layer-name="LabelThemeLayer"
23+
:layer-features="features" :add-layer-succeeded-callback="themeCallback" v-show="!!features.length">
24+
</sm-label-theme-layer>
25+
</sm-map>
26+
</div>
27+
<script type="text/javascript" include="vue,bootstrap" src="../js/include-web.js"></script>
28+
<script include="iclient9-mapboxgl-widgets-vue,mapbox-gl-enhance"
29+
src="../../dist/mapboxgl/include-mapboxgl.js"></script>
30+
<script type="text/javascript" src="../data/themeLableData.js"></script>
31+
<script>
32+
new Vue({
33+
el: '#main',
34+
data() {
35+
var host = window.isLocal ? window.server : 'http://iclient.supermap.io';
36+
var attribution =
37+
"<a href='https://www.mapbtyx.com/about/maps/' target='_blank'>© Mapbox </a>" +
38+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
39+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
40+
41+
var features = [];
42+
var feat;
43+
for (var i = 0; i < themeData.length; i++) {
44+
var lonlat = themeData[i].lonLat.split(",");
45+
var lng = parseFloat(lonlat[0]);
46+
var lat = parseFloat(lonlat[1]);
47+
var text = themeData[i].aqi;
48+
feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
49+
features.push(feat);
50+
}
51+
return {
52+
mapOptions: {
53+
container: 'map',
54+
style: {
55+
"version": 8,
56+
"sources": {
57+
"raster-tiles": {
58+
"attribution": attribution,
59+
"type": "raster",
60+
"tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
61+
"tileSize": 256,
62+
},
63+
},
64+
"layers": [{
65+
"id": "simple-tiles",
66+
"type": "raster",
67+
"source": "raster-tiles",
68+
"minzoom": 0,
69+
"maxzoom": 22
70+
}]
71+
},
72+
center: [116.40, 39.79],
73+
zoom: 3
74+
},
75+
features,
76+
themeOptions: {
77+
// map: map,//该可选参数将在下个版本遗弃
78+
attributions: " ",
79+
style: new SuperMap.ThemeStyle({
80+
labelRect: true,
81+
fontColor: "#000000",
82+
fontWeight: "bolder",
83+
fontSize: "18px",
84+
fill: true,
85+
fillColor: "#FFFFFF",
86+
fillOpacity: 1,
87+
stroke: false,
88+
strokeColor: "#8B7B8B"
89+
}),
90+
themeField: "aqi",
91+
styleGroups: [
92+
{
93+
start: 0,
94+
end: 51,
95+
style: {
96+
fillColor: "#6ACD06",
97+
fontSize: "17px"
98+
}
99+
}, {
100+
start: 51,
101+
end: 101,
102+
style: {
103+
fillColor: "#FBD12A",
104+
fontSize: "19px"
105+
}
106+
}, {
107+
start: 101,
108+
end: 151,
109+
style: {
110+
fillColor: "#FE8800",
111+
fontSize: "22px"
112+
}
113+
}, {
114+
start: 151,
115+
end: 201,
116+
style: {
117+
fillColor: "#FF0000",
118+
fontSize: "24px"
119+
}
120+
}, {
121+
start: 201,
122+
end: 301,
123+
style: {
124+
fillColor: "#CC0000",
125+
fontSize: "26px"
126+
}
127+
}, {
128+
start: 301,
129+
end: 601,
130+
style: {
131+
fillColor: "#960453",
132+
fontSize: "28px"
133+
}
134+
}
135+
]
136+
}
137+
};
138+
},
139+
methods: {
140+
mapIsLoaded(e) {
141+
this.map = e.map;
142+
},
143+
updateInfoView(feature, themeLayer) {
144+
if (!feature && this.popup) {
145+
this.removePopup();
146+
return;
147+
}
148+
149+
if (!this.popup) {
150+
this.popup = new mapboxgl.Popup();
151+
}
152+
153+
var statisticsData = this.getStatisticsData();
154+
var contentHTML = "<table><tbody><tr>" +
155+
"<td><div style='margin-left: 15px'>" +
156+
"<table><tbody><tr>" +
157+
"<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" + feature.attributes.aqi + "</div></td>" +
158+
"<td style='padding-right: 20px;'></td>" +
159+
"<td>" +
160+
"<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" + feature.attributes.quality + "</div>" +
161+
"<div style='font-size:10px;width:150px;'>" + feature.attributes.time_point + "</div>" +
162+
"<div style=' font-weight:lighter; font-size:14px;'>" + resources.text_currentCity + ":" + feature.attributes.area + "</div>" +
163+
"</td>" +
164+
"</tr> </tbody></table>" +
165+
"<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
166+
"<tbody>" +
167+
"<tr>" +
168+
"<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
169+
"<td style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
170+
"<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
171+
"</tr>" +
172+
"<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
173+
"<td style='font-size:11px;' align='center'>" + feature.attributes.pm2_5 + "</td>" +
174+
"<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minNum + "</td>" +
175+
"<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxNum + "</td>" +
176+
"</tr>" +
177+
"<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
178+
"<td style='font-size:11px;' align='center'>" + feature.attributes.pm10 + "</td>" +
179+
"<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minpm10 + "</td>" +
180+
"<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxpm10 + "</td>" +
181+
"</tr>" +
182+
"<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
183+
"<td style='font-size:11px;' align='center'>" + feature.attributes.o3 + "</td>" +
184+
"<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minO3 + "</td>" +
185+
"<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxO3 + "</td></td>" +
186+
"</tr>" +
187+
"<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
188+
"<td style='font-size:11px;' align='center'>" + feature.attributes.so2 + "</td>" +
189+
"<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minSO2 + "</td>" +
190+
"<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxSO2 + "</td></td>" +
191+
"</tr>" +
192+
"<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
193+
"<td style='font-size:11px;' align='center'>" + feature.attributes.no2 + "</td>" +
194+
"<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minNO2 + "</td>" +
195+
"<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxNO2 + "</td></td>" +
196+
"</tr></tbody> </table></div></td></tr></tbody> </table>";
197+
198+
var latLng = this.getLatLng(feature.attributes.lonLat);
199+
this.popup.setLngLat(latLng).setHTML(contentHTML).addTo(this.map);
200+
201+
//设置弹框内容颜色
202+
var groups = themeLayer.styleGroups;
203+
for (var i = 0; i < groups.length; i++) {
204+
if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
205+
this.setColor("#6ACD06");
206+
}
207+
else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
208+
this.setColor("#FBD12A");
209+
}
210+
else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
211+
this.setColor("#FE8800");
212+
}
213+
else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
214+
this.setColor("#FF0000");
215+
}
216+
else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
217+
this.setColor("#CC0000");
218+
}
219+
else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
220+
this.setColor("#960453");
221+
}
222+
}
223+
},
224+
getStatisticsData() {
225+
if (this.statisticsData) {
226+
return this.statisticsData;
227+
}
228+
//遍历数组,获取单个属性。组成新的数组
229+
var pm25 = [], pm10s = [], o3s = [], so2s = [], no2s = [];
230+
for (var i = 0; i < themeData.length; i++) {
231+
pm10s.push(themeData[i].pm2_5);
232+
pm25.push(themeData[i].pm10);
233+
o3s.push(themeData[i].o3);
234+
so2s.push(themeData[i].so2);
235+
no2s.push(themeData[i].no2);
236+
}
237+
//获取单个属性的最大最小值
238+
this.statisticsData = {
239+
maxNum: Math.max.apply(Math, pm25),
240+
minNum: Math.min.apply(Math, pm25),
241+
maxpm10: Math.max.apply(Math, pm10s),
242+
minpm10: Math.min.apply(Math, pm10s),
243+
maxO3: Math.max.apply(Math, o3s),
244+
minO3: Math.min.apply(Math, o3s),
245+
maxSO2: Math.max.apply(Math, so2s),
246+
minSO2: Math.min.apply(Math, so2s),
247+
maxNO2: Math.max.apply(Math, no2s),
248+
minNO2: Math.min.apply(Math, no2s)
249+
};
250+
return this.statisticsData;
251+
252+
},
253+
setColor(color) {
254+
document.getElementById("contentID").style.backgroundColor = color;
255+
document.getElementById("textID").style.color = color;
256+
},
257+
getLatLng(latLng) {
258+
var latLng = latLng.split(",");
259+
return [parseFloat(latLng[0]), parseFloat(latLng[1])]
260+
},
261+
themeCallback(themeLayer) {
262+
themeLayer.on('mousemove', (e) => this.handleMouseOver(themeLayer, e));
263+
},
264+
handleMouseOver(themeLayer, e) {
265+
if (e.target && e.target.refDataID) {
266+
var fid = e.target.refDataID;
267+
var fea = themeLayer.getFeatureById(fid);
268+
if (fea) {
269+
this.updateInfoView(fea, themeLayer);
270+
}
271+
} else {
272+
this.removePopup();
273+
}
274+
},
275+
removePopup() {
276+
this.popup && this.popup.remove(this.map);
277+
}
278+
}
279+
});
280+
</script>
281+
</body>
282+
283+
</html>

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