| | |
| | | |
| | | constructor(dom, dark) { |
| | | this.darkModel = dark; |
| | | |
| | | // init |
| | | this.app = generatePixiApp(); |
| | | dom.appendChild(this.app.view); |
| | |
| | | this.mapPan(event); |
| | | } |
| | | }) |
| | | |
| | | this.activateMapScale(); |
| | | this.showCoordinates(); |
| | | |
| | | this.appTicker(); |
| | | } |
| | | |
| | |
| | | } else if (delta === -1) { |
| | | this.scale *= 1.1; |
| | | } |
| | | |
| | | this.mapContainer.scale.set(this.scale); |
| | | |
| | | this.mapContainer.children.forEach(child => { |
| | | // child.scale.set(1 / this.scale); // 防止图标变小 |
| | | }) |
| | |
| | | mapPan = (event) => { |
| | | this.pan = true; |
| | | let previousPosition = { x: event.clientX, y: event.clientY }; |
| | | |
| | | const mouseMoveHandler = (event) => { |
| | | if (this.pan) { |
| | | const dx = event.clientX - previousPosition.x; |
| | |
| | | previousPosition = { x: event.clientX, y: event.clientY }; |
| | | } |
| | | }; |
| | | |
| | | this.app.view.addEventListener('mousemove', mouseMoveHandler); |
| | | |
| | | this.app.view.addEventListener('mouseup', () => { |
| | | this.app.view.removeEventListener('mousemove', mouseMoveHandler); |
| | | this.pan = false; |
| | | }); |
| | | |
| | | } |
| | | |
| | | showCoordinates = () => { |
| | |
| | | const mouseY = (event.clientY - this.mapContainer.position.y) / this.scale; |
| | | coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`; |
| | | }; |
| | | |
| | | this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler); |
| | | |
| | | } |
| | | |
| | | appTicker = () => { |