利用echart和echart-gl绘制江苏省的地图之一
生活随笔
收集整理的這篇文章主要介紹了
利用echart和echart-gl绘制江苏省的地图之一
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 利用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繪制江蘇省的地圖之一
需求分析:
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. 存在的問題
總結
以上是生活随笔為你收集整理的利用echart和echart-gl绘制江苏省的地图之一的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: uiuc计算机科学学院爬虫,一种基于爬虫
- 下一篇: Springboot毕设项目基于spri