<template>
    <div class="edit-view" ref="container">
        <div class="edit-view__content-wrapper">
            <div class="edit-view__content-section">
                <el-radio-group v-model="map">
                    <el-radio :label="require('../assets/map3.jpg')">影像1</el-radio>
                    <el-radio :label="require('../assets/map4.jpg')">影像2</el-radio>
                </el-radio-group>
                <canvas
                    id="mapview"
                    type="2d"
                    :width="width"
                    :height="height"
                    :style="{ width: width + 'px', height: height + 'px', marginTop: '20px' }"
                    @mousedown="mousedown"
                    @mousemove="mousemove"
                    @mouseup="mouseup"
                    @mouseenter="mouseenter"
                    @mouseleave="mouseleave"
                    @mousewheel="mousewheel"
                    @contextmenu.stop.prevent="contextmenu"
                />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'gis1',
    mounted() {
        window.addEventListener('resize', this.init);
        this.ctx = document.getElementById('mapview').getContext('2d');
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.init);
    },
    data() {
        return {
            width: 0,
            height: 0,
            ctx: null,
            map: require('../assets/map3.jpg'),
            in: false,
            down: false,
            startX: 0,
            startY: 0,
            scale: 1,
            img: null,
            dx: 0,
            dy: 0,
            minScale: 1,
            maxScale: 10
        };
    },
    methods: {
        init() {
            let { width, height } = this.$refs.container.getBoundingClientRect();
            this.width = width - 80;
            this.height = height - 140;
            this.loadImg();
        },
        loadImg() {
            this.ctx.clearRect(0, 0, this.width, this.height);
            let img = new Image();
            img.src = this.map;
            img.onload = () => {
                const width = img.width;
                const height = img.height;
                if (width / height > this.width / this.height) {
                    this.minScale = this.scale = this.width / width;
                } else {
                    this.minScale = this.scale = this.height / height;
                }
                this.img = img;
                this.dx = (this.width - width * this.scale) / 2;
                this.dy = (this.height - height * this.scale) / 2;
                this.draw();
            };
        },
        draw() {
            this.ctx.clearRect(0, 0, this.width, this.height);
            const width = this.img.width;
            const height = this.img.height;
            this.ctx.drawImage(
                this.img,
                0,
                0,
                width,
                height,
                this.dx,
                this.dy,
                width * this.scale,
                height * this.scale
            );
        },
        mousedown(e) {
            if (e.button === 0) {
                this.down = true;
                this.startX = e.offsetX;
                this.startY = e.offsetY;
            }
        },
        mouseup(e) {
            console.log('mouseup', e);
            this.down = false;
        },
        mouseenter(e) {
            console.log('mouseenter', e);
            this.in = true;
        },
        mouseleave(e) {
            console.log('mouseleave', e);
            this.in = false;
            this.down = false;
        },
        mousemove(e) {
            if (this.down && this.in) {
                this.dx += e.movementX;
                this.dy += e.movementY;
                this.draw();
            }
        },
        mousewheel(e) {
            console.log('mousewheel', e);
            const px = (e.offsetX - this.dx) / (this.img.width * this.scale);
            const py = (e.offsetY - this.dy) / (this.img.height * this.scale);
            if (this.in && px >= 0 && px <= 1 && py >= 0 && py <= 1) {
                const oldScale = this.scale;
                this.scale = Math.max(this.minScale, Math.min(this.maxScale, this.scale - e.deltaY / 500));
                this.dx -= (this.img.width * this.scale - this.img.width * oldScale) * px;
                this.dy -= (this.img.height * this.scale - this.img.height * oldScale) * py;
                this.draw();
            }
        },
        contextmenu() {}
    },
    watch: {
        map(val) {
            this.loadImg();
        }
    }
};
</script>
<style lang="less" scoped></style>
