<template>
    <div class="view">
        <div class="map" ref="map"></div>
        <div class="mouse-position" ref="mousePosition"></div>
        <map-popup ref="mapPopup" @close="popupClose"></map-popup>
        <div class="mapCtrBar">
            <a-tooltip placement="left">
                <template slot="title">
                    <span>重置地图</span>
                </template>
                <a-button shape="circle" icon="select" @click="resetMap" />
            </a-tooltip>
            <a-tooltip placement="left">
                <template slot="title">
                    <span>项目管理</span>
                </template>
                <a-button style="margin-top: 2px;" shape="circle" icon="ordered-list" @click="skipHrProject" />
            </a-tooltip>

        </div>
    </div>
</template>
<script>
// 首先引入几个会用的到库，具体可以查看官网API文档
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Cluster, XYZ, Vector as VectorSource } from "ol/source";
import * as olProj from "ol/proj";
import { Point } from "ol/geom";
import { Style, Fill, Stroke, Circle as sCircle } from "ol/style";
import { addZoom, addZoomSlider, addZoomToExtent, addAttribution, addFullScreen, addRotate, addMousePosition, addOverviewMap, addScaleLine } from "@/utils/map/openlayer/control.js"
import { addMarkers, setMarkerSource, pointermoveMarkers, dblclickMarkers, clickMarkers, addPopup } from "@/utils/map/openlayer/marker.js"
import { getWindLayer } from "@/utils/map/openlayer/windlayer.js"
import MapPopup from "../components/MapPopup.vue";
import { selectRecordList } from "@/api/services/hrproject.js"
import dat from "dat.gui"
export default {
    name: "Map",
    components: { MapPopup },
    data() {
        return {
            map: null, //这个就是地图实例
            overlay: null, //地图图层
            sourceUrl: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8",
            source1Url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
            source2Url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf',
            source3Url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
            windLayer: null,
            clusters: null,
            pointList: [],
            windLayer: null
        }
    },
    created() {

    },
    async mounted() {
        await this.getPoints()
        //初始化地图
        this.initMap()

    },
    beforeDestroy(){
        if(this.map){
            this.map=null
        }
    },
    methods: {

        async getPoints() {
            await selectRecordList({}).then(res => {
                if (res.code === '200') {
                    if (res.value != null && '' !== res.value) {
                        this.pointList = res.value
                    }
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
            })
        },
        //初始化地图
        initMap() {
            this.map = new Map({
                // 创建一个地图
                layers: [
                    new TileLayer({
                        // 这个是使用openlayers内置地图
                        // source:new OSM(),
                        // 这个是加载高德地图
                        source: new XYZ({
                            visible: true,
                            url: this.source3Url,
                        }),
                    })
                ],
                target: this.$refs.map, //挂载的都没元素
                view: new View({
                    center: olProj.fromLonLat([108.946221, 34.269961]), //地图打开的默认中心店：我这里设置的是伟大的帝都
                    zoom: 4.6
                }),
            });

            //添加控件，自定义
            this.map.addControl(addZoom());
            this.map.addControl(addZoomSlider())
            this.map.addControl(addZoomToExtent())
            this.map.addControl(addAttribution())
            this.map.addControl(addFullScreen())
            this.map.addControl(addRotate())
            this.map.addControl(addMousePosition(this.$refs.mousePosition))
            this.map.addControl(addOverviewMap(this.source3Url))
            this.map.addControl(addScaleLine())
            //添加点标记
            this.clusters = addMarkers(this.pointList);
            this.map.addLayer(this.clusters)
            this.overlay = addPopup(this.$refs.mapPopup)
            this.map.addOverlay(this.overlay)
            pointermoveMarkers(this.map, this.clusters)
            dblclickMarkers(this.map, this.clusters, this)
            clickMarkers(this.map, this.clusters, this.overlay, this.$refs.mapPopup)
            // this.windLayer = getWindLayer()
            // this.map.addLayer(this.windLayer)
            // this.zoomEventMap()
            // this.initGui();
        },
        //弹窗关闭
        popupClose() {
            if (this.overlay) {
                this.overlay.setPosition(undefined);
            }

        },
        //滚动事件
        zoomEventMap() {
            this.map.on('moveend', (event) => {
                console.log(event)
                console.log(this.map.getView().getZoom())
                this.map.removeLayer(this.windLayer)
                this.windLayer=null
                let that = this;
                
                setTimeout(function () {
                    that.windLayer=getWindLayer()
                    that.windLayer.options.zIndex=that.map.getView().getZoom()
                    console.log(that.windLayer.options)
                    that.map.addLayer(that.windLayer)
                }, 1000);
            })

        },
        //重置地图
        resetMap() {
            this.popupClose();
            this.map.getView().setCenter(olProj.fromLonLat([108.946221, 34.269961]))
            this.map.getView().setZoom(4.6);
            this.map.addControl(addOverviewMap(this.source2Url))
        },
        skipHrProject() {
            this.$router.push({ path: '/record/recordList' })
        },
        initGui() {
            const config = {
                addLayer: true,
                paths: 1000,
                lineWidth: 3,
                velocityScale: 0.005,
                globalAlpha: 0.8,
                maxAge: 90,
            };

            // @ts-ignore
            const gui = new dat.GUI();
            gui.add(config, 'addLayer').onChange(function () {
                if (config.addLayer) {
                    // @ts-ignore
                    this.map.addLayer(windLayer);
                } else {
                    // @ts-ignore
                    this.map.removeLayer(windLayer);
                }
            });
            gui.add(config, 'globalAlpha', 0.01, 1).onChange(function () {
                this.windLayer.setWindOptions({
                    globalAlpha: config.globalAlpha,
                });
            });
            gui.add(config, 'maxAge', 1, 200).onChange(function () {
                this.windLayer.setWindOptions({
                    maxAge: config.maxAge,
                });
            });

            gui.add(config, 'paths', 500, 8000).onChange(function () {
                this.windLayer.setWindOptions({
                    paths: config.paths,
                });
            });

            gui.add(config, 'lineWidth', 1, 10).onChange(function () {
                this.windLayer.setWindOptions({
                    lineWidth: config.lineWidth,
                });
            });

            gui.add(config, 'velocityScale', 0.001, 0.1).onChange(function () {
                this.windLayer.setWindOptions({
                    velocityScale: config.velocityScale,
                });
            });
        }
    }
}
</script>
<style  scoped lang='scss'>
.view {
    min-height: 100vh;
    width: 100%;
    position: fixed;
    left: 0vh;
    top: 0vh;
    z-index: 999;
    overflow: none;
    display: inline-block;
    background-image: url('~@/assets/images/bg.jpg');

    .map {
        width: 100%;
        height: 100vh;
        min-height: calc(100vh - 130px);
    }

    .mouse-position {
        right: 1rem;
        bottom: 1rem;
        width: 24vh;
        height: 1rem;
        position: fixed;
    }

    .mapCtrBar {
        bottom: 240px;
        position: absolute;
        right: 32px;
        width: 25px;
    }
}
</style>