欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何只用echarts做個仿3d地圖功能

 更新時間:2022年09月22日 10:32:48   作者:前端宋權(quán)武  
由于業(yè)務需求,需要繪制3d地圖,所以下面這篇文章主要給大家介紹了關(guān)于如何只用echarts做個仿3d地圖功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

項目初始化

項目的環(huán)境配置:

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

首先創(chuàng)建一個container容器,絕對定位,寬度和高度都為100%將圖片鋪滿整個屏幕

//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;
  }

隨后我們添加個標題,這里的設計稿是1920*1080的尺寸,字體采用的是龐門正道,絕對定位居中就可以了

//html
<div class="title">x x市x x x x 智慧平臺</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地圖

為了更加快速開發(fā),我們這里就不一個一個配置項去手寫了,直接找個例子在上進行修改 例子

更換自己的json

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

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

接下來給邊框增加寬度和更換顏色:

語法:series-map.itemStyle. borderWidth描邊線寬。為 0 時無描邊,我利用這個使線邊寬度增加,讓地圖更有層次感,看代碼:

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)",
              },
            },

上面的重影以此類推,這里要注意的是漸變的處理方法 type是linear,線性漸變,前四個參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1,相當于在圖形包圍盒中的百分比,如果 globalCoord 為 true,則該四個值是絕對的像素位置,當x:0,y:0,x2:0,y2:1是從上向下;當x:0,y:1,x2:0,y2:0是從下向上,當x:1,y:0,x2:0,y2:0是從右向左;當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% 處的顏色
                    },
                  ],
                },

最后效果:

最后地圖表面做個漸變的效果,因為下面global: 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
                },

完成初稿圖:

總結(jié)

到此這篇關(guān)于如何只用echarts做個仿3d地圖功能的文章就介紹到這了,更多相關(guān)echarts仿3d地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript實現(xiàn)復制功能各瀏覽器支持情況實測

    JavaScript實現(xiàn)復制功能各瀏覽器支持情況實測

    這兩天在做Web前端時,遇到需求通過js實現(xiàn)文本復制的功能,下面與大家分享下各瀏覽器對復制功能的支持情況,感興趣的朋友可以參考下哈
    2013-07-07
  • js判斷滾動條是否已到頁面最底部或頂部實例

    js判斷滾動條是否已到頁面最底部或頂部實例

    這篇文章主要介紹了js判斷滾動條是否已到頁面最底部或頂部的原理與方法,以實例的形式詳細分析了js實現(xiàn)返回頂部功能所涉及的各種技巧,并對相關(guān)知識點進行了總結(jié)歸納,需要的朋友可以參考下
    2014-11-11
  • JS中substring與substr的用法

    JS中substring與substr的用法

    這篇文章主要介紹了JS中substring與substr的用法講解,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧
    2016-11-11
  • js實現(xiàn)滾動條自動滾動到最底部示例代碼

    js實現(xiàn)滾動條自動滾動到最底部示例代碼

    這篇文章主要給大家介紹了關(guān)于js實現(xiàn)滾動條自動滾動到最底部的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下
    2023-06-06
  • 跟我學習javascript的prototype使用注意事項

    跟我學習javascript的prototype使用注意事項

    跟我學習javascript的prototype使用注意事項,介紹了在使用prototype的幾點注意事項,需要的朋友可以參考下
    2015-11-11
  • Bootstrap源碼解讀表單(2)

    Bootstrap源碼解讀表單(2)

    這篇文章主要源碼解讀了Bootstrap表單,介紹了Bootstrap各式各樣的表單,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • json前后端數(shù)據(jù)交互相關(guān)代碼

    json前后端數(shù)據(jù)交互相關(guān)代碼

    本篇文章給大家分享了關(guān)于json前后端數(shù)據(jù)交互方法實現(xiàn)的相關(guān)知識點內(nèi)容,有興趣的讀者們可以參考學習下。
    2018-09-09
  • JS動態(tài)創(chuàng)建元素的兩種方法

    JS動態(tài)創(chuàng)建元素的兩種方法

    這篇文章主要為大家詳細介紹了JS動態(tài)創(chuàng)建元素的兩種方法,字符串拼接形式,或是使用Document、Element對象自帶的一些函數(shù) ,需要的朋友可以參考下
    2016-04-04
  • vue中使用cropperjs的方法

    vue中使用cropperjs的方法

    這篇文章給大家總結(jié)了在.vue文件里cropperjs的使用方法和經(jīng)驗教訓,感興趣的朋友跟隨腳本之家小編學習吧
    2018-03-03
  • 原生js編寫貪吃蛇小游戲

    原生js編寫貪吃蛇小游戲

    這篇文章主要為大家詳細介紹了原生js編寫貪吃蛇小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05

最新評論