Map.vue

/* eslint-disable eqeqeq */
<template>
  <div class="container">
    <div class="mapClass" id="echartMapid"></div>
    <div class="boxRight">
      <div class="refreshBtn">
        <button @click="refreshEchart()" class="rBtn">刷新</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";
import axios from "axios";
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 () {
      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 () {
      var that = this;
      // 置空
      that.linesCoord = [];

      function task1() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log("第1个任务geojson获取");
            axios
              .get("http://yongma16.xyz/static/json/map/guizhou.json")
              .then(function (response) {
                var 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) => {
          console.log("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) {
      var 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) {
        console.log(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%);
  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>