echarts渲染3d地图以及交互事件

环境

vue2

导入

安装npm包 echarts echarts-gl
import * as echarts from "echarts"
import "echarts-gl"

html

<div id="map-container"></div>

js

import GeoZJ from 'mapJson.josn'

const dom = document.getElementById("map-container")
this.myChart = echarts.init(dom)
// 配置项
const option = {
  geo3D: { // 通过geo3D渲染图层
          map: "mapjson",
          regionHeight: 13, // 地图版块厚度
          label: {}, // label样式
          itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: "rgba(56,62,77, 1)", 
            opacity: 1,
            borderWidth: 0.5,
            borderColor: "#000",
          },
          emphasis: { // 区域高亮样式
            label: {
              // show: false
            },
            itemStyle: {
              color: "rgba(89, 123, 184, 1)",
              opacity: 1,
            },
          },
          light: { // 打光
            main: {
              color: "rgba(255, 255, 255, 1)",
              intensity: 1.3, // 光照强度
              alpha: 45,
              beta: 110,
            },
          },
          viewControl: {
            alpha: 65, //视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
            beta: 0, //视角绕 y 轴，即左右旋转的角度。
            rotateSensitivity: 0, // 禁用旋转
            panSensitivity: 0, // 禁用平移
            zoomSensitivity: 0, // 禁用缩放
            distance: 135,
          },
          regions: [], // 指定区域样式
        },
  series: [ // 通过series[0].type.map3D支持数据区域的点击事件
          {
            type: "map3D",
            map: "mapjson",
            top: "-12",
            left: "-2",
            itemStyle: {
              opacity: 0,  //设置opacity透明度为0
              borderWidth: 0,
            },
            regionHeight: 8,
            viewControl: {
              alpha: 65, //视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
              beta: 0, //视角绕 y 轴，即左右旋转的角度。
              rotateSensitivity: 0, // 禁用旋转
              panSensitivity: 0, // 禁用平移
              zoomSensitivity: 0, // 禁用缩放
              distance: 135,
            },
            zlevel: 10,
          },
        ]
}
// 点击事件
this.myChart.on("click", params => {})

echarts.registerMap("mapjson", GeoZJ)
this.myChart.setOption(option)

热门相关：地球第一剑   大神你人设崩了   霸皇纪   刺客之王   仗剑高歌