Skip to content

Commit e980914

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
add videolayer videomap example
1 parent d15f7b0 commit e980914

File tree

8 files changed

+82
-52
lines changed

8 files changed

+82
-52
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -736,6 +736,7 @@ window.examplesResources = {
736736
"title_websymbol_customWebSymbol": "Custom WebSymbol",
737737
"title_dataAttributes": "Attributes",
738738
"title_videoLayer":"Video Layer",
739+
"title_videoMap":"Video Map",
739740
"title_knowledgeGraphMap": "KnowledgeGraph",
740741
"title_l7_grid_map": "Grid Map",
741742
"title_l7_circular_sweeping_city": "Circular Sweeping City",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,8 @@ window.examplesResources = {
711711
"text_selectStartNode": "捕捉开始节点",
712712
"text_selectEndNode": "捕捉结束节点",
713713
"title_videoLayer":"视频图层",
714-
"title_knowledgeGraphMap": "知识图谱",
714+
"title_videoMap":"视频地图",
715+
"title_knowledgeGraphMap": "知识图谱",
715716
"title_l7_grid_map": "网格地图",
716717
"title_l7_circular_sweeping_city": "圆形扫光城市",
717718
"title_l7_wind": "风场图层",

‎examples/mapboxgl/config.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1848,6 +1848,27 @@ var exampleConfig = {
18481848
fileName: 'l7_rain_particle'
18491849
}
18501850
]
1851+
},
1852+
Video: {
1853+
name: 'Video',
1854+
name_en: 'Video',
1855+
version: '11.2.0',
1856+
content: [
1857+
{
1858+
name: '视频图层',
1859+
name_en: 'VideoLayer',
1860+
version: '11.2.0',
1861+
thumbnail: 'videoLayer.png',
1862+
fileName: 'videoLayer'
1863+
},
1864+
{
1865+
name: '视频地图',
1866+
name_en: 'Video Map',
1867+
version: '11.2.0',
1868+
thumbnail: 'videoMap.png',
1869+
fileName: 'videoMap'
1870+
}
1871+
]
18511872
}
18521873
}
18531874
},

‎examples/mapboxgl/img/videoLayer.png

21.6 KB
Loading

‎examples/mapboxgl/img/videoMap.png

1.12 MB
Loading

‎examples/mapboxgl/videoLayer.html

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<!--********************************************************************
22
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
33
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1/mapbox-gl-enhance.js)
7+
* Turf (https://github.com/Turfjs/turf/)
8+
* proj4js (https://github.com/proj4js/proj4js)
9+
* video.js (https://github.com/videojs/video.js)
10+
* opencv (https://github.com/opencv/opencv)
11+
*********************************************************************-->
412
<!DOCTYPE html>
513
<html>
614
<head>
@@ -29,15 +37,13 @@
2937
src="../../dist/mapboxgl/include-mapboxgl.js"
3038
></script>
3139
<script type="text/javascript">
32-
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3340
var map,
34-
videoLayer,
35-
url = host + '/iserver/services/map-world/rest/maps/World';
41+
videoLayer;
3642
var attribution =
3743
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
3844
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
3945
" 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.14.199:8090/iserver/services/data-demo-3/rest/data';
46+
var dataUrl = 'https://iserver.supermap.io/iserver/services/data-video/rest/data';
4147
var datasourceName = 'VideoData';
4248
var datasetName = 'DJI_0937_2';
4349
var map = new mapboxgl.Map({
@@ -50,7 +56,7 @@
5056
type: 'raster',
5157
tileSize: 256,
5258
tiles: [
53-
'https://t4.tianditu.gov.cn/vec_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
59+
'https://t4.tianditu.gov.cn/img_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
5460
]
5561
}
5662
},
@@ -64,6 +70,7 @@
6470
}
6571
]
6672
},
73+
center: [104.09380813215542, 30.529008613830903],
6774
zoom: 14
6875
});
6976
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
@@ -85,29 +92,30 @@
8592
coordinates.push(res);
8693
});
8794
});
88-
let cc = coordinates[1];
89-
map.setCenter(cc);
90-
let address = serviceResult.result.features.features[0].properties.address;
95+
var url = serviceResult.result.features.features[0].properties.address;
96+
var cameraLocation = serviceResult.result.features.features[0].properties.cameraLocation;
97+
var calibrationModel = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].calibrationModel;
98+
var clipRegionPoints = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].clipRegion.points;
9199
videoLayer = new mapboxgl.supermap.VideoLayer({
92-
url: address,
100+
url,
93101
extent: [coordinates[3], coordinates[2], coordinates[1], coordinates[0]],
94102
videoParameters: {
95-
fovX: 84,
96-
fovY: 47,
97-
centerX: 960,
98-
centerY: 540,
99-
pitch: -20,
100-
roll: 0,
101-
yaw: 2,
102-
x: 11587478.810629973,
103-
y: 3570800.195541344,
104-
z: 154.50312
103+
fovX: calibrationModel.fovX,
104+
fovY: calibrationModel.fovY,
105+
centerX: calibrationModel.centerX,
106+
centerY: calibrationModel.centerY,
107+
pitch:cameraLocation.cameraPitch,
108+
roll: cameraLocation.cameraRoll,
109+
yaw: cameraLocation.cameraYaw,
110+
x: cameraLocation.cameraX,
111+
y: cameraLocation.cameraY,
112+
z: cameraLocation.cameraZ
105113
},
106114
clipRegion: [
107-
[0, 0],
108-
[1920, 0],
109-
[1920, 900],
110-
[0, 900]
115+
[clipRegionPoints[0].x, clipRegionPoints[0].y],
116+
[clipRegionPoints[1].x, clipRegionPoints[1].y],
117+
[clipRegionPoints[2].x, clipRegionPoints[2].y],
118+
[clipRegionPoints[3].x, clipRegionPoints[3].y]
111119
]
112120
});
113121
map.addLayer(videoLayer);

‎examples/mapboxgl/videoMap.html

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
<!--********************************************************************
22
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
33
*********************************************************************-->
4+
<!--********************************************************************
5+
* 该示例需要引入
6+
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1/mapbox-gl-enhance.js)
7+
* Turf (https://github.com/Turfjs/turf/)
8+
* proj4js (https://github.com/proj4js/proj4js)
9+
* video.js (https://github.com/videojs/video.js)
10+
* opencv (https://github.com/opencv/opencv)
11+
*********************************************************************-->
412
<!DOCTYPE html>
513
<html>
614
<head>
715
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8-
<title data-i18n="resources.title_videoLayer"></title>
16+
<title data-i18n="resources.title_videoMap"></title>
917
<style type="text/css">
1018
body {
1119
margin: 0;
@@ -29,15 +37,13 @@
2937
src="../../dist/mapboxgl/include-mapboxgl.js"
3038
></script>
3139
<script type="text/javascript">
32-
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
3340
var map,
34-
videoLayer,
35-
url = host + '/iserver/services/map-world/rest/maps/World';
41+
videoLayer;
3642
var attribution =
3743
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
3844
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
3945
" 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.14.199:8090/iserver/services/data-demo-3/rest/data';
46+
var dataUrl = 'https://iserver.supermap.io/iserver/services/data-video/rest/data';
4147
var datasourceName = 'VideoData';
4248
var datasetName = 'DJI_0937_2';
4349
var count = 0;
@@ -75,22 +81,6 @@
7581
paint: {
7682
'text-color': 'black'
7783
}
78-
// layout: {
79-
// // 'icon-image': 'ro-communal-4',
80-
// // 'icon-allow-overlap': true,
81-
// // 'icon-text-fit': 'both',
82-
// // 'text-offset': [-1, -1],
83-
// // 'text-anchor': 'bottom',
84-
// 'text-field': '{NAME}',
85-
// 'text-size': 16
86-
// },
87-
// paint: {
88-
// 'text-color': 'hsl(0, 0%, 0%)',
89-
// 'text-opacity': 1,
90-
// 'text-halo-color': 'hsl(0, 0%, 100%)',
91-
// 'text-halo-width': 1,
92-
// 'text-halo-blur': 1
93-
// }
9484
});
9585
} else if (features.features[0].geometry.type === 'LineString') {
9686
if (dstName === 'Road_L') {
@@ -199,7 +189,6 @@
199189
});
200190

201191
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
202-
console.log('serviceResult', serviceResult);
203192
var url = serviceResult.result.features.features[0].properties.address;
204193
var cameraLocation = serviceResult.result.features.features[0].properties.cameraLocation;
205194
var calibrationModel = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].calibrationModel;
@@ -227,15 +216,13 @@
227216
});
228217

229218
videoMap.on('load', function () {
230-
console.log('videoMap', videoMap);
231219
var datasetList = ['POI', 'Road_L', 'Water', '写字楼', '学校', '步行道'];
232220
datasetList.forEach((name) => {
233221
query1(name);
234222
});
235223
});
236224
});
237225
}
238-
239226
query();
240227
</script>
241228
</body>

‎src/mapboxgl/overlay/VideoLayer.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
});
118118
let maxX = 0;
119119
let maxY = 0;
120-
if (bbox) {
120+
if (bbox && !this.allContained) {
121121
let pixelLeftBottom = this.map.project([bbox[0], bbox[1]]);
122122
let pixelRightTop = this.map.project([bbox[2], bbox[3]]);
123123
maxX = Math.min(Math.abs(minX - pixelLeftBottom.x), Math.abs(minX - pixelRightTop.x));
@@ -148,7 +148,6 @@
148148
[...this.extent, this.extent[0]]
149149
]);
150150
const result = bbox(poly);
151-
152151
let that = this;
153152
let realHeight = this.videoHeight;
154153
let srcPixelCoords = [0, 0, that.videoWidth, 0, that.videoWidth, that.videoHeight, 0, that.videoHeight];
@@ -169,10 +168,14 @@
169168
this._initParameters(this.videoParameters).then((coordTransfer) => {
170169
this.coordTransfer = coordTransfer;
171170
let latlng = [];
171+
this.allContained = true;
172172
temp.forEach((point) => {
173173
let coord = this.coordTransfer.toSpatialCoordinate(point);
174174
let tcoord = [coord[0], coord[1]];
175175
const pcoord = proj4('EPSG:3857', 'EPSG:4326', tcoord);
176+
if (!this._contain(pcoord, result)) {
177+
this.allContained = false;
178+
}
176179
latlng.push(pcoord);
177180
});
178181
let originBounds = [];
@@ -234,8 +237,13 @@
234237
let dst = new that.cv.Mat();
235238
let M = that.cv.findHomography(srcTri, dstTri);
236239
that.cv.warpPerspective(src, dst, M, that.dsize);
237-
dst.copyTo(dst1, clipMat);
238-
let newFrame = new ImageData(new Uint8ClampedArray(dst1.data), dst1.cols, dst1.rows);
240+
let newFrame;
241+
if (that.allContained) {
242+
newFrame = new ImageData(new Uint8ClampedArray(dst.data), dst.cols, dst.rows);
243+
} else {
244+
dst.copyTo(dst1, clipMat);
245+
newFrame = new ImageData(new Uint8ClampedArray(dst1.data), dst1.cols, dst1.rows);
246+
}
239247
src.delete();
240248
dst.delete();
241249
M.delete();
@@ -258,6 +266,10 @@
258266
);
259267
});
260268
}
269+
270+
_contain(coord, bounds) {
271+
return coord[0] >= bounds[0] && coord[0] <= bounds[2] && coord[1] >= bounds[1] && coord[1] <= bounds[3];
272+
}
261273

262274
/**
263275
* @function VideoLayer.prototype.moveLayer

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