echarts5地图（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)