Skip to content

Commit 6dcb349

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
新增 videoLayer 示例及各端测试示例
1 parent 34cd4c3 commit 6dcb349

7 files changed

Lines changed: 387 additions & 0 deletions

File tree

‎examples/leaflet/testVideoStreamService.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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>测试视频流服务</title>
9+
<script type="text/javascript" src="../js/include-web.js"></script>
10+
</head>
11+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
12+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
13+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
16+
var url = host + '/iserver/services/data-world/rest/data';
17+
queryVideoByBounds();
18+
queryVideoBySQL();
19+
queryVideoByTime();
20+
21+
function queryVideoByBounds() {
22+
var polygon = L.polygon(
23+
[
24+
[-20, 20],
25+
[0, 20],
26+
[0, 40],
27+
[-20, 40],
28+
[-20, 20]
29+
],
30+
{ color: 'red' }
31+
);
32+
polygon.addTo(map);
33+
var boundsParam = new L.supermap.GetFeaturesByBoundsParameters({
34+
datasetNames: ['World:Capitals'],
35+
bounds: polygon.getBounds()
36+
});
37+
new L.supermap.FeatureService(url).getFeaturesByBounds(boundsParam).then(function (serviceResult) {
38+
console.log('serviceResult.result.features', serviceResult.result.features);
39+
});
40+
}
41+
42+
function queryVideoBySQL() {
43+
var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
44+
queryParameter: {
45+
name: 'Countries@World',
46+
attributeFilter: 'SMID = 234'
47+
},
48+
datasetNames: ['World:Countries']
49+
});
50+
new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
51+
console.log('serviceResult.result.features', serviceResult.result.features);
52+
});
53+
}
54+
55+
function queryVideoByTime() {
56+
var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
57+
queryParameter: {
58+
name: 'Countries@World',
59+
attributeFilter: 'SMID = 234'
60+
},
61+
datasetNames: ['World:Countries']
62+
});
63+
new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
64+
console.log('serviceResult.result.features', serviceResult.result.features);
65+
});
66+
}
67+
</script>
68+
</body>
69+
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -735,6 +735,7 @@ window.examplesResources = {
735735
"title_websymbol_landuse": "Land Use",
736736
"title_websymbol_customWebSymbol": "Custom WebSymbol",
737737
"title_dataAttributes": "Attributes",
738+
"title_videoLayer":"Video Layer",
738739

739740
"text_graphmap_shortest_analysis": "Shortest Path Analysis",
740741
"text_startNode": "start node:",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -697,6 +697,7 @@ window.examplesResources = {
697697
"text_analysis": "分析",
698698
"text_selectStartNode": "捕捉开始节点",
699699
"text_selectEndNode": "捕捉结束节点",
700+
"title_videoLayer":"视频图层",
700701

701702
"text_district_search": "行政区检索",
702703
"text_rectangle_search": "矩形检索",

‎examples/mapboxgl/testVideoStreamService.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
9+
<title>测试视频推流服务</title>
10+
<script type="text/javascript" src="../js/include-web.js"></script>
11+
<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
12+
<style>
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#map {
19+
position: absolute;
20+
top: 0;
21+
bottom: 0;
22+
width: 100%;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<script>
28+
var dataUrl =
29+
(window.isLocal ? window.server : 'https://iserver.supermap.io') + '/iserver/services/data-China400/rest/data';
30+
queryVideoByBounds();
31+
queryVideoBySQL();
32+
queryVideoByTime();
33+
34+
function queryVideoByBounds() {
35+
var sw = new mapboxgl.LngLat(-180, -60);
36+
var ne = new mapboxgl.LngLat(180, 60);
37+
var lngLatBounds = new mapboxgl.LngLatBounds(sw, ne);
38+
39+
var boundsParam = new mapboxgl.supermap.GetFeaturesByBoundsParameters({
40+
datasetNames: ['China:Airport_pt'],
41+
bounds: lngLatBounds
42+
});
43+
44+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesByBounds(boundsParam).then(function (serviceResult) {
45+
console.log('serviceResult.result.features', serviceResult.result.features);
46+
});
47+
}
48+
49+
function queryVideoBySQL() {
50+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
51+
queryParameter: {
52+
name: 'Countries@World',
53+
attributeFilter: 'SMID = 234'
54+
},
55+
datasetNames: ['World:Countries']
56+
});
57+
58+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
59+
console.log('serviceResult.result.features', serviceResult.result.features);
60+
});
61+
}
62+
63+
function queryVideoByTime() {
64+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
65+
queryParameter: {
66+
name: 'Countries@World',
67+
attributeFilter: 'SMID = 234'
68+
},
69+
datasetNames: ['World:Countries']
70+
});
71+
72+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
73+
console.log('serviceResult.result.features', serviceResult.result.features);
74+
});
75+
}
76+
</script>
77+
</body>
78+
</html>

‎examples/mapboxgl/videoLayer.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8+
<title data-i18n="resources.title_videoLayer"></title>
9+
<style type="text/css">
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#map {
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="map"></div>
25+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
26+
<script
27+
type="text/javascript"
28+
include="mapbox-gl-enhance,proj4,turf,opencv"
29+
src="../../dist/mapboxgl/include-mapboxgl.js"
30+
></script>
31+
<script type="text/javascript">
32+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
33+
var map,
34+
videoLayer,
35+
url = host + '/iserver/services/map-world/rest/maps/World';
36+
var attribution =
37+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
38+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
39+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
40+
var dataUrl = 'http://172.16.13.234:8090/iserver/services/data-test0104/rest/data';
41+
var datasourceName = 'NewDatasource';
42+
var datasetName = 'aaa';
43+
var map = new mapboxgl.Map({
44+
container: 'map',
45+
renderWorldCopies: false,
46+
style: {
47+
version: 8,
48+
sources: {
49+
'raster-tiles': {
50+
attribution: attribution,
51+
type: 'raster',
52+
tiles: [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
53+
tileSize: 256
54+
}
55+
},
56+
layers: [
57+
{
58+
id: 'simple-tiles',
59+
type: 'raster',
60+
source: 'raster-tiles',
61+
minzoom: 0,
62+
maxzoom: 9
63+
}
64+
]
65+
},
66+
center: [116.14734767029731, 28.320871401184714],
67+
zoom: 16
68+
});
69+
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
70+
map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
71+
function query() {
72+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
73+
queryParameter: {
74+
name: datasetName + '@' + datasourceName,
75+
attributeFilter: 'SMID > 0'
76+
},
77+
datasetNames: [datasourceName + ':' + datasetName]
78+
});
79+
80+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(boundsParam).then(function (serviceResult) {
81+
let coordinates = [];
82+
turf.featureEach(serviceResult.result.features, function (currentFeature, featureIndex) {
83+
currentFeature.geometry.coordinates[0][0].forEach((coord) => {
84+
const res = proj4('EPSG:3857', 'EPSG:4326', coord);
85+
coordinates.push(res);
86+
});
87+
});
88+
let address = serviceResult.result.features.features[0].properties.address;
89+
videoLayer = new mapboxgl.supermap.VideoLayer({
90+
url: address,
91+
extent: [coordinates[3], coordinates[2], coordinates[1], coordinates[0]]
92+
});
93+
map.addLayer(videoLayer);
94+
});
95+
}
96+
map.on('load', function () {
97+
query();
98+
});
99+
</script>
100+
</body>
101+
</html>

‎examples/maplibregl/testVideoStreamService.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
9+
<title>测试视频推流服务</title>
10+
<script type="text/javascript" src="../js/include-web.js"></script>
11+
<script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
12+
<style>
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#map {
19+
position: absolute;
20+
top: 0;
21+
bottom: 0;
22+
width: 100%;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<script>
28+
var dataUrl =
29+
(window.isLocal ? window.server : 'https://iserver.supermap.io') + '/iserver/services/data-China400/rest/data';
30+
queryVideoByBounds();
31+
queryVideoBySQL();
32+
queryVideoByTime();
33+
34+
function queryVideoByBounds() {
35+
var sw = new maplibregl.LngLat(-180, -60);
36+
var ne = new maplibregl.LngLat(180, 60);
37+
var lngLatBounds = new maplibregl.LngLatBounds(sw, ne);
38+
39+
var boundsParam = new maplibregl.supermap.GetFeaturesByBoundsParameters({
40+
datasetNames: ['China:Airport_pt'],
41+
bounds: lngLatBounds
42+
});
43+
44+
new maplibregl.supermap.FeatureService(dataUrl).getFeaturesByBounds(boundsParam).then(function (serviceResult) {
45+
console.log('serviceResult.result.features', serviceResult.result.features);
46+
});
47+
}
48+
49+
function queryVideoBySQL() {
50+
var sqlParam = new maplibregl.supermap.GetFeaturesBySQLParameters({
51+
queryParameter: {
52+
name: 'Countries@World',
53+
attributeFilter: 'SMID = 234'
54+
},
55+
datasetNames: ['World:Countries']
56+
});
57+
58+
new maplibregl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
59+
console.log('serviceResult.result.features', serviceResult.result.features);
60+
});
61+
}
62+
63+
function queryVideoByTime() {
64+
var sqlParam = new maplibregl.supermap.GetFeaturesBySQLParameters({
65+
queryParameter: {
66+
name: 'Countries@World',
67+
attributeFilter: 'SMID = 234'
68+
},
69+
datasetNames: ['World:Countries']
70+
});
71+
72+
new maplibregl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
73+
console.log('serviceResult.result.features', serviceResult.result.features);
74+
});
75+
}
76+
</script>
77+
</body>
78+
</html>

0 commit comments

Comments
 (0)