Skip to content

Commit 5c87063

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
【feature】 新增属性表，图层颜色组件示例
1 parent 2619956 commit 5c87063

File tree

7 files changed

+136
-10
lines changed

7 files changed

+136
-10
lines changed

‎examples/component/components_attributes_vue.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2021 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_attributes_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
11+
<style>
12+
#main {
13+
margin: 0 auto;
14+
width: 100%;
15+
height: 100%;
16+
}
17+
</style>
18+
</head>
19+
20+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
21+
<div id="main">
22+
<sm-web-map style="height: 500px" server-url="https://www.supermapol.com/" map-id="505367620"></sm-web-map>
23+
<div style="position: relative; height: 400px; width: 100%">
24+
<sm-attributes layer-name="全国671个气象站观测数据" :field-configs="fieldConfigs"></sm-attributes>
25+
</div>
26+
</div>
27+
28+
<script>
29+
new Vue({
30+
el: '#main',
31+
data() {
32+
return {
33+
fieldConfigs: [
34+
{ value: '平均最低气温_Num', visible: false },
35+
{ value: 'SmID', visible: false },
36+
{
37+
value: '站台',
38+
visible: true,
39+
filters: [
40+
{ text: '塔城', value: '塔城' },
41+
{ text: '大同', value: '大同' },
42+
{ text: '石家庄', value: '石家庄' }
43+
],
44+
onFilter: (value, record) => record['站台'].indexOf(value) === 0
45+
},
46+
{
47+
value: '省份',
48+
visible: true,
49+
onFilter: (value, record) => record['省份'].indexOf(value) === 0,
50+
scopedSlots: {
51+
filterDropdown: 'filterDropdown',
52+
filterIcon: 'filterIcon',
53+
customRender: 'customRender'
54+
}
55+
},
56+
{ value: '海拔', visible: false },
57+
{ value: '最高气温_Num', visible: false },
58+
{ value: '最高气温', visible: false },
59+
{ value: '最高七天气温_Num', visible: false },
60+
{ value: '最热七天气温', visible: true, defaultSortOrder: 'descend' },
61+
{ value: '最低气温_Num', visible: false },
62+
{ value: '最低气温', visible: false },
63+
{ value: '年均降雨_Num', visible: false },
64+
{ value: 'lon', visible: true, title: '经度', width: 250 },
65+
{ value: 'lat', visible: true, title: '纬度', width: 250 }
66+
]
67+
};
68+
}
69+
});
70+
</script>
71+
</body>
72+
</html>

‎examples/component/components_layer_color_vue.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2021 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_layerColor_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script
11+
include="iclient-mapboxgl-vue,mapbox-gl-enhance"
12+
src="../../dist/mapboxgl/include-mapboxgl.js"
13+
></script>
14+
<style>
15+
#main {
16+
margin: 0 auto;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
</style>
21+
</head>
22+
23+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
24+
<div id="main">
25+
<sm-web-map server-url="https://www.supermapol.com/" map-id="505367620">
26+
<sm-layer-color :collapsed="false"></sm-layer-color>
27+
</sm-web-map>
28+
</div>
29+
30+
<script>
31+
new Vue({
32+
el: '#main'
33+
});
34+
</script>
35+
</body>
36+
</html>

‎examples/component/config.js‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -156,30 +156,44 @@ var exampleConfig = {
156156
{
157157
name: '指南针',
158158
name_en: 'Compass',
159-
version: '11.0.0',
159+
version: '10.1.2',
160160
thumbnail: 'components_compass_vue.png',
161161
fileName: 'components_compass_vue'
162162
},
163163
{
164164
name: '绘制',
165165
name_en: 'Draw',
166-
version: '11.0.0',
166+
version: '10.1.2',
167167
thumbnail: 'components_draw_vue.png',
168168
fileName: 'components_draw_vue'
169169
},
170170
{
171171
name: '坐标转换',
172172
name_en: 'Coordinate Conversion',
173-
version: '11.0.0',
173+
version: '10.1.2',
174174
thumbnail: 'components_coordinate_conversion_vue.png',
175175
fileName: 'components_coordinate_conversion_vue'
176176
},
177177
{
178178
name: '飞行定位',
179179
name_en: 'Fly To',
180-
version: '11.0.0',
181-
thumbnail: 'components_flyto_vue.png',
182-
fileName: 'components_flyto_vue'
180+
version: '10.1.2',
181+
thumbnail: 'components_flyTo_vue.png',
182+
fileName: 'components_flyTo_vue'
183+
},
184+
{
185+
name: '图层颜色',
186+
name_en: 'Layer Color',
187+
version: '10.1.2',
188+
thumbnail: 'components_layer_color_vue.png',
189+
fileName: 'components_layer_color_vue'
190+
},
191+
{
192+
name: '属性表',
193+
name_en: 'Attributes',
194+
version: '10.1.2',
195+
thumbnail: 'components_attributes_vue.png',
196+
fileName: 'components_attributes_vue'
183197
}
184198
]
185199
},
@@ -406,31 +420,31 @@ var exampleConfig = {
406420
{
407421
name: '时间轴组件',
408422
name_en: 'TimeLine Component',
409-
version: '11.0.0',
423+
version: '10.1.2',
410424
thumbnail: 'components_time_line_vue.png',
411425
fileName: 'components_time_line_vue',
412426
localIgnore: true
413427
},
414428
{
415429
name: '超图大厦历史影像',
416430
name_en: 'Historical image of Chaotu Building',
417-
version: '11.0.0',
431+
version: '10.1.2',
418432
thumbnail: 'components_timeline_supermap.png',
419433
fileName: 'components_timeline_supermap',
420434
localIgnore: true
421435
},
422436
{
423437
name: '气象卫星云图',
424438
name_en: 'Meteorological satellite cloud image',
425-
version: '11.0.0',
439+
version: '10.1.2',
426440
thumbnail: 'components_timeline_cloud.png',
427441
fileName: 'components_timeline_cloud',
428442
localIgnore: true
429443
},
430444
{
431445
name: '幻灯片组件',
432446
name_en: 'Slideshow Component',
433-
version: '11.0.0',
447+
version: '10.1.2',
434448
thumbnail: 'components_slideshow_vue.png',
435449
fileName: 'components_slideshow_vue',
436450
localIgnore: true

‎examples/component/img/components_attributes_vue.png‎

67.2 KB
Loading

‎examples/component/img/components_layer_color_vue.png‎

19.8 KB
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,8 @@ window.examplesResources = {
650650
"title_componentsIdentify_Vue": 'Identify component(Vue)',
651651
"title_componentsPopup_Vue": 'Popup(Vue)',
652652
"title_componentsCoordinateConversion_Vue":"Coordinate Conversion(Vue)",
653+
"title_attributes_Vue":"Attributes(Vue)",
654+
"title_layerColor_Vue":"LayerColor(Vue)",
653655
"title_componentsLayerManager_vue": 'LayerManager component(Vue)',
654656
"title_componentsTimeLineSupermap_Vue": "Historical image of Chaotu Building(Vue)",
655657
"title_componentsTimeLineCloud_Vue": "Meteorological satellite cloud image(Vue)",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -603,6 +603,8 @@ window.examplesResources = {
603603
"title_componentsLayerManager_vue": '图层管理组件',
604604
"title_componentsTimeLine_Vue": "时间轴组件",
605605
"title_componentsCoordinateConversion_Vue":"坐标转换组件",
606+
"title_attributes_Vue":"属性表组件",
607+
"title_layerColor_Vue":"图层颜色组件",
606608
"title_componentsTimeLineSupermap_Vue": "超图大厦历史影像",
607609
"title_componentsTimeLineCloud_Vue": "气象卫星云图",
608610
"title_componentsTimeLineNcp_Vue": "疫情历史回放",

0 commit comments

Comments
 (0)