文章目錄

• 利用 echarts 繪制江蘇省的地圖之三
• • 安裝 與 引入
  • 基礎(chǔ)配置
  • • 繪制3層江蘇省的地圖來模擬3D效果
    • • 繪制最下面一層的地圖
      • 繪制中間一層的地圖
      • 繪制最上面的一層的地圖，也是用來操作數(shù)據(jù)的一層地圖
    • 通過地級市的數(shù)據(jù)繪制3D圖標(biāo)
    • 通過地級市的數(shù)據(jù)繪制波紋動效
    • 通過地級市的數(shù)據(jù)繪制每個地級市的詳細(xì)信息

利用 echarts 繪制江蘇省的地圖之三

這篇文章是采用 ecahrts@5.2.2 通過繪制3層地圖，來模擬實(shí)現(xiàn)3D的地圖效果，在和真實(shí)的3D效果相比，還是有些差距的。

那么如何實(shí)現(xiàn) 3層 地圖層疊效果呢？其實(shí) echarts 已經(jīng)提供了 geo 地理坐標(biāo)系組件，這個組件可以傳遞一個數(shù)組用來放置多個地圖，然后通過調(diào)整每個地圖層的大小和位置以及層級關(guān)系，就可以輕松實(shí)現(xiàn)3層層疊的地圖效果。

安裝 與 引入

$ npm install echarts import * as from 'echarts' // echarts@5.2.2

基礎(chǔ)配置

const options = {geo: [map_01, // 底層地圖map_02, // 中間層地圖map_03 // 上層地圖],series: [series_01, // 波紋動效series_02, // 3d 圖標(biāo)series_03 // 展示信息] }

繪制3層江蘇省的地圖來模擬3D效果

首先來說明一下繪制地圖需要用到的 geo 的屬性說明：

• map: 使用 registerMap 注冊的地圖名稱。
• z: 組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。
• layoutCenter: 定義地圖中心在屏幕中的位置
• layoutSize: 地圖的大小。支持相對于屏幕寬高的百分比或者絕對的像素大小。
• roam: 是否開啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開啟。如果只想要開啟縮放或者平移，可以設(shè)置成 'scale' 或者 'move'。設(shè)置成 true 為都開啟。
• silent: 圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)為 false，即響應(yīng)和觸發(fā)鼠標(biāo)事件。
• itemStyle: 地圖區(qū)域的多邊形 圖形樣式。
  • color: 圖形的顏色。
  • borderWidth: 描邊線寬。為 0 時無描邊。
  • borderColor: 圖形的描邊顏色。支持的顏色格式同 color，不支持回調(diào)函數(shù)。
• emphasis: 高亮狀態(tài)下的多邊形和標(biāo)簽樣式。
  • label: 地圖上標(biāo)簽文本樣式。
    • show: 是否顯示標(biāo)簽。
  • itemStyle: 同 itemStyle。

然后再說明一下繪制地圖數(shù)據(jù)series相關(guān)的動效和數(shù)據(jù)相關(guān)的屬性：

• tooltip: 本系列特定的 tooltip 設(shè)定。
  • show: 是否顯示提示框組件。
• type: 圖形類型。
• coordinateSystem: 該系列使用的坐標(biāo)系。'cartesian2d': 使用二維的直角坐標(biāo)系、'polar': 使用極坐標(biāo)系、'geo': 使用地理坐標(biāo)系。
• rippleEffect: 漣漪特效相關(guān)配置。
  • scale: 動畫中波紋的最大縮放比例。
  • brushType: 波紋的繪制方式，可選 'stroke' 和 'fill'。
• showEffectOn: 配置何時顯示特效。
• itemStyle: 圖形樣式。
  • color: 圖形的顏色。 默認(rèn)從全局調(diào)色盤 option.color 獲取顏色。
• label: 圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息，比如值，名稱等。
  • color: 文字的顏色。
  • formatter: 標(biāo)簽內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式，字符串模板與回調(diào)函數(shù)返回的字符串均支持用 \n 換行。
• symbol: 標(biāo)記的圖形。
• symbolSize: 標(biāo)記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。
• symbolOffset: 標(biāo)記相對于原本位置的偏移。
• data: 系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)通常為具體的數(shù)據(jù)項(xiàng)。
• zlevel: 散點(diǎn)圖所有圖形的 zlevel 值。
• z: 散點(diǎn)圖組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋。z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

繪制最下面一層的地圖

const map_01 = {map: '江蘇',z: 1,layoutCenter: ['49%', '51%'],layoutSize: '90%',roam: false,silent: true,itemStyle: {color: 'transparent', // 地圖的顏色borderWidth: 1, // 分界線wdithborderColor: '#459bca', // 分界線顏色},emphasis: {label: {show: false},itemStyle: {color: 'transparent'}}, }

繪制中間一層的地圖

const map_02 = {map: '江蘇',z: 2,layoutCenter: ['49.5%', '50.5%'],layoutSize: '90%',roam: false,silent: true,itemStyle: {color: 'transparent',borderWidth: 1,borderColor: '#459bca',},emphasis: {label: {show: false},itemStyle: {color: 'transparent'}}, }

繪制最上面的一層的地圖，也是用來操作數(shù)據(jù)的一層地圖

const map_03 = {map: '江蘇',z: 3,layoutCenter: ['50%', '50%'],layoutSize: '90%',show: true,roam: false,itemStyle: {color: 'rgb(5,101,123)',borderWidth: 0.5,borderColor: '#ffffff',borderJoin: 'round',borderCap: 'round',},label: {color: '#fff'},emphasis: {label: {color: '#fff'},itemStyle: {color: '#409EFF'}},regions: [] }

通過地級市的數(shù)據(jù)繪制3D圖標(biāo)

const series_01 = {tooltip: {show: false,},type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10,brushType: 'stroke',},showEffectOn: 'render',itemStyle: {normal: {color: '#00FFFF',}},label: {normal: {color: '#fff',},},symbol: 'circle',symbolSize: [10, 5],data: convertData(data),zlevel: 1, }

通過地級市的數(shù)據(jù)繪制波紋動效

const series_02 = {type: 'scatter',coordinateSystem: 'geo',itemStyle: {color: '#00FFF6',},symbol: 'image://' + icon_03,symbolSize: [32, 41],symbolOffset: [0, -20],z: 999,data: convertData(data), }

通過地級市的數(shù)據(jù)繪制每個地級市的詳細(xì)信息

const series_03 = {type: 'scatter',coordinateSystem: 'geo',label: {normal: {show: true,formatter: function(params) { var name = params.namevar value = params.value[2]var text = `{fline|${value}人}\n{tline|${name}}`return text;}, color:'#fff',rich: {fline: {padding: [0, 25],color: '#fff',fontSize: 14,fontWeight:400},tline: {padding: [0, 27],color: '#ABF8FF',fontSize: 12,},}},emphasis: {show: true}},itemStyle: {color: '#00FFF6',},symbol: 'image://' + icon_04,symbolSize: [100, 50],symbolOffset: [0, -60],z: 999,data: convertData(data), }

總結(jié)

以上是生活随笔為你收集整理的利用 echarts 绘制江苏省的地图之三的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。