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
            const that = this
            // 置空
            that.linesCoord = []
            async function task1 () {
                return new Promise((resolve) => {
                    that.$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('第一个任务')
                        }).catch(r => {
                            resolve(r)
                        })
                })
            }

            async function task2 () {
                return new Promise((resolve) => {
                    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('echarts options')
                })
            }
            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) {
            const 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>