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