Leaflet+Echarts实现GIS地图动态播放以及使用Echarts对点位数据详情进行展示

是的，你没看错…我还在发烧中，昨天在众多人的围殴当中我顽强的活了下来。请允许我最后作死一波，因为我知道漂亮的小姐姐个帅气的小哥哥一定都不会和我一般见识的…

效果图大致长得这个德行

小凳子，上代码

<template>
    <div style="width: 100%;height: 100%;">
    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'
    import L from 'leaflet'
    import Monitor from './../../../data/request/hbmis/monitor/data'
    import moment from 'moment'
    import Echarts from 'echarts'
    import Aqi from '../../../data/request/hbmis/aqi/aqi'
    import WebGis from '../../../data/request/hbmis/monitor/webgis'

    import geoJson from '../overview/data/130000'
    import GeoCity from '../../../../static/js/city'
    import GeoCounty from '../../../../static/js/county'

    export default {
        props: {
            options: {
                type: Object,
                default() {
                    return {}
                }
            },
            point: {
                type: Object,
                default() {
                    return {}
                }
            },
            isPoint: {
                type: Boolean,
                default: true
            },
            isBasic: {
                type: Boolean,
                default: false
            },
            mapType: {
                type: String,
                default: 'city'
            },
            type: {
                type: String,
                default: 'hour'
            }
        },
        data() {
            return {
                map: null,
                layerGroup: null,
                layerGroupArr: [],
                layerControl: null,
                markerGroup: null,
                circle: null,
                center: [38.920469, 117.110617],
                geoJsonData: null,
                // 当前图层
                curBasic: null,
                curName: null,
                curCity: null,
                curCounty: null,
                curRound: null,
                curLayer: null,
                curPoint: null,
                curZoom: 7,
                // 查询参数
                params: {
                    dataType: 2,
                    starttime: '',
                    endtime: '',
                    ptids: ''
                },
                currentData: {},
                // 柱状图对象
                myCharts: null,
                // 趋势图配置项
                chartOptions: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '1%',
                        top: '4%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            splitArea: {
                                show: true,
                            },
                        }
                    ],
                    series: [
                        {
                            name: 'AQI',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: (d) => {
                                        return this.format_cur_color(d.data)
                                    }
                                }
                            },
                            data: [32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3],
                        }
                    ]
                }
            }
        },
        watch: {
            options() {
                this.loadData(this.options)
                this.load_point(this.point)
                if (this.isBasic) {
                    if (this.mapType == 'city') {
                        this.load_city()
                    }
                    if (this.mapType == 'county') {
                        this.load_county()
                    }
                } else {
                    if (this.curCity instanceof Object) {
                        this.curCity.remove()
                    }
                    if (this.curCounty instanceof Object) {
                        this.curCounty.remove()
                    }
                }
            },
            point() {
                // this.load_point(this.point)
            },
            isPoint() {
                if (this.isPoint) {
                    this.load_point(this.point)
                } else {
                    if (this.curPoint instanceof Object) {
                        this.curPoint.remove()
                    }
                }
            },
            isBasic() {
                if (!this.isBasic) {
                    this.load_basic()
                    this.load_name()
                    if (this.curCity instanceof Object) {
                        this.curCity.remove()
                    }
                    if (this.curCounty instanceof Object) {
                        this.curCounty.remove()
                    }
                } else {
                    if (this.curBasic instanceof Object) {
                        this.curBasic.remove()
                    }