其他分享
首页 > 其他分享> > vue + echars地图 省市区 + 添加点标记

vue + echars地图 省市区 + 添加点标记

作者:互联网

echars地图

监控大屏的一个模块
在这里插入图片描述
在这里插入图片描述

定义地图位置大小

 <div id="mapChart" class="mapChart"></div>
 
  #mapChart {
    width: 1000px;
    height: 600px;
  }

  data() {
    return {
      myChart: '',
      distributionOptions: '',
      seriesList: [],
      old_click: '' //判断是否重复点击用于返回地图首页
    }
  },
  props: {
    data: [Array, Object]
  },

安装echars,配置地图,
定义三组数据,用于echars地图的展示省市区

var provinces = ['310000', '130000', '140000', '150000', '210000', '220000', '230000', '320000', '330000', '340000', '350000', '360000', '370000', '410000', '420000', '430000', '440000', '450000', '460000', '510000', '520000', '530000', '540000', '610000', '620000', '630000', '640000', '650000', '110000', '120000', '500000', '810000', '820000', '710000']
var provincesText = ['上海', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西省', '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '重庆市', '香港', '澳门', '台湾省']
var provincesName = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']

这三组数据也可以后端配置,这三组数据拿的原本章的最下边有原文链接 , 配数组的时候位置要对应

  mounted() {
    let that = this
    setTimeout(() => {

      let data = that.data.equipmentInfoList
      for (let i = 0; i < data.length; i++) {
        that.seriesList.push({
          'name': data[i].name,
          'value': [data[i].longitude, data[i].latitude],
          'address': data[i].addressname
        })
      }
      // 我这个是后端请求,下边是 echars地图json文件的获取地址
      //  http://datav.aliyun.com/tools/atlas/index.html#&lat=32.287132632616384&lng=101.1181640625&zoom=4
      //这个网站获取数据 有三种处理  前端自己请求  下载到项目  后端请求
      // 后边拼接的这个 +full  省市需要加 到了区县 就不用加了  很坑 需要做兼容
      getamapData({ 'code': 省市区代号(山东 370000) + '_full' }).then(s => {
        if (s.code === 200) {
        //这个如果不是后端传的 是自己配置的三个数组 直接写 china 显示全国地图,显示省区的地图 传你配置的三个数组中的值
        //我这个一是后端传的 二是加账户权限的,所以传的多,
        //第二个参数传 获取的json数据
          that.init(数据组(add_coding: "370000",fenBuAddresses: null,pinyin:"shandongsheng",userAddressName: "山东省), JSON.parse(s.data))
        } else {
          this.$message({
            showClose: true,
            message: '数据维护中...',
            type: 'warning'
          })
        }
      })
    }, 500)
  },
//methods
    //显示各省地图
    getProvinceMapOpt(provinceAlphabet, name,textname) {
      this.old_click = provinceAlphabet
      var  deviceList
      //根据所有地区设备数据进行筛选 选择点击地区的
      if(textname === 1){
        deviceList = this.seriesList
      }else{
          deviceList = this.changeSeriesList(textname)

      }
      getamapData({ 'code': provinceAlphabet + '_full' }).then(s => {
        if (s.code === 200) {
          echarts.registerMap(name, JSON.parse(s.data))
          this.changeOptions(name, deviceList)
          this.myChart.setOption(this.distributionOptions, true)
        } else {
          this.getProvinceMapOpt(100000, that.data.fenBuAddress.userAddressName)
          this.$message({
            showClose: true,
            message: '当前地区暂无权限',
            type: 'warning'
          })
        }
      })
    },

    // 浏览器窗口大小改变时,重新加载图表以自适应
    resizeCharts: _debounce(function() {
      echarts.init(document.getElementById('mapChart')).resize()
    }, 500),
    
    // 初始化地图数据
    init(data,JsonList) {
      echarts.registerMap(data.userAddressName, JsonList)
      this.changeOptions(data.userAddressName, this.seriesList)
      this.myChart = echarts.init(document.getElementById('mapChart'))
      this.myChart.setOption(this.distributionOptions)
      // 下面就是创建了一个点击事件,目的是点击省份子区域的时候可以切换到省份地图
      this.myChart.on('click', chinaParam => {
        let idx = data.fenBuAddresses.findIndex((itm) => itm.userAddressName === chinaParam.name)
        if (idx === -1) {
          this.getProvinceMapOpt(data.add_coding, data.userAddressName,data.userAddressName)
          this.$message({
            showClose: true,
            message: '当前地区暂无权限',
            type: 'warning'
          })
        } else {
          let code = data.fenBuAddresses[idx].add_coding
          if (this.old_click === code) {
            this.getProvinceMapOpt(data.add_coding, data.userAddressName,1)   // 返回全国地图 由 1 判断显示所有设备地址数据
          } else {
            this.getProvinceMapOpt(code, data.fenBuAddresses[idx].pinyin,data.fenBuAddresses[idx].userAddressName)
          }
        }
      })
      window.onresize = function() {
        this.myChart.resizeCharts()
      }
    },

//
    changeOptions(name, datalist) {
      // 经纬度数据
      const seriesList = [
        {
          data: datalist
        }
      ]
      // 图标
      const series = seriesList.map(v => {
        return {
          type: 'scatter', //配置显示方式为用户自定义
          coordinateSystem: 'geo',
          roam : false,//禁止拖拽
          data: v.data
        }
      })
      // options
      this.distributionOptions = {
        tooltip: {        // 提示框组件
          show: true,     // 显示提示框组件
          trigger: 'item',     // 触发类型
          triggerOn: 'mousemove',  // 出发条件
          formatter: '名称:{b}<br/>坐标:{c}'

        },

        series,  // 数据
        geo: {
          map: name || 'china',  // 引入地图 省份或者 国家
          layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
          layoutSize: '45%',
          roam: true, //开启鼠标缩放和漫
          zoom: 2,
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: '#fff',
                fontSize: 10,
                fontFamily: 'Arial'
              }
            },
            emphasis: {  // 高亮状态下的样式
              //动态展示的样式
              color: '#fff'
            }
          },
          itemStyle: {   // 地图区域的多边形 图形样式。
            normal: {
              borderColor: '#07919e',  // 边框颜色
              areaColor: '#1c2f59',    //  区域颜色
              textStyle: {             // 文字颜色
                color: '#fff'
              },
              shadowBlur: 10,          // 图形阴影的模糊大小
              shadowOffsetX: 10        // 阴影水平方向上的偏移距离。
            },
            emphasis: {
              areaColor: '#1c2f59',
              color: '#fff'
            }
          }
        }
      }
    }

这里是原文链接 https://www.cnblogs.com/wjw1014/p/13529371.html

标签:echars,vue,name,true,地图,userAddressName,code,省市区,data
来源: https://blog.csdn.net/weixin_42367288/article/details/120697687