上一篇分享了一個(gè)偽3D的地圖，這次我們搞一個(gè)真實(shí)的3D地圖。
效果圖如下：

要實(shí)現(xiàn)這種效果，首先得引入兩個(gè)不同的依賴(lài)：
echarts-liquidfill和echarts-gl，引入很簡(jiǎn)單：

 npm install echarts-gl
 npm install echarts-liquidfill

引入后開(kāi)始我們的編碼工作：

template 部分：

<template>
<div id="map3D" style="width: auto;height: 730px;"></div>
</template>

js部分：

import * as echarts from "echarts";
import "echarts-liquidfill";
import 'echarts-gl';
import BaoJi from "../static/json/baoji.json"
export default {
  name: "map_1",
  mounted() {
  //  this.map()
    this.Map()
  },
  methods: {
    map() {
      const myChart = echarts.init(document.getElementById('map'));
      let option = null;
      const data1 = [
        { name: '陳倉(cāng)區(qū)', value: 45},
        { name: '金臺(tái)區(qū)', value: 0},
        { name: '鳳翔區(qū)', value: 63 },
        { name: '岐山縣', value: 16 },
        { name: '隴縣', value: 69 },
        { name: '千陽(yáng)縣', value: 36 },
        { name: '麟游縣', value: 46 },
        { name: '扶風(fēng)縣', value: 51 },
        { name: '渭濱區(qū)', value: 68 },
        { name: '鳳縣', value: 42 },
        { name: '太白縣', value: 12 },
        { name: '眉縣', value: 60 },
      ];
      echarts.registerMap('baoji', BaoJi);
      option = {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          inRange: {
            color: ['#66a6fa','#0E1E40'],
          },
        },
        tooltip: {
          borderWidth: '1',
          borderColor: 'rgba(255,255,255,0.3)',
          formatter: '{b0}: {c0}', //地圖 : {a}（系列名稱(chēng)），（區(qū)域名稱(chēng)），{c}（合并數(shù)值）
          textStyle: { fontSize: '16px', color: '#4d89f8', fontFamily: 'Arial' },
          show: false,
        },
        title: {
          show: true,
          x: 'center',
          y: 'top',
          text: '寶雞市行政區(qū)域圖',
          textStyle: {
            color: '#2980b9',
            fontSize: 18,
          },
        },
        series: [
          {
            type: 'map',
            map: 'baoji',
            zoom: 1.5, // 默認(rèn)顯示級(jí)別
            layoutCenter: ['50%', '50%'], // 定義地圖中心在屏幕中的位置
            layoutSize: '100%', // 相對(duì)于屏幕寬高的百分比
            data: data1,
            roam: 'scale', // 縮放'scale'或者平移'move'
            aspectScale: 1.5, // scale 地圖的長(zhǎng)寬比
            itemStyle: {
              normal: {
                // 靜態(tài)的時(shí)候展示樣式
                areaColor: '#013C62',
                shadowColor: '#013C62',
                shadowBlur: 20,
                shadowOffsetX: -5,
                shadowOffsetY: 15,
              },
              emphasis: {
                areaColor: "#f58220"    //選中區(qū)域的背景色
              },
            },
            label: {
              normal: {
                //靜態(tài)的時(shí)候展示樣式
                show: true, //是否顯示地圖省份得名稱(chēng)
                //  formatter: '{c0}\n{b0}',
                textStyle: {
                  color: '#dedee7', // 區(qū)域文字 顏色
                  fontSize: 15,
                  fontFamily: 'Arial',
                },
              },
              emphasis: {
                //動(dòng)態(tài)展示的樣式
                color: '#faf4f4', //選中區(qū)域的字體顏色
                show: true,
                textStyle:{
                  fontSize: 18,
                  fontFamily: 'Arial',
                }
              },
            },
            // 選中狀態(tài)下的多邊形和標(biāo)簽樣式
            select: {
              itemStyle: {
                areaColor: "#f58220"    //選中區(qū)域的背景色
              },
              label: {
                show: true,
                color: '#308cd9',
              },
            },
          }
        ],
      };
      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    Map(){
      const myCharts = echarts.init(document.getElementById('map3D'))
      myCharts.showLoading();
      echarts.registerMap('map3D', BaoJi);
      // 隱藏動(dòng)畫(huà)加載效果。
      myCharts.hideLoading();
      myCharts.setOption({
        geo3D: [{
          map: 'map3D',
          roam: true, //開(kāi)啟縮放
          shading: 'realistic',
          label: {
            show: true, //是否顯示市
            color: '#faf4f4',
            fontSize: 16, //文字大小
            fontFamily: '微軟雅黑',
            backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
          },
          regions: [
            {
              name: '渭濱區(qū)',
              // 官方文檔regionHeight無(wú)效，需配置height屬性
              height: 8,
              itemStyle:{
                opacity: 1, // 透明度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779',
                borderWidth: 0.65, //分界線(xiàn)寬度
              },
            },
            {
              name: '金臺(tái)區(qū)',
              height: 6,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',
              },
            },
            {
              name: '鳳縣',
              height: 3,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',

              },
            },
            {
              name: '扶風(fēng)縣',
              height: 4,
              itemStyle:{
                opacity: 1, // 透明度
                borderWidth: 0.6, //分界線(xiàn)寬度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779'

              },
            },
            {
              name: '太白縣',
              height: 5,
              itemStyle:{
                opacity: 1, // 透明度
                borderWidth: 0.6, //分界線(xiàn)寬度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779'

              },
            },
            {
              name: '岐山縣',
              height: 6,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',

              },
            },
            {
              name: '眉縣',
              height: 7,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',

              },
            },
            {
              name: '鳳翔區(qū)',
              height: 8,
              itemStyle:{
                opacity: 1, // 透明度
                borderWidth: 0.6, //分界線(xiàn)寬度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779'

              },
            },
            {
              name: '千陽(yáng)縣',
              height: 9,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',

              },
            },
            {
              name: '隴縣',
              height: 10,
              itemStyle:{
                opacity: 1, // 透明度
                areaColor: '#2884db',
                color: '#2884db',
                borderColor: '#222222',
                borderWidth: 1,
                borderType: 'solid',

              },
            },
            {
              name: '麟游縣',
              height: 11,
              itemStyle:{
                opacity: 1, // 透明度
                borderWidth: 0.6, //分界線(xiàn)寬度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779'

              },
            },
            {
              name: '陳倉(cāng)區(qū)',
              height: 5,
              itemStyle:{
                opacity: 1, // 透明度
                borderWidth: 0.6, //分界線(xiàn)寬度
                borderColor: "#207fce", //分界線(xiàn)顏色
                areaColor: '#244779',
                color: '#244779'
              },
            }
          ]
        }],
        series:[{
          boxDepth: 120, //地圖傾斜度
          regionHeight: 3, //地圖厚度
          roam: 'scale', // 縮放'scale'或者平移'move'
          // 真實(shí)感材質(zhì)相關(guān)配置 shading: 'realistic'時(shí)有效
          realisticMaterial: {
            detailTexture: '#fff', // 紋理貼圖
            textureTiling: 1, // 紋理平鋪，1是拉伸，數(shù)字表示紋理平鋪次數(shù)
            roughness: 0, // 材質(zhì)粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材質(zhì)是非金屬 ，1金屬
          },
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          barSize: 0.1,
          minHeight: 1,
          silent: true,
          itemStyle: {
            color: 'orange',
            opacity: 0.9,
          },
        }]
      })
      //自適應(yīng)大小
      window.onresize = () => {
        myCharts.resize()
      }
    },
  }

按照步驟來(lái)就可以實(shí)現(xiàn)和效果圖相同的效果，同理，也可以將寶雞市換成其他城市，但注意的是：改變城市后，對(duì)應(yīng)的regions也要做出改變，負(fù)責(zé)會(huì)報(bào)錯(cuò)或變得奇奇怪怪。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-512689.html

到了這里，關(guān)于VUE+echart繪制地圖（3D）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！