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