如何利用Echarts根據(jù)經(jīng)緯度給地圖畫(huà)點(diǎn)畫(huà)線
1、相關(guān)介紹
在使用Echar進(jìn)行繪制地圖對(duì)象，首先我們需要地圖的json文件，Echarts依賴默認(rèn)會(huì)引入這個(gè)相關(guān)的json文件，所以后續(xù)使用這個(gè)地圖可以之間引用這里的json文件進(jìn)行繪制Echarts地圖。
但是在后續(xù)重新構(gòu)建項(xiàng)目的時(shí)候發(fā)現(xiàn)了一個(gè)問(wèn)題，Echarts的依賴包下沒(méi)有這個(gè)map文件了，我心想這不人麻了，這json文件我要去哪找。后面再對(duì)比版本之后發(fā)現(xiàn)，在5.0版本之前Echarts會(huì)默認(rèn)將這些Map的json文件進(jìn)行打包,但是在5.0之后就不會(huì)對(duì)這個(gè)進(jìn)行打包加入到依賴之中了,可以看一下官網(wǎng)升級(jí)指南。
那說(shuō)來(lái)說(shuō)去還是這個(gè)json文件要去哪找,在這里我們可以在5.0版本之前的Echarts當(dāng)中復(fù)制過(guò)來(lái),或者我們可以從這里 http://datav.aliyun.com/portal/school/atlas/area_selector 進(jìn)行下載json文件進(jìn)行使用
2、地圖繪制
先給一個(gè)用于繪制地圖的canvas的div
<div id="china-map" style="width: 100%;height: 100%;"></div>
之后我們?cè)诋?dāng)前vue導(dǎo)入echarts和前面下載的地市的json文件，并且這里使用的是5的版本，對(duì)于4的版本還可以采用以下方式引入，這里繪制地圖以安徽為例。
// 5.0以前 import echarts from 'echarts'; // 5.0以后 import * as echarts from 'echarts'; import JSON from '../mapJson/anhui.json';
往下就是構(gòu)建地圖所需要使用的Echarts對(duì)象了，這里先定義一個(gè)mapOption對(duì)象，之后我們直接在方法當(dāng)中對(duì)這個(gè)mapOption進(jìn)行賦值
this.mapOption= {
color: ['#5470c6'],
tooltip: {
trigger: 'item',
renderMode: 'html',
// 觸發(fā)方式
triggerOn: 'click',
enterable: true,
backgroundColor: '#fff',
padding: 0,
textStyle: {
color: '#000',
fontSize: '12'
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
},
dispatchAction: {
type: 'downplay'
},
roam: false,
roamController: {
show: true,
x: 'right',
mapTypeControl: {
china: true
}
},
series: [],
geo: {
show: true,
map: 'anhui',
type: 'map',
mapType: 'anhui',
roam: false,
label: {
normal: {
// 顯示省份標(biāo)簽
show: false,
textStyle: {
color: '#fff',
fontSize: 10
}
},
emphasis: {
// 對(duì)應(yīng)的鼠標(biāo)懸浮效果
show: true,
// 選中后的字體樣式
textStyle: {
color: '#000',
fontSize: 14
}
}
},
itemStyle: {
color: '#ddb926',
normal: {
areaColor: '#8abcd1',
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
borderWidth: 0.5,
borderColor: '#8abcd1',
areaColor: '#fff'
}
},
emphasis: {
label: {
show: false
}
}
}
}
最后直接獲取json對(duì)象，以及前面定義的div對(duì)象，將這里初始化了的mapOption進(jìn)行傳入即可：
echarts.registerMap('anhui', JSON, {});
const myChart = echarts.init(
document.getElementById('china-map'),
);
myChart.setOption(this.mapOption);
window.addEventListener('resize', () => {
myChart.resize();
});
之后可以查看效果：這樣的話對(duì)于一個(gè)繪制地圖也就基本上完成了。
同樣的舉一反三，對(duì)于繪制其他地市的地圖，我們只需要導(dǎo)入其他地市的json即可，
import JSON from '../mapJson/zhejiang.json';
并且將mapOption下的geo的map和mapType進(jìn)行響應(yīng)的調(diào)整即可，其余代碼都可進(jìn)行復(fù)用，不必修改：查看效果：
3、根據(jù)經(jīng)緯度進(jìn)行標(biāo)點(diǎn)畫(huà)線
這里還是先繼續(xù)用安徽的地圖來(lái)進(jìn)行說(shuō)明，這里的Echarts來(lái)進(jìn)行繪制點(diǎn)和線主要就是通過(guò)疊加，也就是在地圖上分別使用Echarts進(jìn)行畫(huà)點(diǎn)畫(huà)線。而對(duì)于繪制點(diǎn)和線直接在series當(dāng)中進(jìn)行添加相關(guān)配置即可。
{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
color: ['#000'],
tooltip: {
position: "right",
color: "#000",
formatter(d) {
console.log(d)
return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
},
},
data: dataGeo,
}
這里點(diǎn)的數(shù)據(jù) dataGeo 要進(jìn)行構(gòu)建：其結(jié)構(gòu)如下：分別是城市名稱與其經(jīng)緯度。
mapPointData.push({
name: '六安',
value: [116.50, 31.75]
})
mapPointData.push({
name: '馬鞍山',
value: [118.51, 31.68]
})
mapPointData.push({
name: '宿州',
value: [116.98, 33.63]
})
這樣添加完成之后可以進(jìn)行瀏覽頁(yè)面查看效果：到這里根據(jù)經(jīng)緯度進(jìn)行繪制點(diǎn)也就完成了。
同樣的繪制線也和點(diǎn)一樣，同樣在series當(dāng)中再添加一個(gè)繪制線的對(duì)象.
{
name: "",
type: "lines",
zlevel: 6,
lineStyle: {
type: 'solid',
width: 1,
opacity: 1,
curveness: 0,
orient: 'horizontal',
color: "#000",
},
show: true,
data: lineData,
tooltip: {
position: "right",
color: "#000",
formatter(d) {
console.log(d)
return `<div style="padding: 5px 10px;"> 【${d.data.point[0]}】< ---- >【${d.data.point[1]}】</div>`;
},
},
},
同樣的我們需要對(duì)線的數(shù)據(jù)lineData進(jìn)行構(gòu)建：數(shù)據(jù)格式如下：分別表示起始地市的名稱與其對(duì)應(yīng)地市的經(jīng)緯度
lineData.push({
point: ['六安', '馬鞍山'],
coords: [
[116.50, 31.75],
[118.51, 31.68]
],
})
lineData.push({
point: ['宿州', '馬鞍山'],
coords: [
[116.98, 33.63],
[118.51, 31.68]
],
})
lineData.push({
point: ['宿州', '六安'],
coords: [
[116.98, 33.63],
[116.50, 31.75]
],
})
最后還是查看效果：
gitee 源碼地址，采用vue-cli搭建的項(xiàng)目，拉取項(xiàng)目后先 npm install 再 npm run dev 運(yùn)行
git地址：https://gitee.com/lizuoqun/web-lzq-echarts.git
總結(jié)
到此這篇關(guān)于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫(huà)點(diǎn)畫(huà)線的文章就介紹到這了,更多相關(guān)Echarts地圖畫(huà)點(diǎn)畫(huà)線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了如何實(shí)現(xiàn)無(wú)感刷新token，當(dāng)token過(guò)期的時(shí)候，刷新token,前端需要做到無(wú)感刷新token,即刷token時(shí)要做到用戶無(wú)感知，避免頻繁登錄。下面我們大家一起進(jìn)入文章看看實(shí)現(xiàn)思路即詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue表單之v-model綁定下拉列表功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vuejs 單文件組件實(shí)例詳解,需要的朋友可以參考下2018-02-02
vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問(wèn)題
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08