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)