文章目錄

• 利用echart和echart-gl繪制江蘇省的地圖之二
• • 1 使用 echarts@4.9.0 和 echarts-gl@1.0.1 繪制江蘇省地圖
  • • 1.1 這里采用 cdn 的方式全局引入
    • 1.2 參數配置
    • • 1.2.1 首先造一些地圖上的假數據
      • 1.2.2 使用三維的地理坐標系組件繪制3D地圖
      • 1.2.3 組合配置參數
    • 1.3 繪制3D地圖
    • • 1.3.1 初始化畫布
      • 1.3.2 聲明3D地圖進入效果
      • 1.3.3 處理地級市數據上的圖片的位置
      • 1.3.4 首次進入實現3D地圖效果
      • 1.3.5 點擊地級市區域觸發地圖
    • 1.4 設置南京市的地圖
    • • 1.4.1 在南京是地圖上設置具體的電廠的位置
  • 2. 存在的問題

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

上一篇講述了如何使用 echarts@5.2.2 和 echarts-gl@2.0.8 繪制江蘇省的3D地圖和繪制中存在的問題，而這篇文章將要講述的是使用 echarts@4.9.0 和 echarts-gl@1.0.1 繪制江蘇省的3D地圖和繪制中存在的問題。
下面先看一下3D效果圖：

1 使用 echarts@4.9.0 和 echarts-gl@1.0.1 繪制江蘇省地圖

這里之所使用 echarts@4.9.0 和 echarts-gl@1.0.1 繪制江蘇省的3D地圖，原因是：

• echarts 高版本不支持更改geo3D中每個地級市的文本樣式。
• echarts 高版本不支持 geo3D 中每個地級市區域的 click 事件。

1.1 這里采用 cdn 的方式全局引入

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.0.1/dist/echarts-gl.min.js"></script>

當然你也可以使用

$ npm install echarts@4.9.0 echarts-gl@1.0.1

的方式安裝后使用

import * as echarts from 'echarts' import 'echarts-gl'

的方式在模塊中引入。

1.2 參數配置

這里的參數配置和 第一篇文章的配置如出一轍，不同的是，這次的配置中添加了環境貼圖效果和地級市 click事件觸發的效果。

1.2.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 }, ] // 每個地級市的省會經緯度坐標 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], } // 將地級市的經緯度和具體的值結合處理成echarts可以接收的格式 const convertData = function(data) {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.2.2 使用三維的地理坐標系組件繪制3D地圖

const geo3D = {map: '江蘇', // 地圖類型。boxDepth: 80, // 三維地理坐標系組件在三維場景中的深度regionHeight: 2, // 三維地圖每個區域的高度// 用于鼠標的旋轉，縮放等視角控制viewControl: {autoRotate: false, // 是否開啟視角繞物體的自動旋轉查看rotateSensitivity: 0, // 旋轉操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的旋轉靈敏度。zoomSensitivity: 0, // 縮放操作的靈敏度，值越大越靈敏。panSensitivity: 0, // 平移操作的靈敏度，值越大越靈敏。支持使用數組分別設置橫向和縱向的平移靈敏度alpha: 90, // 視角繞 x 軸，即上下旋轉的角度。配合 beta 可以控制視角的方向。beta: 0, // 視角繞 y 軸，即左右旋轉的角度。maxBeta: 45, // 左右旋轉的最大 beta 值。即視角能旋轉到達最右的角度。},// 三維地理坐標系組件 中三維圖形的視覺屬性，包括顏色，透明度，描邊等itemStyle: {opacity: 1,color: 'rgb(5,101,123)', // 地圖顏色borderWidth: 1, // 分界線wdithborderColor: '#459bca', // 分界線顏色},// 鼠標 hover 高亮時圖形和標簽的樣式。emphasis: {label: {show: false, // 是否顯示高亮},itemStyle: {color: '#0489d6' // 地圖高亮顏色}},// 光照相關的設置。light: {// 場景主光源的設置main: {color: '#fff', // 主光源的顏色intensity: 1.5, // 主光源的強度shadow: true, // 主光源是否投射陰影shadowQuality: 'high', // 陰影的質量// alpha: 55, // 主光源繞 x 軸，即上下旋轉的角度// beta: 4, // 主光源繞 y 軸，即左右旋轉的角度},// 全局的環境光設置ambient: {color: '#fff', // 環境光的顏色intensity: 2 // 環境光的強度},ambientCubemap: {diffuseIntensity: 2, // 漫反射的強度specularIntensity: 2, // 高光反射的強度}}, }

1.2.3 組合配置參數

const options = {geo3D }

1.3 繪制3D地圖

1.3.1 初始化畫布

// 初始化畫布 const echart = echarts.init(document.getElementById('echarts'), {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight })// 注冊江蘇省數據 echarts.registerMap('江蘇', jiangsu)// 繪制3D地圖 echart.setOption(options)

1.3.2 聲明3D地圖進入效果

首次進入，首先是一個平面圖，緊接著反轉 90 度，成一個有深度的3D地圖

function setMap3DBoxDepth(success) {let count = 90let timer = setInterval(() => {if (count <= 40) {clearInterval(timer)success()} else {count = count - 10echart.setOption({series: [{viewControl: {alpha: count}}]})}}, 30) }

1.3.3 處理地級市數據上的圖片的位置

為什么要配置圖片在地圖上的位置呢？因為 echarts-gl 中無法設置 3D 的形狀和彩色圖片。這里使用生成 img 元素通過定位的方式在指定的位置放置圖標。而此處的位置是采用鼠標的橫縱坐標位置來設置的。

function setImagesPosition(data = []) {data = [{ name: '南京市', value: [628, 416, 1] },{ name: '蘇州市', value: [919, 485, 0] }]for (let i = 0; i < data.length; i++) {const { value: [x,y,flag] } = data[i]const img = document.createElement('img')img.setAttribute('src', flag ? icon_01 : icon_02)img.setAttribute('style', `position: absolute;left: ${x}px;top: ${y}px;transform: translate(-50%, -50%) scale(0.6);pointer-events: none;`)document.getElementById('echarts').appendChild(img)} }

1.3.4 首次進入實現3D地圖效果

// 獲取環境貼圖的HTML元素 const mapBgImg = document.getElementById('map-bg')// 平面轉換為傾斜 setMap3DBoxDepth(() => {echart.setOption({series: [{shading: 'realistic',realisticMaterial: {// 材質細節的紋理貼圖，參數只有三種格式：string、HTMLImageElement、HTMLCanvasElementdetailTexture: mapBgImg},itemStyle: {borderColor: '#fff'}}]})setImagesPosition() })

1.3.5 點擊地級市區域觸發地圖

echart.on('click', (params) => {const { seriesType, name, event: { event: {x,y} } } = paramsconsole.log(['echart', name, x, y])if (seriesType === 'map3D' && name === '南京市') {console.log(name)this.is_show_dialog_city = true// 設置電廠的位置setFactoryPosition()} })

1.4 設置南京市的地圖

<div id="dialog-box"><div class="dialog-close">&times;</div><div id="dialog-warpper"></div> </div>

1.4.1 在南京是地圖上設置具體的電廠的位置

function setFactoryPosition(data = []) {data = [{ x: 429, y: 92, name: '南京華潤' },{ x: 452, y: 288, name: '大唐南京' }]for (let i = 0; i < data.length; i++) {const { x, y, name } = data[i]const box = document.createElement('div')const title = document.createElement('div')const img = document.createElement('img')box.setAttribute('class', 'factory-warpper')box.setAttribute('style', `left: ${x}px;top: ${y}px;`)title.setAttribute('class', 'factory-title')title.innerText = nameimg.setAttribute('src', icon_01)img.setAttribute('class', 'factory-icon')box.appendChild(title)box.appendChild(img)document.getElementById('dialog-warpper').appendChild(box)} }

2. 存在的問題

echarts@4.9.0 和 echarts-gl@1.0.1 繪制3D無法設置3D圖標。

通過 鼠標的橫縱坐標位置并使用 img 圖片在3D地圖上設置具體的圖標的位置，非常的麻煩，需要計算畫布的大小，和畫布與img圖標的相對位置。

3D 地圖邊角不支持圓滑的邊框效果。

3D 環境貼圖只有在最后一步設置，否則會失效，所以就出現了另一種問題，首次進入前3D地圖沒有貼圖效果。

總結

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

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