Skip to content

Commit 23f23e5

Browse files
luoxiao-supermapluoxiao-supermap
committed
【update】图表微件例子更新，vue基础微件和主题切换改load,dist
1 parent 3d5d4b6 commit 23f23e5

11 files changed

+25583
-30133
lines changed

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.css‎

Lines changed: 33 additions & 25 deletions
Large diffs are not rendered by default.

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

Lines changed: 25417 additions & 29926 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.min.css‎

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

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

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

‎examples/mapboxgl/widgets_basic_vue.html‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<body>
5050

5151
<div id="main">
52-
<sm-web-map server-url="http://support.supermap.com.cn:8092/" map-id="1649097980" ref="map"></sm-web-map>
52+
<sm-web-map server-url="http://support.supermap.com.cn:8092/" map-id="1649097980" ref="map" @load.once='load'></sm-web-map>
5353
<el-card class="box-card">
5454
<!-- 图标微件 -->
5555
<sm-icon class-name="location" size="18px" text-color='rgb(63, 177, 227)' :style="{float: 'left'}">
@@ -95,27 +95,22 @@
9595
return this.speedIncrease / 100.0;
9696
}
9797
},
98-
mounted() {
99-
//为地图绑定事件，点击点要素刷新微件显示值
100-
var vm = this;
101-
this.$refs['map'] && this.$refs['map'].$once('loaded', function () {
102-
var me = this;
103-
this.map && this.map.on("click", function (e) {
104-
var bbox = [
105-
[e.point.x - 2, e.point.y - 2],
106-
[e.point.x + 2, e.point.y + 2]
107-
];
108-
var features = me.map.queryRenderedFeatures(bbox);
98+
methods: {
99+
load(obj) {
100+
var vm = this;
101+
map = obj.map;
102+
map.on('click', function(e) {
103+
var bbox = [[e.point.x - 2, e.point.y - 2], [e.point.x + 2, e.point.y + 2]];
104+
var features = map.queryRenderedFeatures(bbox);
109105
if (features.length > 0) {
110106
var properties = features[0].properties;
111107
vm.name = properties['机场'];
112108
vm.passengerNumber = properties['2017旅客吞吐量（人次）'] || 0;
113109
vm.goodsNumber = properties['2017货邮吞吐量（吨）'] || 0;
114110
vm.speedIncrease = properties['同比增速%'] || 0;
115111
}
116-
})
117-
118-
});
112+
});
113+
}
119114
}
120115
})
121116
</script>

‎examples/mapboxgl/widgets_chart_vue.html‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
width: 100%;
1616
height: 100%;
1717
}
18+
.sm-widget-chart .sm-widget-card__content{
19+
height: 300px;
20+
}
1821
</style>
1922
</head>
2023

@@ -24,17 +27,23 @@
2427
<sm-chart
2528
icon-class=""
2629
:style="chartStyle"
27-
:options="echartOption"
30+
:options="echartOptions"
31+
:dataset="dataset"
32+
:dataset-options="datasetOptions"
2833
></sm-chart>
2934
<sm-chart
3035
icon-class=""
3136
:style="chartStyle1"
32-
:options="echartOption1"
37+
:options="echartOptions1"
38+
:dataset="dataset"
39+
:dataset-options="datasetOptions1"
3340
></sm-chart>
3441
<sm-chart
3542
icon-class=""
3643
:style="chartStyle2"
37-
:options="echartOption2"
44+
:options="echartOptions2"
45+
:dataset="dataset"
46+
:dataset-options="datasetOptions2"
3847
></sm-chart>
3948
</div>
4049

@@ -45,43 +54,29 @@
4554
data() {
4655
return {
4756
chartStyle: {
48-
width: "400px",
49-
height: "300px",
5057
position: "absolute",
5158
bottom: "10px",
5259
right: "10px"
5360
},
5461
chartStyle1: {
55-
width: "400px",
56-
height: "300px",
5762
position: "absolute",
5863
bottom: "10px",
5964
right: "420px"
6065
},
6166
chartStyle2: {
62-
width: "400px",
63-
height: "300px",
6467
position: "absolute",
6568
bottom: "10px",
6669
right: "830px"
6770
},
68-
echartOption:{},
69-
echartOption1:{},
70-
echartOption2:{}
71-
72-
};
73-
},
74-
mounted(){
75-
// datasets和dataOptions，echartOptions都是sm-chart组件的props
76-
let datasets = {
71+
dataset: {
7772
type: "iPortal", //iServer iPortal
7873
url: "http://support.supermap.com.cn:8092/web/datas/1920557079",
7974
queryInfo: {
8075
maxFeatures: 20
8176
}
8277
},
8378
// echarts中涉及到超图数据series和坐标轴的字段的配置
84-
dataOptions = [
79+
datasetOptions: [
8580
{
8681
seriesType: "bar", //图表类型
8782
isStastic: true, //是否统计, 默认不统计
@@ -97,7 +92,7 @@
9792
yField: "2017起降架次（架次）",
9893
}
9994
],
100-
dataOptions1 = [
95+
datasetOptions1: [
10196
{
10297
seriesType: "line", //图表类型
10398
isStastic: true, //是否统计, 默认不统计
@@ -113,7 +108,7 @@
113108
yField: "2017旅客吞吐量（人次）"
114109
}
115110
],
116-
dataOptions2 = [
111+
datasetOptions2: [
117112
{
118113
seriesType: "scatter", //图表类型
119114
isStastic: true, //是否统计, 默认不统计
@@ -123,8 +118,8 @@
123118
}
124119
],
125120
// 和echarts一样的配置
126-
echartOptions = {
127-
legend: {data: ['2016起降架次（架次）', '2017起降架次（架次）']}, //与legendName || yField数据一致
121+
echartOptions: {
122+
legend: {data: ['2016起降架次（架次）', '2017起降架次（架次）']}, //与yField数据一致
128123
tooltip: {formatter: "{b0}: {c0}"},
129124
grid:{
130125
top: 30,
@@ -133,8 +128,8 @@
133128
right: 30
134129
}
135130
},
136-
echartOptions1 = {
137-
legend: {data: ['2016旅客吞吐量（人次）', '2017旅客吞吐量（人次）']}, //与legendName || yField数据一致
131+
echartOptions1: {
132+
legend: {data: ['2016旅客吞吐量（人次）', '2017旅客吞吐量（人次）']}, //与yField数据一致
138133
tooltip: {formatter: "{b0}: {c0}"},
139134
grid:{
140135
top: 30,
@@ -143,17 +138,12 @@
143138
right: 30
144139
}
145140
},
146-
echartOptions2 = {
147-
legend: {data: ['同比增速%']},//与legendName || yField数据一致
141+
echartOptions2: {
142+
legend: {data: ['同比增速%']},//与yField数据一致
148143
tooltip: {formatter: "{b0}: {c0}"},
149-
};
150-
let EchartsDataService = SuperMap.Widgets.utils.EchartsDataService;
151-
let echartsDataService = new EchartsDataService();
152-
echartsDataService.getDataOption(datasets, dataOptions).then(data => {
153-
this.echartOption = Object.assign(data, echartOptions);
154-
this.echartOption1 = Object.assign(echartsDataService.formatChartData(dataOptions1), echartOptions1);
155-
this.echartOption2 = Object.assign(echartsDataService.formatChartData(dataOptions2), echartOptions2);
156-
});
144+
}
145+
146+
};
157147
}
158148
})
159149
</script>

‎examples/mapboxgl/widgets_demo_vue.html‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,12 @@
283283
</el-row>
284284
<el-row>
285285
<el-col :md="24" :xs="24">
286-
<sm-chart style="width: 100%;height: 28vh;" icon-class="" :options="echartOption">
287-
</sm-chart>
286+
<sm-chart
287+
icon-class=""
288+
:options="echartOption"
289+
:dataset="dataset"
290+
:dataset-options="datasetOptions">
291+
</sm-chart>
288292
</el-col>
289293
</el-row>
290294
</el-col>
@@ -299,35 +303,14 @@
299303
el: "#main",
300304
data() {
301305
return {
302-
// 和echarts一样的配置
303-
echartOption: {},
304-
305-
titleFontStyle: {
306-
fontFamily: "微软雅黑",
307-
fontWeight: "bolder",
308-
textAlign: "center"
309-
},
310-
categoryFontStyle: {
311-
fontFamily: "微软雅黑",
312-
fontWeight: "bolder",
313-
textAlign: "left"
314-
},
315-
textFontStyle: {
316-
fontFamily: "微软雅黑",
317-
fontWeight: "bolder",
318-
textAlign: "center"
319-
}
320-
};
321-
},
322-
mounted() {
323-
let datasets = {
306+
dataset: {
324307
type: "iPortal", //iServer iPortal
325308
url: "http://support.supermap.com.cn:8092/web/datas/1920557079",
326309
queryInfo: {
327310
maxFeatures: 20
328311
}
329312
},
330-
dataOptions = [
313+
datasetOptions: [
331314
{
332315
seriesType: "bar", //图表类型
333316
isStastic: true, //是否统计, 默认不统计
@@ -341,20 +324,32 @@
341324
yField: "2017起降架次（架次）" //统计的数据，legned默认名字
342325
}
343326
],
344-
otherOption = {
327+
echartOption: {
345328
legend: { data: ["2017起降架次（架次）", "2016起降架次（架次）"] }, //与 yField数据一致
346329
grid: {
347330
top: 30,
348331
bottom: 60,
349332
left: 100,
350333
right: 30
351334
}
352-
};
353-
let EchartsDataService = SuperMap.Widgets.utils.EchartsDataService;
354-
this.echartsDataService = new EchartsDataService();
355-
this.echartsDataService.getDataOption(datasets, dataOptions).then(data => {
356-
this.echartOption = Object.assign(data, otherOption);
357-
});
335+
},
336+
337+
titleFontStyle: {
338+
fontFamily: "微软雅黑",
339+
fontWeight: "bolder",
340+
textAlign: "center"
341+
},
342+
categoryFontStyle: {
343+
fontFamily: "微软雅黑",
344+
fontWeight: "bolder",
345+
textAlign: "left"
346+
},
347+
textFontStyle: {
348+
fontFamily: "微软雅黑",
349+
fontWeight: "bolder",
350+
textAlign: "center"
351+
}
352+
};
358353
}
359354
});
360355
</script>
@@ -483,6 +478,8 @@
483478
}
484479
.sm-widget-chart .sm-widget-card__content {
485480
box-shadow: 0 0 0 #fff;
481+
width: 100%;
482+
height: 28vh;
486483
}
487484
</style>
488485
</body>

‎examples/mapboxgl/widgets_gauge_chart_vue.html‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,22 @@
1717
width: 100%;
1818
height: 100%;
1919
}
20+
.sm-widget-chart .sm-widget-card__content{
21+
height: 300px;
22+
}
2023
</style>
2124
</head>
2225

2326
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
2427
<div id="main">
2528
<sm-web-map server-url='http://support.supermap.com.cn:8092/' map-id="1649097980">
2629
</sm-web-map>
27-
<sm-chart :style="chartStyle" icon-class="" :options="echartOption" ref="smChart"></sm-chart>
30+
<sm-chart
31+
icon-class=""
32+
:style="chartStyle"
33+
:dataset="dataset"
34+
:dataset-options="datasetOptions"
35+
></sm-chart>
2836
</div>
2937

3038
<script>
@@ -33,39 +41,27 @@
3341
data() {
3442
return {
3543
chartStyle: {
36-
width: "400px",
37-
height: "300px",
3844
position: "absolute",
3945
bottom: "10px",
4046
right: "10px"
4147
},
42-
43-
// 和echarts一样的配置
44-
echartOption: {}
45-
};
46-
},
47-
mounted() {
48-
let datasets = {
49-
type: "iPortal", //iServer iPortal
50-
url: "http://support.supermap.com.cn:8092/web/datas/1920557079",
48+
dataset: {
49+
type: "iServer", //iServer iPortal
50+
url: "http://support.supermap.com.cn:8090/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R",
5151
queryInfo: {
52-
maxFeatures: 1
52+
maxFeatures: 1,
53+
attributeFilter: "SmID = 2"
5354
}
5455
},
55-
dataOptions = [
56+
datasetOptions: [
5657
{
5758
seriesType: "gauge", //图表类型
5859
isStastic: true, //是否统计, 默认不统计
59-
xField: "机场", //x坐标轴数据字段
60-
yField: "同比增速%" //统计的数据，legned默认名字
60+
xField: "LANDTYPE", //x坐标轴数据字段
61+
yField: "AREA" //统计的数据，legned默认名字
6162
}
62-
];
63-
64-
let EchartsDataService = SuperMap.Widgets.utils.EchartsDataService;
65-
this.echartsDataService = new EchartsDataService();
66-
this.echartsDataService.getDataOption(datasets, dataOptions).then(data => {
67-
this.echartOption = data;
68-
});
63+
]
64+
};
6965
}
7066
});
7167
</script>

0 commit comments

Comments
 (0)