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)