Skip to content

Commit 380f5da

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
新增属性表示例
1 parent f04fb12 commit 380f5da

File tree

15 files changed

+618
-1
lines changed

15 files changed

+618
-1
lines changed

‎examples/js/include-web.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,9 @@
215215
inputScript(libsurl + '/viewer-js/viewer.min.js');
216216
inputCSS(libsurl + '/viewer-js/css/viewer.css');
217217
}
218+
if (inArray(includes, 'jquery-twbsPagination')) {
219+
inputScript(libsurl + '/jquery.twbsPagination/1.4.2/jquery.twbsPagination.min.js');
220+
}
218221
}
219222

220223
function datGuiI18N() {

‎examples/leaflet/02_attributes.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 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_dataAttributes"></title>
9+
<script type="text/javascript" include="jquery,bootstrap,jquery-twbsPagination" src="../js/include-web.js"></script>
10+
<style>
11+
.attribute-container {
12+
position: absolute;
13+
bottom: 0px;
14+
left: 0px;
15+
width: 100%;
16+
background: #fff;
17+
z-index: 1000;
18+
}
19+
#pagination-demo {
20+
float: right;
21+
margin: 0;
22+
padding-right: 20px;
23+
padding-bottom: 20px;
24+
}
25+
</style>
26+
</head>
27+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
28+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
29+
<div class="attribute-container">
30+
<table class="table table-bordered">
31+
<thead>
32+
<tr class="header"></tr>
33+
</thead>
34+
<tbody class="tbody"></tbody>
35+
</table>
36+
<ul id="pagination-demo" class="pagination-sm"></ul>
37+
</div>
38+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
39+
<script type="text/javascript">
40+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
41+
var map,
42+
baseUrl = host + '/iserver/services/map-world/rest/maps/World',
43+
url = host + '/iserver/services/data-world/rest/data';
44+
var datasSource = 'World';
45+
var dataset = 'Countries';
46+
var pageSize = 8;
47+
var totalCount;
48+
var fieldInfos;
49+
var fieldList = [];
50+
map = L.map('map', {
51+
preferCanvas: true,
52+
crs: L.CRS.EPSG4326,
53+
center: { lon: 0, lat: 0 },
54+
maxZoom: 18,
55+
zoom: 1
56+
});
57+
new L.supermap.TiledMapLayer(baseUrl).addTo(map);
58+
query();
59+
60+
function query() {
61+
var sqlParam1 = new L.supermap.GetFeaturesBySQLParameters({
62+
queryParameter: {
63+
name: dataset + '@' + datasSource
64+
},
65+
datasetNames: [datasSource + ':' + dataset]
66+
});
67+
68+
new L.supermap.FeatureService(url).getFeaturesCount(sqlParam1).then(function (serviceResult) {
69+
totalCount = serviceResult.result.totalCount;
70+
var totalPages = Math.ceil(totalCount / pageSize);
71+
$('#pagination-demo').twbsPagination({
72+
totalPages: totalPages,
73+
visiblePages: 7,
74+
first: resources.text_firstPage,
75+
prev: resources.text_prevPage,
76+
next: resources.text_nextPage,
77+
last: resources.text_lastPage,
78+
onPageClick: function (event, page) {
79+
$('#page-content').text('Page ' + page);
80+
var fromIndex = (page - 1) * pageSize;
81+
var toIndex = page * pageSize - 1;
82+
getFeature(fromIndex, toIndex);
83+
}
84+
});
85+
86+
new L.supermap.FeatureService(url).getFeaturesDatasetInfo(sqlParam1).then(function (serviceResult) {
87+
fieldInfos = serviceResult.result[0].fieldInfos;
88+
fieldInfos.forEach((fieldInfo) => {
89+
var th = document.createElement('th');
90+
var field = fieldInfo.name;
91+
fieldList.push(field);
92+
th.innerHTML = fieldInfo.caption || fieldInfo.name;
93+
document.querySelector('.header').appendChild(th);
94+
});
95+
getFeature(0, pageSize - 1);
96+
});
97+
});
98+
}
99+
100+
function getFeature(fromIndex, toIndex) {
101+
var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
102+
queryParameter: {
103+
name: dataset + '@' + datasSource,
104+
attributeFilter: 'SMID > 0'
105+
},
106+
fromIndex,
107+
toIndex,
108+
datasetNames: [datasSource + ':' + dataset],
109+
returnFeaturesOnly: true
110+
});
111+
new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
112+
var tbody = document.querySelector('.tbody');
113+
tbody.innerHTML = '';
114+
serviceResult.result.features.features.forEach((feature) => {
115+
var tr = document.createElement('tr');
116+
var props = feature.properties;
117+
fieldList.forEach((field) => {
118+
var td = document.createElement('td');
119+
td.innerHTML = props[field.toUpperCase()];
120+
tr.appendChild(td);
121+
});
122+
tbody.appendChild(tr);
123+
});
124+
});
125+
}
126+
</script>
127+
</body>
128+
</html>

‎examples/leaflet/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,16 @@ var exampleConfig = {
205205
{
206206
name: "要素编辑",
207207
name_en: "draw and edit features",
208+
version: '11.2.0',
208209
thumbnail: "drawAndEditFeatures.png",
209210
fileName: "drawAndEditFeatures"
211+
},
212+
{
213+
name: "属性表",
214+
name_en: "attributes",
215+
version: '11.2.0',
216+
thumbnail: "attributes.png",
217+
fileName: "02_attributes"
210218
}]
211219
},
212220
"theme": {

‎examples/leaflet/img/attributes.png‎

63 KB
Loading

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -728,6 +728,7 @@ window.examplesResources = {
728728
"title_websymbol_landuseOfJingjin": "Land Use of Jingjin",
729729
"title_websymbol_landuse": "Land Use",
730730
"title_websymbol_customWebSymbol": "Custom WebSymbol",
731+
"title_dataAttributes": "Attributes",
731732

732733
"text_district_search": "Administrative region search",
733734
"text_rectangle_search": "Rectangle retrieval",
@@ -1593,6 +1594,10 @@ window.examplesResources = {
15931594
"text_attributes": "Attributes",
15941595
"text_isQuerying": "Querying...",
15951596
"text_queryEmpty": "Query Empty",
1597+
"text_firstPage": "First",
1598+
"text_prevPage": "Prev",
1599+
"text_nextPage": "Next",
1600+
"text_lastPage": "Last",
15961601

15971602
"btn_previous":"Previous",
15981603
"btn_next":"Next",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -683,6 +683,7 @@ window.examplesResources = {
683683
"title_websymbol_landuse": "土地利用",
684684
"title_websymbol_customWebSymbol":"自定义Web符号",
685685
"title_editFeatures": "编辑要素",
686+
"title_dataAttributes": "属性表",
686687

687688
"text_district_search": "行政区检索",
688689
"text_rectangle_search": "矩形检索",
@@ -1546,6 +1547,10 @@ window.examplesResources = {
15461547
"text_attributes": "物标属性",
15471548
"text_isQuerying": "查询中...",
15481549
"text_queryEmpty": "查询为空",
1550+
"text_firstPage": "首页",
1551+
"text_prevPage": "上一页",
1552+
"text_nextPage": "下一页",
1553+
"text_lastPage": "尾页",
15491554

15501555

15511556

‎examples/mapboxgl/02_attributes.html‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 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_dataAttributes"></title>
9+
<script type="text/javascript" include="jquery,bootstrap,jquery-twbsPagination" src="../js/include-web.js"></script>
10+
<style>
11+
.attribute-container {
12+
position: absolute;
13+
bottom: 0px;
14+
left: 0px;
15+
width: 100%;
16+
background: #fff;
17+
z-index: 1000;
18+
}
19+
#pagination-demo {
20+
float: right;
21+
margin: 0;
22+
padding-right: 20px;
23+
padding-bottom: 20px;
24+
}
25+
</style>
26+
</head>
27+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
28+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
29+
<div class="attribute-container">
30+
<table class="table table-bordered">
31+
<thead>
32+
<tr class="header"></tr>
33+
</thead>
34+
<tbody class="tbody"></tbody>
35+
</table>
36+
<ul id="pagination-demo" class="pagination-sm"></ul>
37+
</div>
38+
<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
39+
<script type="text/javascript">
40+
var attribution =
41+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
42+
"with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
43+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
44+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
45+
var map,
46+
baseUrl = host + '/iserver/services/map-world/rest/maps/World',
47+
url = host + '/iserver/services/data-world/rest/data';
48+
var datasSource = 'World';
49+
var dataset = 'Countries';
50+
var pageSize = 8;
51+
var totalCount;
52+
var fieldInfos;
53+
var fieldList = [];
54+
map = new mapboxgl.Map({
55+
container: 'map', //div id
56+
style: {
57+
version: 8,
58+
sources: {
59+
'raster-tiles': {
60+
attribution: attribution,
61+
type: 'raster',
62+
tiles: [baseUrl],
63+
tileSize: 256
64+
}
65+
},
66+
layers: [
67+
{
68+
id: 'simple-tiles',
69+
type: 'raster',
70+
source: 'raster-tiles',
71+
maxzoom: 18
72+
}
73+
]
74+
},
75+
center: [120.143, 30.236],
76+
zoom: 3
77+
});
78+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
79+
map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
80+
81+
map.on('load', function () {
82+
query();
83+
});
84+
85+
function query() {
86+
var sqlParam1 = new mapboxgl.supermap.GetFeaturesBySQLParameters({
87+
queryParameter: {
88+
name: dataset + '@' + datasSource
89+
},
90+
datasetNames: [datasSource + ':' + dataset]
91+
});
92+
93+
new mapboxgl.supermap.FeatureService(url).getFeaturesCount(sqlParam1).then(function (serviceResult) {
94+
totalCount = serviceResult.result.totalCount;
95+
var totalPages = Math.ceil(totalCount / pageSize);
96+
$('#pagination-demo').twbsPagination({
97+
totalPages: totalPages,
98+
visiblePages: 7,
99+
first: resources.text_firstPage,
100+
prev: resources.text_prevPage,
101+
next: resources.text_nextPage,
102+
last: resources.text_lastPage,
103+
onPageClick: function (event, page) {
104+
$('#page-content').text('Page ' + page);
105+
var fromIndex = (page - 1) * pageSize;
106+
var toIndex = page * pageSize - 1;
107+
getFeature(fromIndex, toIndex);
108+
}
109+
});
110+
111+
new mapboxgl.supermap.FeatureService(url).getFeaturesDatasetInfo(sqlParam1).then(function (serviceResult) {
112+
fieldInfos = serviceResult.result[0].fieldInfos;
113+
fieldInfos.forEach((fieldInfo) => {
114+
var th = document.createElement('th');
115+
var field = fieldInfo.name;
116+
fieldList.push(field);
117+
th.innerHTML = fieldInfo.caption || fieldInfo.name;
118+
document.querySelector('.header').appendChild(th);
119+
});
120+
getFeature(0, pageSize - 1);
121+
});
122+
});
123+
}
124+
125+
function getFeature(fromIndex, toIndex) {
126+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
127+
queryParameter: {
128+
name: dataset + '@' + datasSource,
129+
attributeFilter: 'SMID > 0'
130+
},
131+
fromIndex,
132+
toIndex,
133+
datasetNames: [datasSource + ':' + dataset],
134+
returnFeaturesOnly: true
135+
});
136+
new mapboxgl.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
137+
var tbody = document.querySelector('.tbody');
138+
tbody.innerHTML = '';
139+
serviceResult.result.features.features.forEach((feature) => {
140+
var tr = document.createElement('tr');
141+
var props = feature.properties;
142+
fieldList.forEach((field) => {
143+
var td = document.createElement('td');
144+
td.innerHTML = props[field.toUpperCase()];
145+
tr.appendChild(td);
146+
});
147+
tbody.appendChild(tr);
148+
});
149+
});
150+
}
151+
</script>
152+
</body>
153+
</html>

‎examples/mapboxgl/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,16 @@ var exampleConfig = {
179179
{
180180
name: "要素编辑",
181181
name_en: "draw and edit features",
182+
version: '11.2.0',
182183
thumbnail: "drawAndEditFeatures.png",
183184
fileName: "drawAndEditFeatures"
185+
},
186+
{
187+
name: "属性表",
188+
name_en: "attributes",
189+
version: '11.2.0',
190+
thumbnail: "attributes.png",
191+
fileName: "02_attributes"
184192
}
185193
]
186194
},

‎examples/mapboxgl/img/attributes.png‎

63 KB
Loading

0 commit comments

Comments
 (0)