vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化

前言

  • 最近在开发中遇到一个需求,需要把一个地区地图变成3d感觉悬浮在大屏中间配合业务需求

  • 其实echarts配合三方库就可以实现这个效果,具体细节需要自己调整

代码实现

1.下载各省份各地区地图数据-json文件-根据需求下载对应地图json数据引入即可

最新全国地图JSON数据: 数据来源:阿里云数据可视化平台 - Gitee.com

2.安装echarts和echarts-gl插件:
javascript 复制代码
npm install echarts
npm install echarts-gl
3.代码实现-直接复制-注意下包和引入进来json地图数据需要对应起来
html 复制代码
<template>
  <div class="app-container">
    <div ref="myMap" style="width: 100%; height: 100%"></div>
  </div>
</template>
​
<script>
import * as echarts from 'echarts'
import 'echarts-gl'
export default {
  name: 'Index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // json地图数据-需要根据需求下载引入对应名称文件
      let mapJson = require('../views/dashboard/hubei.json')
      let myChart = echarts.init(this.$refs.myMap)
      myChart.showLoading()
      myChart.hideLoading()
      echarts.registerMap('myMap', mapJson)
​
      var option = {
        tooltip: {
          // 自定义代码
        },
        series: [
          {
            type: 'map3D',
            name: '地图',
            // 相对于父容器比例
            center: ['50%', '50%'],
            selectedMode: 'single', // 地图高亮单选
            regionHeight: 4, // 地图高度
            map: 'myMap',
            viewControl: {
              // 缩放大小,数值越大,地图越小
              distance: 120,
              // 上下倾斜角度
              alpha: 50,
              // rotateSensitivity: [1, 1],
              // 左右倾斜角度
              beta: -30
            },
            label: {
              show: true, // 是否显示名字
              color: '#fff', // 文字颜色
              fontSize: 18, // 文字大小
              fontWeight: 'bold' // 文字大小
            },
            itemStyle: {
              color: '#4389ED', // 地图背景颜色
              borderWidth: 1, // 分界线wdith
              borderColor: '#61CFF8', // 分界线颜色
              opacity: 0.92
            },
            emphasis: {
              label: {
                show: true, // 是否显示高亮
                textStyle: {
                  color: '#fff' // 高亮文字颜色
                }
              },
              itemStyle: {
                color: '#007EE8', // 地图高亮颜色
                borderWidth: 10, // 分界线wdith
                borderColor: '#6BECF5' // 分界线颜色
              }
            },
            light: {
              main: {
                color: '#fff',
                intensity: 1,
                shadow: true,
                shadowQuality: 'high',
                alpha: 25, //
                beta: 20
              },
              ambient: {
                color: '#fff',
                intensity: 0.6
              }
            }
          }
        ]
      }
​
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        console.log('myChart.resize()', myChart.resize())
        myChart.resize()
      })
    }
  }
}
</script>
​
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 795px;
  // background: skyblue;
}
</style>
​

总结:

经过这一趟流程下来相信你也对 vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

有什么不足的地方请大家指出谢谢 -- 風过无痕

相关推荐
哆啦A梦158838 分钟前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li1 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
罚时大师月色4 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz4 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom4 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1234 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js