Skip to content

Commit 3a0af6b

Browse files
liqian7liqian7
committed
【feature】 新增 mbgl 端图表专题图微件范例，review by songym
1 parent ce47f8b commit 3a0af6b

File tree

5 files changed

+161
-1
lines changed

5 files changed

+161
-1
lines changed

‎examples/locales/en-US/resources.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -545,6 +545,7 @@ window.examplesResources = {
545545
"title_widgetsDeckGL_Vue": 'DeckGL Layer Widget(Vue)',
546546
"title_widgetsVectorTile_Vue": 'Vector Tile Layer Widget(Vue)',
547547
"title_widgetsHeatmap_Vue": 'Heatmap Layer Widget(Vue)',
548+
"title_widgetsGraphThemeLayer_Vue": 'Statistical Thematic Chart Widget(Vue)',
548549

549550
"text_code": "Forward Match",
550551
"text_decode": "Reverse Match",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,7 @@ window.examplesResources = {
493493
"title_widgetsDeckGL_Vue": 'DeckGL 图层微件（Vue）',
494494
"title_widgetsVectorTile_Vue": '矢量瓦片图层微件（Vue）',
495495
"title_widgetsHeatmap_Vue": '热力图图层微件（Vue）',
496+
"title_widgetsGraphThemeLayer_Vue": '图表专题图微件（Vue）',
496497

497498
"text_code": "正向匹配",
498499
"text_decode": "反向匹配",

‎examples/mapboxgl/config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1186,6 +1186,12 @@ var exampleConfig = {
11861186
version: "9.1.2",
11871187
thumbnail: "widgets_cluster_vue.png",
11881188
fileName: "widgets_cluster_vue"
1189+
} ,{
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"
11891195
} ,{
11901196
name: "热力图图层",
11911197
name_en: "Heatmap layer",
@@ -1210,7 +1216,7 @@ var exampleConfig = {
12101216
version: "9.1.2",
12111217
thumbnail: "widgets_deckgl_vue.png",
12121218
fileName: "widgets_deckgl_vue"
1213-
}
1219+
}
12141220
]
12151221
}
12161222
}

‎examples/mapboxgl/img/widgets_graph_theme_layer_vue.png‎

13.9 KB
Loading

‎examples/mapboxgl/widgets_graph_theme_layer_vue.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_widgetsGraphThemeLayer_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient9-mapboxgl-widgets-vue" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
12+
<style>
13+
#main {
14+
margin: 0 auto;
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
22+
<div id="main">
23+
<sm-web-map :web-map-options="{server: 'http://support.supermap.com.cn:8092/'}" map-id="676816598">
24+
<sm-graph-theme-layer
25+
:theme-layer-options="graphThemeLayerOptions"
26+
layer-name="pieThemeLayer"
27+
:layer-features="graphFeatures"
28+
charts-type="Pie"
29+
:add-layer-succeeded-callback="addLayerSucceeded"
30+
></sm-graph-theme-layer>
31+
</sm-web-map>
32+
</div>
33+
<script>
34+
var features, chartsSettingForPieOrRing, themeLayerOptions, popup;
35+
var feas = [];
36+
for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
37+
// 省居民消费水平（单位：元）信息
38+
var provinceInfo = chinaConsumptionLevel[i];
39+
var fea = {
40+
type: 'feature',
41+
geometry: {
42+
type: 'Point',
43+
coordinates: [provinceInfo[1], provinceInfo[2]],
44+
},
45+
properties: {
46+
NAME: provinceInfo[0],
47+
CON2009: provinceInfo[3],
48+
CON2010: provinceInfo[4],
49+
CON2011: provinceInfo[5],
50+
CON2012: provinceInfo[6],
51+
CON2013: provinceInfo[7],
52+
},
53+
};
54+
55+
feas.push(fea);
56+
}
57+
58+
features = {
59+
type: 'FeatureCollection',
60+
features: feas,
61+
};
62+
63+
chartsSettingForPie = {
64+
width: 240,
65+
height: 100,
66+
codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
67+
sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的（表示字段值的图形）样式
68+
sectorStyleByFields: [
69+
{ fillColor: '#FFB980' },
70+
{ fillColor: '#5AB1EF' },
71+
{ fillColor: '#B6A2DE' },
72+
{ fillColor: '#2EC7C9' },
73+
{ fillColor: '#D87A80' },
74+
],
75+
sectorHoverStyle: { fillOpacity: 1 },
76+
xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
77+
axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
78+
axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
79+
backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
80+
backgroundRadius: [5, 5, 5, 5], // 背景框圆角参数
81+
};
82+
83+
// 设置 graphThemeLayer option 参数
84+
themeLayerOptions = {
85+
attributions: ' ',
86+
themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
87+
opacity: 0.9,
88+
chartsSetting: chartsSettingForPie,
89+
};
90+
91+
// 添加弹窗
92+
function showInfo(themeLayer, map) {
93+
themeLayer.on('mousemove', function(e) {
94+
if (popup) {
95+
popup.remove();
96+
}
97+
if (e.target && e.target.refDataID && e.target.dataInfo) {
98+
// 获取图形对应的数据 (feature)
99+
var fea = themeLayer.getFeatureById(e.target.refDataID);
100+
var info = e.target.dataInfo;
101+
102+
// 弹窗内容
103+
var contentHTML = "<div style='color: #000; background-color: #fff'>";
104+
contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
105+
contentHTML += "<hr style='margin: 3px'>";
106+
107+
switch (info.field) {
108+
case 'CON2009':
109+
contentHTML += resources.text_consumptionLevel1 + '09' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
110+
break;
111+
case 'CON2010':
112+
contentHTML += resources.text_consumptionLevel1 + '10' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
113+
break;
114+
case 'CON2011':
115+
contentHTML += resources.text_consumptionLevel1 + '11' + resources.text_consumptionLevel2 + '<br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
116+
break;
117+
case 'CON2012':
118+
contentHTML += resources.text_consumptionLevel1 + '12' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
119+
break;
120+
case 'CON2013':
121+
contentHTML += resources.text_consumptionLevel1 + '13' + resources.text_consumptionLevel2 + ' <br/><strong>' + info.value + '</strong>（' + resources.text_yuan + '）';
122+
break;
123+
default:
124+
contentHTML += 'No Data';
125+
}
126+
contentHTML += '</div>';
127+
128+
var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
129+
popup = new mapboxgl.Popup({ closeOnClick: false })
130+
.setLngLat([tempPoint.lng, tempPoint.lat])
131+
.setHTML(contentHTML)
132+
.addTo(map);
133+
return;
134+
}
135+
if (popup) {
136+
popup.remove();
137+
}
138+
});
139+
}
140+
new Vue({
141+
el: '#main',
142+
data() {
143+
return {
144+
graphThemeLayerOptions: themeLayerOptions,
145+
graphFeatures: features,
146+
addLayerSucceeded: showInfo,
147+
};
148+
},
149+
});
150+
</script>
151+
</body>
152+
</html>

0 commit comments

Comments
 (0)