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)
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