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)