|
@@ -24,7 +24,8 @@ export default {
|
|
|
id: { type: String, required: true },
|
|
|
minZoom: { type: Number, default: 0.3 },
|
|
|
maxZoom: { type: Number, default: 1 },
|
|
|
- initialZoom: { type: Number, default: 1 }
|
|
|
+ initialZoom: { type: Number, default: 1 },
|
|
|
+ center: { type: Object, default: null }
|
|
|
},
|
|
|
|
|
|
data () {
|
|
@@ -46,6 +47,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ watch: {
|
|
|
+ center (val, prevVal) {
|
|
|
+ this.transform = this.transform.translate(prevVal.x - val.x, prevVal.y - val.y)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
methods: {
|
|
|
updateSize () {
|
|
|
const { width, height } = this.$el.getBoundingClientRect()
|
|
@@ -67,7 +74,7 @@ export default {
|
|
|
window.addEventListener('resize', () => this.updateSize())
|
|
|
|
|
|
this.zoom.on('zoom', ({ transform }) => {
|
|
|
- this.transform = transform
|
|
|
+ this.transform = this.center ? transform.translate(-this.center.x, -this.center.y) : transform
|
|
|
this.scale = transform.k
|
|
|
})
|
|
|
|