如何只用echarts做個(gè)仿3d地圖功能

更新時(shí)間：2022年09月22日 10:32:48 作者：前端宋權(quán)武

由于業(yè)務(wù)需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關(guān)于如何只用echarts做個(gè)仿3d地圖功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

項(xiàng)目初始化

項(xiàng)目的環(huán)境配置：

"echarts": "^4.9.0",
"vue": "^2.6.10",

首先創(chuàng)建一個(gè)container容器，絕對(duì)定位，寬度和高度都為100%將圖片鋪滿(mǎn)整個(gè)屏幕

//html
<div class="container"></div>
//css
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  color: #fff;
  }

隨后我們添加個(gè)標(biāo)題,這里的設(shè)計(jì)稿是1920*1080的尺寸,字體采用的是龐門(mén)正道，絕對(duì)定位居中就可以了

//html
<div class="title">x x市x x x x 智慧平臺(tái)</div>
//css
 .title {
    position: absolute;
    top: 10px;
    left: 660px;
    font-size: 55px;
    font-family: "PangMenZhengDao";
    font-weight: 400;
    font-style: italic;
    color: #fff;
    text-shadow: 0px 3px 8px rgba(3, 71, 138, 0.75);
  }

echarts仿3d地圖

為了更加快速開(kāi)發(fā)，我們這里就不一個(gè)一個(gè)配置項(xiàng)去手寫(xiě)了，直接找個(gè)例子在上進(jìn)行修改例子

更換自己的json

獲取方法，從高德地圖選擇器中直接復(fù)制JSON API 即可，網(wǎng)址鏈接

讓地圖更有立體感 首先看下面兩組圖片，第一個(gè)是我們要修改的例子立體感不明顯，我們大概要做成圖二的一個(gè)效果，有人要問(wèn)了為什么不使用echarts-gl,首先他的側(cè)邊不能做出多個(gè)層次的感覺(jué)，其次他的紋理貼圖也是詭異的，圖片不能鋪滿(mǎn)并且還是倒立的，我設(shè)計(jì)的圖片寬高都是2的N次方，白白花費(fèi)好幾個(gè)小時(shí)，果然放棄了。

接下來(lái)給邊框增加寬度和更換顏色：

語(yǔ)法：series-map.itemStyle. borderWidth描邊線(xiàn)寬。為 0 時(shí)無(wú)描邊，我利用這個(gè)使線(xiàn)邊寬度增加，讓地圖更有層次感，看代碼：

itemStyle: {
              normal: {
                borderWidth: 6,
                borderColor: "rgba(29, 111, 165,1)",
                shadowColor: "rgba(29, 111, 165,0.5)",
                shadowOffsetY: 15,
                shadowBlur: 8,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },

上面的重影以此類(lèi)推，這里要注意的是漸變的處理方法 type是linear，線(xiàn)性漸變，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 globalCoord 為 true，則該四個(gè)值是絕對(duì)的像素位置，當(dāng)x:0,y:0,x2:0,y2:1是從上向下；當(dāng)x:0,y:1,x2:0,y2:0是從下向上，當(dāng)x:1,y:0,x2:0,y2:0是從右向左；當(dāng)x:1,y:0,x2:1,y2:0是從左向右

   borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#20a2e1", // 0% 處的顏色
                    },
                    {
                      offset: 0.8,
                      color: "#085473", // 80% 處的顏色
                    },
                    {
                      offset: 1,
                      color: "#054660", // 100% 處的顏色
                    },
                  ],
                },

最后效果：

最后地圖表面做個(gè)漸變的效果，因?yàn)橄旅鎔lobal: true所以這里x=1200指的是像素的位置，不要搞混了

               areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#17498d", // 0% 處的顏色
                    },
                    {
                      offset: 1,
                      color: "#3a95fd", // 50% 處的顏色
                    },
                  ],
                  global: true, // 缺省為 false
                },

完成初稿圖：