文章目錄

• 利用echart和echart-gl繪制江蘇省的地圖之二
• • 1 使用 echarts@4.9.0 和 echarts-gl@1.0.1 繪制江蘇省地圖
  • • 1.1 這里采用 cdn 的方式全局引入
    • 1.2 參數(shù)配置
    • • 1.2.1 首先造一些地圖上的假數(shù)據(jù)
      • 1.2.2 使用三維的地理坐標(biāo)系組件繪制3D地圖
      • 1.2.3 組合配置參數(shù)
    • 1.3 繪制3D地圖
    • • 1.3.1 初始化畫布
      • 1.3.2 聲明3D地圖進(jìn)入效果
      • 1.3.3 處理地級(jí)市數(shù)據(jù)上的圖片的位置
      • 1.3.4 首次進(jìn)入實(shí)現(xiàn)3D地圖效果
      • 1.3.5 點(diǎn)擊地級(jí)市區(qū)域觸發(fā)地圖
    • 1.4 設(shè)置南京市的地圖
    • • 1.4.1 在南京是地圖上設(shè)置具體的電廠的位置
  • 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中每個(gè)地級(jí)市的文本樣式。
• echarts 高版本不支持 geo3D 中每個(gè)地級(jí)市區(qū)域的 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>

當(dāng)然你也可以使用

$ npm install echarts@4.9.0 echarts-gl@1.0.1

的方式安裝后使用

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

的方式在模塊中引入。

1.2 參數(shù)配置

這里的參數(shù)配置和 第一篇文章的配置如出一轍，不同的是，這次的配置中添加了環(huán)境貼圖效果和地級(jí)市 click事件觸發(fā)的效果。

1.2.1 首先造一些地圖上的假數(shù)據(jù)

// 每個(gè)地級(jí)市地圖上的值 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: '揚(yáng)州市', value: 3802 },{ name: '鎮(zhèn)江市', value: 3802 },{ name: '泰州市', value: 3612 },{ name: '宿遷市', value: 3802 }, ] // 每個(gè)地級(jí)市的省會(huì)經(jīng)緯度坐標(biāo) 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],"揚(yáng)州市": [119.421003,32.393159],"鎮(zhèn)江市": [119.452753,32.204402],"泰州市": [119.915176,32.484882],"宿遷市": [118.275162,33.963008], } // 將地級(jí)市的經(jīng)緯度和具體的值結(jié)合處理成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 使用三維的地理坐標(biāo)系組件繪制3D地圖

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

1.2.3 組合配置參數(shù)

const options = {geo3D }

1.3 繪制3D地圖

1.3.1 初始化畫布

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

1.3.2 聲明3D地圖進(jìn)入效果

首次進(jìn)入，首先是一個(gè)平面圖，緊接著反轉(zhuǎn) 90 度，成一個(gè)有深度的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 處理地級(jí)市數(shù)據(jù)上的圖片的位置

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

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 首次進(jìn)入實(shí)現(xiàn)3D地圖效果

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

1.3.5 點(diǎn)擊地級(jí)市區(qū)域觸發(fā)地圖

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// 設(shè)置電廠的位置setFactoryPosition()} })

1.4 設(shè)置南京市的地圖

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

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

function setFactoryPosition(data = []) {data = [{ x: 429, y: 92, name: '南京華潤(rùn)' },{ 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無法設(shè)置3D圖標(biāo)。

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

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

3D 環(huán)境貼圖只有在最后一步設(shè)置，否則會(huì)失效，所以就出現(xiàn)了另一種問題，首次進(jìn)入前3D地圖沒有貼圖效果。

總結(jié)

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

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