Map.vue

/* eslint-disable eqeqeq */
<template>
  <div class="container">
    <div class="mapClass" id="echartMapid"></div>
    <div class="boxRight">
      <div class="refreshBtn">
        <el-button @click="refreshEchart">刷新</el-button>
      </div>
      <div class="selectPoint">
        <p>终点选择</p>
        <el-select v-model="focusCity" placeholder="终点选择">
          <el-option
            v-for="item in aimPointData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            style="position: relative; overflow: hidden"
          >
          </el-option>
        </el-select>
        <p>地图点击</p>
        <el-input placeholder="请输入内容" v-model="clickCity" :disabled="true">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'Map',
    data () {
        return {
            msg: 'map组件内层',
            option: {},
            // gisData
            gisData: null,
            // 热力层
            airData: [],
            mapEchart: null,
            // 飞线层
            linesCoord: [],
            // 中心层坐标,默认贵阳市
            centerLoction: [106.598978, 26.916134],
            // 气泡层
            locationGis: [],
            // 城市
            focusCity: '贵阳市',
            clickCity: '未选择',
            // 坐标
            focusGeo: null,
            // 终点选择
            aimPointData: []
        }
    },
    watch: {
        focusCity: function (oldValue, newValue) {
            console.log(oldValue, newValue)
            // this.mapEchart.clear()
            this.initOptionData()
        }
    },
    mounted () {
        this.initDomDiv()
        this.initOptionData()
    },
    methods: {
        initDomDiv: function () {
            if (!echarts) return
            let mapDom = document.getElementById('echartMapid')
            this.mapEchart = echarts.init(mapDom)
            // 显示加载
            this.mapEchart.showLoading({
                text: '初始化'
            })
            console.log('dom', this.mapEchart)
            try {
                console.log(
                    'domMain',
                    document.getElementById('mainappid'),
                    document.getElementById('mainappid').style
                )
                document.getElementById('mainappid').style.padding = '0'
                document.getElementById('mainappid').style.margin = '0'
            } catch (e) {
                console.log('e', e)
            }
        },
        refreshEchart: function () {
            this.mapEchart.clear()
            this.mapEchart.showLoading({
                text: '刷新中'
                // color: 'blue',
                // opacity: 0.2
            })
            this.initOptionData()
        },
        initOptionData: function () {
            const echarts = this.$echarts
            if (!echarts) return
            let that = this
            // 置空
            that.linesCoord = []
            function task1 () {
                let that = this
                return new Promise((resolve) => {
                    setTimeout(() => {
                        console.log('第1个任务geojson获取')
                        this.$axios
                            .get('https://yongma16.xyz/static/json/map/guizhou.json')
                            .then(function (response) {
                                let res = response.data
                                that.gisData = res
                                console.log('贵州数据', res)
                                let itemData = res.features
                                let length = itemData.length
                                that.aimPointData = []
                                for (let loc = 0; loc < length; ++loc) {
                                    let name = itemData[loc].properties.name
                                    that.aimPointData.push({
                                        value: name
                                    })
                                    let center = itemData[loc].properties.center
                                    // 中心位置
                                    if (name === that.focusCity) {
                                        that.centerLoction = center
                                    }
                                }
                                for (let loc = 0; loc < length; ++loc) {
                                    let name = itemData[loc].properties.name
                                    let number = (Math.random() * 100).toFixed(2)
                                    let center = itemData[loc].properties.center
                                    that.locationGis.push({
                                        value: center
                                    })
                                    // eslint-disable-next-line eqeqeq
                                    if (name !== that.focusCity) {
                                        that.linesCoord.push([center, that.centerLoction])
                                    }
                                    // eslint-disable-next-line eqeqeq
                                    if (name && name !== '') {
                                        let temp = {
                                            name: `${name}`,
                                            value: Number(number)
                                        }
                                        that.airData.push(temp)
                                    }
                                    continue
                                }
                                console.log('测试热力处理', that.airData)
                                echarts.registerMap('geoJson', res)
                            })
                        resolve('第一个任务')
                    }, 1000)
                }).catch((error) => {
                    throw Error(error)
                })
            }

            function task2 () {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        console.log('第2个任务option配置')
                        that.option = {
                            title: {
                                text: '贵州省地图',
                                subtext: 'geoJson'
                            },
                            geo: {
                                // 经纬度中心
                                center: that.centerLoction,
                                type: 'map',
                                map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
                                roam: true, // 拖拽
                                nameProperty: 'name',
                                // 悬浮标签
                                label: {
                                    type: 'map',
                                    map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
                                    // roam: false, // 拖拽
                                    nameProperty: 'name',
                                    show: true,
                                    color: '#fff',
                                    backgroundColor: '#546de5',
                                    align: 'center',
                                    fontSize: 10,
                                    width: (function () {
                                        // let n = parseInt(Math.random() * 10)
                                        return 110
                                    })(),
                                    height: 50,
                                    shadowColor: 'rgba(0,0,0,.7)',
                                    borderRadius: 10
                                },
                                zoom: 1.2
                            },
                            series: [
                                // 坐标点的热力数据
                                {
                                    data: that.airData,
                                    geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
                                    type: 'map'
                                },
                                {
                                    type: 'effectScatter',
                                    // 渲染显示
                                    zlevel: 2,
                                    showEffectOn: 'render',
                                    data: that.locationGis, // 配置散点的坐标数据
                                    coordinateSystem: 'geo', // 指明散点使用的坐标系统
                                    rippleEffect: {
                                        // 缩放
                                        scale: 4,
                                        // 涟漪的颜色
                                        color: '#cf6a87',
                                        // 波纹数量
                                        number: 2,
                                        // 扩散方式 stroke(线条) fill（区域覆盖）
                                        brushType: 'fill'
                                    },
                                    // 形状
                                    symbol: 'circle'
                                },
                                // 飞线层
                                {
                                    // name: '贵阳市飞线',
                                    type: 'lines',
                                    coordinateSystem: 'geo',
                                    polyline: true,
                                    zlevel: 3,
                                    effect: {
                                        show: true,
                                        period: 5,
                                        trailLength: 0, // 拖尾
                                        symbol: 'arrow', // 箭头
                                        color: 'red', // 样式颜色
                                        symbolSize: 5
                                    },
                                    lineStyle: {
                                        color: '#000',
                                        width: 2,
                                        type: 'solid',
                                        dashOffset: 0
                                        // cap: butt,
                                        // join: bevel
                                    },
                                    // 飞线层数据
                                    data: that.linesCoord
                                }
                            ],
                            visualMap: {
                                min: 0,
                                max: 100,
                                inRange: {
                                    color: ['white', '#0984e3'] // 控制颜色渐变的范围
                                },
                                calculable: false // 出现滑块
                            }
                        }
                        resolve('2')
                    }, 1000)
                })
            }
            async function allTasks () {
                await task1() // 获取数据geojson
                await task2() // option
            }
            allTasks().then(function () {
                // console.log('热力值', hotValue)
                console.log('series', that.option.series)
                that.initMapGis(that.option)
            })
        },
        initMapGis: function (optionParams) {
            let that = this
            try {
                // 基于准备好的dom，初始化echarts实例
                console.log('echarts_map渲染')
                // console.log("测试data_echart",this.data,that.weather_title,this.weather_low);

                let mapEchart = that.mapEchart
                // 显示加载
                // mapEchart.showLoading()
                console.log('配置之前', optionParams)
                mapEchart.setOption(optionParams)
                // 关闭加载
                mapEchart.hideLoading()
                // 重绘
                window.onresize = function () {
                    mapEchart.resize()
                }
                // 点击事件传递参数
                mapEchart.on('click', function (params) {
                    let name = '贵阳市'
                    if (params.name && params.name !== '') {
                        name = params.name
                    }
                    console.log('点击参数', params)
                    console.log('选择行政区', name)
                    // window.alert(name)
                    that.clickCity = name
                })
            } catch (e) {
                throw Error(e)
            }
        }
    }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  /* display: flex; */
}

.mapClass {
  position: relative;
  width: 100%;
  height: 100%;
  background: #7f7fd5;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* background-size: 300%; */
}

.boxRight {
  position: fixed;
  margin: 20px;
  float: right;
  top: 5%;
  right: 0;
  width: 400px;
  height: auto;
  background: rgb(212, 190, 180);
  border-radius: 5px;
}

.refreshBtn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin-top: 5px;
}

.rBtn {
  position: relative;
  width: 80px;
  height: 40px;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  cursor: pointer;
  background: indianred;
  color: #fff;
  margin-top: 5px;
}
.rBtn:focus {
  background: blue;
}
.selectPoint {
  position: relative;
  margin-top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  overflow: hidden;
  margin-bottom: 5px;
  color: #000;
  /* box-sizing: border-box; */
  /* display: inline-block; */
}
</style>