<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>

export default {
    name: "LeafletMap",
    components: {},
    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() {
        //初始化地图
        this.initMap()

    },
    beforeDestroy() {
        if (this.map) {
            this.map = null
        }
    },
    methods: {
        //初始化地图
        initMap() {
            this.map = L.map(this.$refs.map, {
                center: [34.269961, 108.946221],
                maxZoom: 19,
                zoom: 4.6,
                zoomControl: true, //禁用 + - 按钮
                doubleClickZoom: true,  // 禁用双击放大
                attributionControl: false  // 移除右下角leaflet标识
            });
            L.tileLayer(
                this.source3Url,
            ).addTo(this.map);
            this.map.pm.addControls({
                position: "topleft",
                drawPolygon: true, // 添加绘制多边形
                drawMarker: true, //添加按钮以绘制标记
                drawCircleMarker: true, //添加按钮以绘制圆形标记
                drawPolyline: true, //添加按钮绘制线条
                drawRectangle: true,	//添加按钮绘制矩形
                drawCircle: true, //  添加按钮绘制圆圈
                editMode: true, //  添加按钮编辑多边形
                dragMode: true, //   添加按钮拖动多边形
                cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容
                removalMode: true  // 清除图层
            });
            // 设置绘制后的线条颜色等
            this.map.pm.setPathOptions({
                color: "orange",
                fillColor: "green",
                fillOpacity: 0.4
            });
            this.map.pm.setLang('zh');
            this.addWindLayer();
        },
        addWindLayer() {
            let res = require('../../../assets/json/gfs.json')
            this.windLayer = L.velocityLayer({
                displayValues: true,
                displayOptions: {
                    velocityType: 'GBR Wind',
                    displayPosition: 'bottomleft',
                    displayEmptyString: 'No wind data'
                },
                data: res,//风场数据
                velocityScale: 0.005,
                particleMultiplier: 1/1000,//粒子的数量
                lineWidth: 2,                     //粒子的粗细
                colorScale: ["rgb(255,255,255)", "rgb(255,255,254)",
                    "rgb(255,255,253 )", "rgb(255,255,252 )",
                    "rgb(255,255,251)", "rgb(255,255,250)",
                    "rgb(255,255,249)", "rgb(255,255,248)",
                    "rgb(255,255,247)", "rgb(255,255,246)",
                    "rgb(255,255,245)", "rgb(255,255,244)",
                    "rgb(255,255,243)", "rgb(255,255,242)",
                    "rgb(255,255,241)",
                    "rgb(255,255,240)", "rgb(255,255,239)",
                    "rgb(255,255,238)", "rgb(255,255,237)",
                    "rgb(255,255,236)"]
            });
            this.windLayer.addTo(this.map)
        }
    }
}
</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>