114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
/**
|
|
* The class CoordinateDisplay shows the coordinates of the center of the sceen
|
|
* in the top left of the renderer.
|
|
*
|
|
* @private
|
|
* @class
|
|
* @extends PIXI.Graphics
|
|
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
|
|
*/
|
|
export class CoordinateDisplay extends PIXI.Graphics {
|
|
/**
|
|
* Creates an instance of a CoordinateDisplay.
|
|
*
|
|
* @constructor
|
|
* @param {MapApp} mapApp - The MapApp where the coordinates should be displayed.
|
|
*/
|
|
constructor(mapApp) {
|
|
super()
|
|
|
|
this.app = mapApp
|
|
|
|
this.crosshair = new PIXI.Graphics()
|
|
|
|
this.outerSize = 15
|
|
this.innerSize = 5
|
|
this.thickness = 2
|
|
this.color = 0xe73230
|
|
|
|
this.crosshair.lineStyle(this.thickness, this.color)
|
|
this.crosshair.moveTo(-this.outerSize, 0)
|
|
this.crosshair.lineTo(-this.innerSize, 0)
|
|
this.crosshair.moveTo(this.innerSize, 0)
|
|
this.crosshair.lineTo(this.outerSize, 0)
|
|
|
|
this.crosshair.moveTo(0, -this.outerSize)
|
|
this.crosshair.lineTo(0, -this.innerSize)
|
|
this.crosshair.moveTo(0, this.innerSize)
|
|
this.crosshair.lineTo(0, this.outerSize)
|
|
|
|
this.text = new PIXI.Text(
|
|
'Pending ...',
|
|
new PIXI.TextStyle({
|
|
fontFamily: 'Arial',
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
fill: '#f6f6f6',
|
|
stroke: '#434f4f',
|
|
strokeThickness: 3
|
|
})
|
|
)
|
|
|
|
this.refreshCoordinates()
|
|
|
|
this.yOffset = 20
|
|
this.volume = 32
|
|
this.margin = 5
|
|
|
|
this._updateFrame()
|
|
|
|
this.text.position.set(20 + this.margin, this.yOffset + this.volume + 2 * this.margin)
|
|
|
|
this.addChild(this.text)
|
|
this.addChild(this.crosshair)
|
|
this.setCrosshair()
|
|
|
|
window.setInterval(this.refreshCoordinates.bind(this), 300)
|
|
}
|
|
|
|
_updateFrame() {
|
|
this.clear()
|
|
this.lineStyle(3, 0x434f4f, 1)
|
|
.beginFill(0x434f4f, 0.6)
|
|
.drawRoundedRect(20, this.yOffset + this.volume + this.margin, this.text.width + 2 * this.margin, 32, 5)
|
|
.endFill()
|
|
}
|
|
|
|
toggleCrosshair() {
|
|
if (this.crosshair.parent) this.disableCrosshair()
|
|
else this.enableCrosshair()
|
|
}
|
|
|
|
enableCrosshair() {
|
|
this.addChild(this.crosshair)
|
|
}
|
|
|
|
disableCrosshair() {
|
|
this.removeChild(this.crosshair)
|
|
}
|
|
|
|
/**
|
|
* Refreshes displayed coordinates.
|
|
*
|
|
* @return {MapApp} Returns the MapApp object for chaining.
|
|
*/
|
|
refreshCoordinates() {
|
|
if (this.app.mapLayer.mapview.focus && this.app.mapLayer.mapview.zoom) {
|
|
//TODO pass a mapview to avoid global access.
|
|
var coords = this.app.mapLayer.mapview.focus
|
|
this.setCrosshair()
|
|
this.text.text =
|
|
'Lat: ' +
|
|
coords.x.toFixed(4) +
|
|
'| Lng: ' +
|
|
coords.y.toFixed(4) +
|
|
'| Zoom: ' +
|
|
this.app.mapLayer.mapview.zoom.toFixed(2)
|
|
this._updateFrame()
|
|
}
|
|
}
|
|
setCrosshair() {
|
|
this.crosshair.position.set(this.app.center.x, this.app.center.y)
|
|
}
|
|
}
|