当前位置:   article > 正文

【3d地图】vue中使用echarts geo3D

echarts geo3d


前言

想必对于一个前端来说,大家对echarts并不陌生,本次文章主要记录了我在vue2中使用echarts 渲染3d地图过程中的一点心得,本文代码包含详细的配置项注释~

Github项目Demo地址:点击这里

给个星星吧!!不定期更新此demo
github项目启动后访问路径:“/BaseMap” 或者 点击 “基础3D地图” 导航访问该组件


一、echarts是什么?

“ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。”

二、使用步骤

1.引入echarts库,3d地图必须安装echarts-gl依赖

npm install echarts --save
npm install echarts-gl --save
  • 1
  • 2

2.制作地图JSON文件

在渲染3d地图之前,我们还需要到<<DATAV.GeoAltas地理小工具系列>>网站下载我们需要的json数据,这里我用浙江地图做示例下载好了json文件

注意!: DATAV.GeoAltas地理小工具系列最近访问显示 “服务升级中”,那么我们需要制作json文件怎么办?

  • 到网上直接搜索 “echarts地图json资源”
  • 通过python自己制作 >>>点击 教程

请添加图片描述

“zhejiang.json”

2.1 制作自己的json

我们还可以通过《geojson.io》 网站,自己规划区域进行地图边界绘制。请添加图片描述

3.引入到vue组件中

我们可以创建一个组件,创建一个Charts.vue文件,来渲染我们的3D地图
请添加图片描述

为了演示方便,我们可以在组件中局部引入echarts的依赖。
当然在项目中,因为需要重复使用我们也可以在vue中配置全局引入(此文章不做全局引入教程)

局部引入方式代码如下:

import geoJson from "./zhejiang.json"; //省份的json格式

import * as echarts from 'echarts'; 
import "echarts-gl" //3D地图插件
  • 1
  • 2
  • 3
  • 4

4.创建一个有固定宽高大小的div元素

那么把依赖引入到vue组件后,我们就可以准备在html中创建一个有高度和宽度的div容器来放置echarts地图的canvas(注意这个div一定要宽高才可以渲染出地图)

html代码如下:

<template>
  <div class="map">
    <div class="map-container">
      <div class="map-container-title">xxx标题</div>
      <div class="map-chart" id="mapEchart"></div>
    </div>
  </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

css代码如下:

<style lang="less" scoped>
.map {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  .map-container {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    .map-container-title {
      margin: 56px 0 16px;
      font-size: 24px;
      font-weight: 700;
      color: #333;
      line-height: 30px;
      display: flex;
      justify-content: center;
    }

    .map-chart {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      height: 100%;
      width: 100%;
    }
  }
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

5.配置echarts参数

接下来我们可以在methods中配置echarts参数来渲染地图了!
代码如下:

chartMap() {
     var myChart = echarts.init(document.getElementById("mapEchart"));
      echarts.registerMap("zhejiang", geoJson);
      myChart.hideLoading();
      // 图表配置项
      let option = {
        geo3D: {
          map: "zhejiang",
          roam: true,
          itemStyle: {
            color: "#007aff",
            opacity: 0.8,
            borderWidth: 0.4,
            borderColor: "#000"
            // areaColor: '#fff'
          },
          viewControl: {
            autoRotate: true,
            autoRotateAfterStill: 3,
            distance: 120,
            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: true, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
          },

          emphasis: {
            disabled: true, //是否可以被选中
            label: {
              //移入时的高亮文本
              show: true,
              color: "#333", //显示字体颜色变淡
              fontSize: 18 //显示字体变大
            },
            itemStyle: {
              color: "#ff7aff" //显示移入的区块变粉色
            }
          },
          label: {
            show: true,
            position: "top",
            color: "#111", //地图初始化区域字体颜色
            fontSize: 14,
            lineHeight: 16
            // textStyle: {
            //   color: "#fff", //地图初始化区域字体颜色
            //   fontSize: 12,
            //   opacity: 1,
            //   backgroundColor: "rgba(0,23,11,0)",
            // },
          },
          shading: "lambert",
          light: {
            //光照阴影
            main: {
              // color: "#fff", //光照颜色
              intensity: 1, //光照强度
              //shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          }
        },
      };
      myChart.setOption(option);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74

6.挂载到mounted钩子,并且组件销毁时释放内存

最后一步,我们再monuted钩子上挂载配置好的echarts方法
重点如果我们有多级页面可以互相路由跳转,为了防止内存泄露,我们可以在beforeDestroy钩子上清除我们的echarts方法,释放内存提升项目性能!

  mounted() {
    this.chartMap();
  },
  beforeDestroy() {
    // 防止内存泄露
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

总结

请添加图片描述
在vue2中引入3d地图echarts是不是非常简单呢!
不过这只是非常基础的3D地图,可能不满足我们开发中的业务需求,所以还可以继续拓展,具体请看下面传送门!!
下期分享
《【3d地图】vue3.0中使用echarts geo3D》 点击这里
《【vue】Echarts3D地图下钻》点击这里

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/82969
推荐阅读
相关标签
  

闽ICP备14008679号