文章目錄

• 利用echart和echart-gl繪制江蘇省的地圖之一
• • 1. 初始化配置
  • • 1.1 引入echarts、echarts-gl、江蘇省的地圖數據
    • 1.2 初始化echarts的參數配置
    • • 1.2.1 通過視覺映射組件來標記每個柱狀圖的顏色
      • 1.2.2 使用三維地理坐標系組件繪制3D江蘇省地圖
      • 1.2.3 通過 viewControl 控制視角的旋轉、平移、縮放
      • 1.2.4 設置每個地級市的標簽
      • 1.2.5 設置每個地級市的樣式
      • 1.2.6 設置每一個地級市的鼠標懸浮效果
      • 1.2.7 設置地圖的光照效果
    • 1.3 配置初始化的柱狀圖
    • • 1.3.1 定義每個地級市的具體數據
      • 1.3.2 定義每個地級市的省會的經緯坐標
      • 1.3.3 處理地級市的數據和坐標
      • 1.3.4 聲明畫布
  • 2. 存在的問題

利用echart和echart-gl繪制江蘇省的地圖之一

需求分析：

新建一個畫布并繪制3D江蘇省的地圖

江蘇省的每一個地級市配置背景顏色

每個地級市的數據使用3D柱狀圖來展示，并顯示出具體的數據

根據每一個地級市的數據的取值范圍標記顏色

1. 初始化配置

1.1 引入echarts、echarts-gl、江蘇省的地圖數據

import * as echarts from 'echarts' // echarts@v5.2.2 import echartGL from 'echarts-gl' // echarts-gl@v2.0.8 import jiangsu from '../assets/json/jiangsu.json' // 江蘇省的地圖數據

1.2 初始化echarts的參數配置

1.2.1 通過視覺映射組件來標記每個柱狀圖的顏色

// 是視覺映射組件 const visualMap = [{type: 'continuous', // 連續型視覺映射組件show: false, // 是否顯示 visualMap-continuous 組件seriesIndex: 0, // 指定取哪個系列的數據text: ['High', 'Low'],// 兩端的文本calculable: true, // 是否顯示拖拽用的手柄max: 4000, // 指定 visualMapContinuous 組件的允許的最大值// 定義 在選中范圍中 的視覺元素inRange: {color: ['#87aa66', '#eba438', '#d94d4c'], // 圖元的顏色的集合} }]

1.2.2 使用三維地理坐標系組件繪制3D江蘇省地圖

1.2.3 通過 viewControl 控制視角的旋轉、平移、縮放

// 用于鼠標的旋轉，縮放等視角控制 const viewControl = {projection: 'perspective', // 透視投影autoRotate: false, // 是否開啟視角繞物體的自動旋轉查看autoRotateDirection: 'cw', // 物體自轉的方向: 從上往下看是順時針方向autoRotateSpeed: 10, // 物體自轉的速度: 角度 / 秒autoRotateAfterStill: 3, // 在鼠標靜止操作后恢復自動旋轉的時間間隔.在開啟 autoRotate 后有效damping: 0.8, // 鼠標進行旋轉，縮放等操作時的遲滯因子，在大于 0 的時候鼠標在停止操作后，視角仍會因為一定的慣性繼續運動（旋轉和縮放）。rotateSensitivity: 1, // 旋轉操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的旋轉靈敏度。zoomSensitivity: 1, // 縮放操作的靈敏度，值越大越靈敏。panSensitivity: 1, // 平移操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的平移靈敏度// panMouseButton: 'left', // 平移操作使用的鼠標按鍵// rotateMouseButton: 'middle', // 旋轉操作使用的鼠標按鍵// distance: 100, // 默認視角距離主體的距離，在 projection 為'perspective'的時候有效。// minDistance: 40, // 視角通過鼠標控制能拉近到主體的最小距離。// maxDistance: 400, // 視角通過鼠標控制能拉遠到主體的最大距離// orthographicSize: 100, // 正交投影的大小。 projection 為'orthographic'的時候有效。// maxOrthographicSize: 20, // 正交投影縮放的最大值。 projection 為'orthographic'的時候有效。// minOrthographicSize: 400, // 正交投影縮放的最小值。 projection 為'orthographic'的時候有效。// alpha: 4, // 視角繞 x 軸，即上下旋轉的角度。配合 beta 可以控制視角的方向。// minAlpha: 5, // 上下旋轉的最小 alpha 值。即視角能旋轉到達最上面的角度。// maxAlpha: 90, // 上下旋轉的最大 alpha 值。即視角能旋轉到達最下面的角度。// beta: 4, // 視角繞 y 軸，即左右旋轉的角度。// minBeta: -80, // 左右旋轉的最小 beta 值。即視角能旋轉到達最左的角度。// maxBeta: 80, // 左右旋轉的最大 beta 值。即視角能旋轉到達最右的角度。// center: [0,0,0], // 視角中心點，旋轉也會圍繞這個中心點旋轉animation: true, // 是否開啟動畫。animationDurationUpdate: 1000, // 過渡動畫的時長。animationEasingUpdate: 'cubicInOut', // 過渡動畫的緩動效果。 }

1.2.4 設置每個地級市的標簽

const label = {show: true, // 是否顯示市textStyle: {borderWidth: 0, // 文字的描邊寬度。borderColor: '#fff', // 文字的描邊顏色。color: '#fff', // 文字顏色fontSize: 12, // 文字大小fontFamily: 'sans-serif', // 文字的字體系列。fontWeight: 'normal', // 文字字體的粗細。} }

1.2.5 設置每個地級市的樣式

const itemStyle = {opacity: 1,color: 'rgb(5,101,123)', // 地圖顏色borderWidth: 1, // 分界線wdithborderColor: '#459bca', // 分界線顏色 }

1.2.6 設置每一個地級市的鼠標懸浮效果

const emphasis = {label: {show: true, // 是否顯示高亮textStyle: {color: '#000', // 高亮文字顏色fontSize: 3, // 文字的字體大小}},itemStyle: {color: '#0489d6' // 地圖高亮顏色} }

1.2.7 設置地圖的光照效果

const light = {// 場景主光源的設置main: {color: '#fff', // 主光源的顏色intensity: 1.2, // 主光源的強度shadow: false, // 主光源是否投射陰影shadowQuality: 'high', // 陰影的質量alpha: 55, // 主光源繞 x 軸，即上下旋轉的角度beta: 10, // 主光源繞 y 軸，即左右旋轉的角度},// 全局的環境光設置ambient: {color: '#fff', // 環境光的顏色intensity: 0.3 // 環境光的強度} } const geo3D = {map: '江蘇', // 地圖類型。boxDepth: 80, // 三維地理坐標系組件在三維場景中的深度// 用于鼠標的旋轉，縮放等視角控制viewControl,// 標簽的相關設置。label,// 三維地理坐標系組件 中三維圖形的視覺屬性，包括顏色，透明度，描邊等itemStyle,// 鼠標 hover 高亮時圖形和標簽的樣式。emphasis,// 光照相關的設置。light }

1.3 配置初始化的柱狀圖

const seriesBar3D = {name: 'bar3D',type: "bar3D",coordinateSystem: 'geo3D', // 該系列使用的坐標系barSize: 1, // 柱子粗細shading: 'lambert', // 三維柱狀圖中三維圖形的著色效果。bevelSize: 0.3, // 柱子的倒角尺寸。支持設置為從 0 到 1 的值。// 柱子的標簽配置label: {show: true,formatter: function(data) {var res = data.name + " " + data.value[2]return res}},data: [] } const options = {backgroundColor: 'rgba(128,128,128,0)',geo3D,series: [seriesBar3D] }

1.3.1 定義每個地級市的具體數據

// 每個地級市的具體數據 const data = [{ name: '南京市', value: 3802 },{ name: '無錫市', value: 3802 },{ name: '徐州市', value: 3412 },{ name: '常州市', value: 3421 },{ name: '蘇州市', value: 3802 },{ name: '南通市', value: 3432 },{ name: '連云港市', value: 3512 },{ name: '淮安市', value: 3802 },{ name: '鹽城市', value: 3802 },{ name: '揚州市', value: 3802 },{ name: '鎮江市', value: 3802 },{ name: '泰州市', value: 3612 },{ name: '宿遷市', value: 3802 }, ]

1.3.2 定義每個地級市的省會的經緯坐標

// 每個地級市的省會的經緯坐標 const gdGeoCoordMap = {"南京市": [118.767413,32.041544],"無錫市": [120.301663,31.574729],"徐州市": [117.184811,34.261792],"常州市": [119.946973,31.772752],"蘇州市": [120.619585,31.299379],"南通市": [120.864608,32.016212],"連云港市": [119.178821,34.600018],"淮安市": [119.021265,33.597506],"鹽城市": [120.139998,33.377631],"揚州市": [119.421003,32.393159],"鎮江市": [119.452753,32.204402],"泰州市": [119.915176,32.484882],"宿遷市": [118.275162,33.963008], }

1.3.3 處理地級市的數據和坐標

// 處理地級市的數據和坐標 function convertData() {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = gdGeoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res }

1.3.4 聲明畫布

// 聲明 var echart = null // 創建畫布 function createMap() {echart = echarts.init(document.getElementById('echarts'), {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight})echarts.registerMap('江蘇', jiangsu)options.series[0].data = convertData(data)echart.setOption(options)echart.on('click', function(params) {console.log(params)}) }

2. 存在的問題

echarts@v5.2.2 和 echarts-gl@v2.0.8 組合創建的江蘇省地圖中每個地級市的 label 的字體顏色無法改變。

echarts@v5.2.2 和 echarts-gl@v2.0.8 組合創建的江蘇省地圖中在每個地級市區域無法觸發click事件，但是每個地級市中的柱狀圖可以觸發click事件，如果采用如下方式不使用geo3D而是使用map3D繪制江蘇省地圖，可以在每個地級市區域觸發click事件：

const options = {series: [{type: 'map3D',map: '江蘇',itemStyle: {...},data: [...]}] }

echarts-gl 繪制的地圖中無法放置彩色圖片

ecahrts-gl 中的scatter3D的symbol繪制的圖形只有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'和通過 'path://' 將圖標設置為任意的矢量路徑,這集中方式，而且還都是2d的平面圖。

總結

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

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