Skip to content

Commit

Permalink
#485 Image overlay chache works (but is offset badly now)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Feb 1, 2024
1 parent 3f03c6f commit e72b204
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 54 deletions.
4 changes: 1 addition & 3 deletions src/essence/Basics/Layers_/LayerConstructors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1280,9 +1280,7 @@ const imageOverlays = (geojson, layerObj, leafletLayerObject) => {
L.imageTransform(imageSettings.image, anchors, {
opacity: existingOpacity,
clip: anchors,
id: `${layerObj.name}${
imageSettings.image
}${angle}${JSON.stringify(center)}`,
id: `${layerObj.name}_${imageSettings.image}`,
layerName: layerObj.name,
}),
])
Expand Down
2 changes: 1 addition & 1 deletion src/essence/Basics/Layers_/Layers_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2662,7 +2662,7 @@ const L_ = {
} catch (e) {
console.log(e)
console.warn(
'Warning: Unable to update vector layer as the input data is invalid: ' +
'Warning: Unable to update vector layer as the layer or input data is invalid: ' +
layerName
)
return false
Expand Down
26 changes: 26 additions & 0 deletions src/essence/essence.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,6 +507,32 @@ var essence = {
mmgisAPI_.fina(Map_)

stylize()

let offsetI = 0
setInterval(() => {
//return
window.mmgisAPI.updateVectorLayer(
'Waypoints',
{
type: 'Feature',
properties: {
sol: 0,
site: 0,
pos: 0,
yaw_rad: (90 * Math.PI) / 180,
},
geometry: {
type: 'Point',
coordinates: [
137.35500231 + offsetI * 0.00006,
-4.699734,
],
},
},
3
)
offsetI++
}, 5000)
}
},
}
Expand Down
162 changes: 112 additions & 50 deletions src/external/Leaflet/leaflet-imagetransform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,55 +72,81 @@
_imgLoaded: false,
_initImage: function () {
const cache = LImageTransformCache[this.options.id]
if (cache) {
this._image = cache._image
this._imgNode = cache._imgNode
this._canvas = cache._canvas
this._onImageLoad(false)

this._image = L.DomUtil.create('div', 'leaflet-image-layer')

L.DomUtil.addClass(
this._image,
`image_overlays_${this.options.layerName}`
)

if (this._map.options.zoomAnimation && L.Browser.any3d) {
L.DomUtil.addClass(this._image, 'leaflet-zoom-animated')
} else {
this._image = L.DomUtil.create('div', 'leaflet-image-layer')
L.DomUtil.addClass(this._image, 'leaflet-zoom-hide')
}

L.DomUtil.addClass(
this._image,
`image_overlays_${this.options.layerName}`
)
this._imgNode = L.DomUtil.create('img')
if (this.options.clip) {
if (cache?.canvas) {
this._canvas = this._cloneCanvas(cache.canvas)
this._imgNode = cache.imgNode
this._imgNode.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'
this._image.appendChild(this._canvas)

if (this._map.options.zoomAnimation && L.Browser.any3d) {
L.DomUtil.addClass(this._image, 'leaflet-zoom-animated')
} else {
L.DomUtil.addClass(this._image, 'leaflet-zoom-hide')
}
this._clipDone = false

this._imgNode = L.DomUtil.create('img')
if (this.options.clip) {
this._onImageLoad(false)
return
} else {
this._canvas = L.DomUtil.create(
'canvas',
'leaflet-canvas-transform'
)
this._image.appendChild(this._canvas)
this._canvas.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'
this._clipDone = false
} else {
this._image.appendChild(this._imgNode)
this._imgNode.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'

// Hide imgNode until image has loaded
this._imgNode.style.display = 'none'
}
this._canvas.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'
this._image.appendChild(this._canvas)
this._clipDone = false
} else {
this._image.appendChild(this._imgNode)
this._imgNode.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'

this._updateOpacity()

//TODO createImage util method to remove duplication
this._imgLoaded = false
L.extend(this._imgNode, {
galleryimg: 'no',
onselectstart: L.Util.falseFn,
onmousemove: L.Util.falseFn,
onload: L.bind(this._onImageLoad, this),
onerror: L.bind(this._onImageError, this),
src: this._url,
})
// Hide imgNode until image has loaded
this._imgNode.style.display = 'none'
}

/*
if (cacheCanvas) {
this._canvas = this._cloneCanvas(cacheCanvas)
this._image.appendChild(this._canvas)
this._onImageLoad(false)
} else {
this._image.appendChild(this._imgNode)
this._imgNode.style[L.DomUtil.TRANSFORM_ORIGIN] = '0 0'
// Hide imgNode until image has loaded
this._imgNode.style.display = 'none'
this._canvas = L.DomUtil.create(
'canvas',
'leaflet-canvas-transform'
)
*/

this._updateOpacity()

//TODO createImage util method to remove duplication
this._imgLoaded = false
L.extend(this._imgNode, {
galleryimg: 'no',
onselectstart: L.Util.falseFn,
onmousemove: L.Util.falseFn,
onload: L.bind(this._onImageLoad, this),
onerror: L.bind(this._onImageError, this),
src: this._url,
})
//}
},

createImage: function () {},
Expand All @@ -130,18 +156,7 @@
},

_onImageLoad: function (e) {
if (e !== false) {
// cache it
if (this.options.id != null) {
LImageTransformCache[this.options.id] = {
_image: this._image,
_imgNode: this._imgNode,
_canvas: this._canvas,
}
}
}

if (this.options.clip) {
if (e !== false && this.options.clip) {
this._canvas.width = this._imgNode.width
this._canvas.height = this._imgNode.height
} else {
Expand All @@ -152,6 +167,19 @@

this._reset()
this.fire('load')

if (e !== false) {
// cache it
if (
this.options.id != null &&
LImageTransformCache[this.options.id] == null
) {
LImageTransformCache[this.options.id] = {
canvas: this._cloneCanvas(this._drawCanvasCache()),
imgNode: this._imgNode,
}
}
}
},

_reset: function () {
Expand Down Expand Up @@ -243,7 +271,33 @@
}
}
},
_getBase64Image: function (img) {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height

const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)

return canvas.toDataURL('image/png')
},
_cloneCanvas: function (oldCanvas) {
if (oldCanvas == null) return null
//create a new canvas
const newCanvas = document.createElement('canvas')
newCanvas.classList.add('leaflet-canvas-transform')
newCanvas.style = oldCanvas.style
const context = newCanvas.getContext('2d')

//set dimensions
newCanvas.width = oldCanvas.width
newCanvas.height = oldCanvas.height

//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0)
//return the new canvas
return newCanvas
},
_getMatrix3dCSS: function (arr) {
// get CSS atribute matrix3d
var css = 'matrix3d('
Expand Down Expand Up @@ -299,6 +353,14 @@
this._clipDone = true
}
},
_drawCanvasCache: function () {
const canvas = this._cloneCanvas(this._canvas)
const ctx = canvas.getContext('2d')

ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(this._imgNode, 0, 0)
return canvas
},
})

L.imageTransform = function (url, bounds, options) {
Expand Down

0 comments on commit e72b204

Please sign in to comment.