constructor(options) {

super();

var _options = options ? options : {};

this.options = _options;

this.url = this.options.url;

this.extent = this.options.extent;

this.clipRegion = this.options.clipRegion || [];

this.videoParameters = this.options.videoParameters;

this.interval = this.options.interval || 0.1;

this.cv = this.options.opencv || window.cv;

if (!this.cv) {

throw new Error('opencv.js instance is not existed!');

}

if (!this.videoParameters) {

throw new Error('videoParameters must be set!');

}

this.id = _options.id ? _options.id : CommonUtil.createUniqueID("VideoLayer_");

this.layerId = this.id + '_outer';

this.type = 'custom';

this.renderingMode = '3d';

this.overlay = true;

this.beginIndex = 0;

if (Array.isArray(this.videoParameters)) {

this.videoParameters = smartTimeProcessor(this.interval, this.videoParameters, ['yaw', 'pitch', 'roll', 'x', 'y', 'z', 'extent']);

const timeArr = this.videoParameters.map((item) => {

return item.time;

})

this.beginIndex = timeArr[0];

this.finder = new FastRangeSearcher(timeArr);

}

}

/**

onAdd(map) {

this.map = map;

this.renderer = new VideoLayerRenderer({ url: this.url, id: this.layerId });

this.video = this.renderer.createVideo();

this.videoDomId = this.renderer.getVideoDomId();

this.video.one('firstplay', () => {

this.video.play();

});

this.video.one('canplay', () => {

this.videoWidth = this.video.videoWidth();

this.videoHeight = this.video.videoHeight();

if (!Array.isArray(this.videoParameters)) {

this.videoParameters = [this.videoParameters];

}

this._initParameters(this.videoParameters[0]).then((coordTransfer) => {

this.coordTransfer = coordTransfer;

this.timeParams = {};

this.videoParameters.forEach((dataItem) => {

const { pitch, roll, yaw, x, y, z, fovX, fovY, centerX, centerY } = dataItem;

const time = dataItem.time || 0;

this.timeParams[time] = {}

let fx = fovXToFx(fovX, this.videoWidth);

let fy = fovYToFy(fovY, this.videoHeight);

this.coordTransfer.setCameraLocation({

pitch, roll, yaw, x, y, z, fx, fy, centerX, centerY

});

const extent = dataItem.extent || this.extent;

const formatExtent = extent.map((item) => {

if (Array.isArray(item)) {

return item;

}

return [item.x, item.y];

});

const poly = polygon([

[...formatExtent, formatExtent[0]]

]);

const result = bbox(poly);

this.timeParams[time].result = result;

let latlng = [];

this.timeParams[time].allContained = true;

let that = this;

let temp = [[0, 0], [that.videoWidth, 0], [that.videoWidth, that.videoHeight], [0, that.videoHeight]];

let realHeight = this.videoHeight;

if (this.clipRegion.length) {

temp = this.clipRegion;

realHeight = this.clipRegion[2][1] - this.clipRegion[0][1];

}

this.timeParams[time].realHeight = realHeight;

temp.forEach((point) => {

let coord = this.coordTransfer.toSpatialCoordinate(point);

let tcoord = [coord[0], coord[1]];

const pcoord = proj4('EPSG:3857', 'EPSG:4326', tcoord);

if (!this._contain(pcoord, result)) {

this.timeParams[time].allContained = false;

}

latlng.push(pcoord);

});

let originBounds = [];

formatExtent.forEach((coord) => {

let res = map.project(coord);

originBounds.push(res.x);

originBounds.push(res.y);

});

this.timeParams[time].extent = formatExtent;

let pointCoords = []

latlng.forEach((item) => {

let result = map.project(item);

pointCoords.push(result.x);

pointCoords.push(result.y);

});

let br = map.project([result[2], result[3]]);

let tl = map.project([result[0], result[1]]);

let size = [Math.abs(br.x - tl.x), Math.abs(br.y - tl.y)];

let ratio = size[0] / size[1];

this.timeParams[time].ratio = ratio;

this.timeParams[time].dsize = new this.cv.Size(realHeight * ratio, realHeight);

let realX = realHeight * ratio;

let realY = realHeight;

let ratioX = realX / size[0];

let ratioY = realY / size[1];

let realRatio = Math.min(ratioX, ratioY);

pointCoords = this._getPixelBbox(pointCoords, result, this.timeParams[time].allContained);

pointCoords = pointCoords.map((item) => {

return item * realRatio;

});

originBounds = this._getPixelBbox(originBounds);

this.timeParams[time].originBounds = originBounds.map((item) => {

return item * realRatio;

});

let dstTri = this.cv.matFromArray(4, 1, this.cv.CV_32FC2, pointCoords);

this.timeParams[time].dstTri = dstTri;

})

this._addVideoLayer(this.map);

})

});

}

render() { }

_getPixelBbox(bounds, bbox, allContained = true) {

let minX = 0;

let minY = 0;

bounds.forEach((item, index) => {

if ((!minX || item < minX) && index % 2 === 0) {

minX = item;

}

if ((!minY || item < minY) && index % 2 !== 0) {

minY = item;

}

});

let maxX = 0;

let maxY = 0;

if (bbox && !allContained) {

let pixelLeftBottom = this.map.project([bbox[0], bbox[1]]);

let pixelRightTop = this.map.project([bbox[2], bbox[3]]);

maxX = Math.min(Math.abs(minX - pixelLeftBottom.x), Math.abs(minX - pixelRightTop.x));

maxY = Math.max(Math.abs(minY - pixelLeftBottom.y), Math.abs(minY - pixelRightTop.y));

}

bounds = bounds.map((item, index) => {

if (index % 2 === 0) {

return item - minX - maxX;

} else {

return item - minY + maxY;

}

});

return bounds;

}

_initParameters(parameters) {

if (parameters && !Object.keys(parameters).length) {

return;

}

parameters.fx = fovXToFx(parameters.fovX, this.videoWidth);

parameters.fy = fovYToFy(parameters.fovY, this.videoHeight);

return new CoordTransfer(this.cv, parameters).init();

}

_addVideoLayer(map) {

let url = this.videoDomId || this.url;

const extent = this.extent || this.timeParams[0].extent;

const poly = polygon([

[...extent, extent[0]]

]);

let result = bbox(poly);

let that = this;

let srcPixelCoords = [0, 0, that.videoWidth, 0, that.videoWidth, that.videoHeight, 0, that.videoHeight];

if (this.clipRegion.length) {

srcPixelCoords = [];

this.clipRegion.forEach((coord) => {

srcPixelCoords.push(coord[0]);

srcPixelCoords.push(coord[1]);

});

}

let srcTri = this.cv.matFromArray(4, 1, this.cv.CV_32FC2,

srcPixelCoords

);

that.dsize = that.timeParams[that.beginIndex].dsize;

let dstTri = that.timeParams[that.beginIndex].dstTri;

let canvas = document.createElement('canvas');

let { clipMat, dst1 } = this._updateMask(canvas, that.timeParams[that.beginIndex].realHeight, that.timeParams[that.beginIndex].ratio);

let count = 0;

const videoEle = this.video.tech().el();

let current = 0;

if (this.videoParameters.length > 1 && videoEle && videoEle.requestVideoFrameCallback) {

const updateCanvas = (now, metadata) => {

current = metadata.mediaTime;

videoEle.requestVideoFrameCallback(updateCanvas);

};

videoEle.requestVideoFrameCallback(updateCanvas);

}

map.addSource(this.layerId, {

type: 'video',

urls: [url],

drawImageCallback(frame) {

if (that.videoParameters.length > 1) {

let time = current || that.video.currentTime();

let res = that.finder.findNearest(time);

if (res) {

count = res.value;

}

if (count) {

let curData = that.timeParams[count];

count = 0;

if (curData) {

that.dsize = curData.dsize;

dstTri = curData.dstTri;

result = curData.result;

setTimeout(() => {

that.map.getSource(that.layerId).setCoordinates([

[result[0], result[3]],

[result[2], result[3]],

[result[2], result[1]],

[result[0], result[1]]

])

}, 0);

}

}

}

let src = that.cv.matFromImageData(frame);

let dst = new that.cv.Mat();

let M = that.cv.findHomography(srcTri, dstTri);

that.cv.warpPerspective(src, dst, M, that.dsize);

let newFrame;

if (that.timeParams[count].allContained) {

newFrame = new ImageData(new Uint8ClampedArray(dst.data), dst.cols, dst.rows);

} else {

if (that.videoParameters.length > 1) {

const res = that._updateMask(canvas, that.timeParams[that.beginIndex].realHeight, that.timeParams[that.beginIndex].ratio);

clipMat = res.clipMat;

dst1 = res.dst1;

}

dst.copyTo(dst1, clipMat);

newFrame = new ImageData(new Uint8ClampedArray(dst1.data), dst1.cols, dst1.rows);

}

src.delete();

dst.delete();

M.delete();

return newFrame;

},

coordinates: [

[result[0], result[3]],

[result[2], result[3]],

[result[2], result[1]],

[result[0], result[1]]

]

});

map.addLayer(

{

id: this.layerId,

type: 'raster',

source: this.layerId,

paint: {

'raster-fade-duration': 0

}

}

);

const source = map.getSource(this.layerId);

if (source) {

source.play();

}

}

_updateMask(canvas, realHeight, ratio) {

canvas.width = realHeight * ratio;

canvas.height = realHeight;

let context = canvas.getContext('2d');

context.beginPath();

this.timeParams[0].originBounds.forEach((coord, index) => {

if (index === 0) {

context.moveTo(coord, this.timeParams[0].originBounds[index + 1]);

}

if (index % 2 === 0) {

context.lineTo(coord, this.timeParams[0].originBounds[index + 1]);

}

});

context.closePath();

context.fillStyle = '#ffffff';

context.fill();

let imgData = context.getImageData(0, 0, canvas.width, canvas.height);

let clipMat = this.cv.matFromImageData(imgData);

let dst1 = new this.cv.Mat();

return { clipMat, dst1 };

}

_contain(coord, bounds) {

return (coord[0] > bounds[0] || Math.abs(coord[0] - bounds[0]) < 0.000001 ) && (coord[0] < bounds[2] || Math.abs(coord[0] - bounds[2]) < 0.000001 ) && (coord[1] > bounds[1] || Math.abs(coord[1] - bounds[1]) < 0.000001) && (coord[1] < bounds[3] || Math.abs(coord[1] - bounds[3]) < 0.000001);

}

/**

moveLayer(beforeId) {

this.map.moveLayer(this.layerId, beforeId);

}

/**

setVisibility(visibility) {

const visible = visibility ? 'visible' : 'none';

this.map.setLayoutProperty(this.layerId, 'visibility', visible);

}