echarts地图显示数据处理arcgis合并乡镇

上班不迟到

已于 2024-02-27 11:47:28 修改

阅读量1.3k

点赞数 26

分类专栏： echarts地图文章标签： echarts 前端 javascript vue arcgis

于 2023-12-29 13:03:01 首次发布

本文链接：https://blog.csdn.net/qq_42886811/article/details/135287809

版权

echarts地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts地图显示和数据处理

在echarts中实现地图展示
- 显示效果
- 实现代码
数据格式要求：什么样的数据才能在 echarts中使用？
- 如何获得
- - 如何把shp转成json
  - arcgis软件处理按县的shp文件

在echarts中实现地图展示

显示效果

根据自己的需求可调整样式，比如阴影立体效果。
在这里插入图片描述

实现代码

import mapjson from '@/assets/mapjson/431123.json'
// vue初始化地图方法
 initecharts() {
      var this_ = this//this失效处理
      let myChart = this.$echarts.init(this.$refs.XZMAP)
      myChart.on('click', function (e) {
      //地图点击事件，写自己的业务需求

      })
      this.$echarts.registerMap('China', mapjson)
      var dataArr = mapjson.features
      var data = []
      //处理得到mapjson 里面每个乡镇的范围
      for (let i = 0; i < dataArr.length; i++) {
        var c = this.color16()//设置背景颜色
        var data_list = {
          name: dataArr[i].properties.name,
          value: dataArr[i].properties.value,
          itemStyle: {
            normal: {
              areaColor: c,
              borderColor: c,
            },
          },
        }
        data.push(data_list)
      }
      
      myChart.hideLoading()
      let option_tmp = {
        baseOption: {
          grid: {
            right: '2%',
            top: '10%',
            bottom: '10%',
            width: '18%',
          },
          tooltip: {
            trigger: 'axis', // hover触发器
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.1)', //hover颜色
              },
            },
          },
          series: [
            //数据系列
            {
              type: 'map', //地图类型
              //地图上文字
              label: {
                normal: {
                  show: true, //是否显示标签
                  textStyle: {
                    color: '#333333',
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              //地图区域的多边形 图形样式

              zoom: 1.2, //当前视角的缩放比例
              //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
              roam: true,
              map: 'China', 
              data: data,
            },
          ],
        },
        options: [],
      }
      //初始化
      myChart.setOption(option_tmp)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },

  color16() {
      //十六进制颜色随机
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      const color = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`
      return color
    },