文章目錄

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

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

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

那么如何實現 3層 地圖層疊效果呢？其實 echarts 已經提供了 geo 地理坐標系組件，這個組件可以傳遞一個數組用來放置多個地圖，然后通過調整每個地圖層的大小和位置以及層級關系，就可以輕松實現3層層疊的地圖效果。

安裝 與 引入

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

基礎配置

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

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

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

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

然后再說明一下繪制地圖數據series相關的動效和數據相關的屬性：

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

繪制最上面的一層的地圖，也是用來操作數據的一層地圖

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: [] }

通過地級市的數據繪制3D圖標

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

通過地級市的數據繪制波紋動效

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

通過地級市的數據繪制每個地級市的詳細信息

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。