如何利用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)文章
這篇文章主要和大家詳細(xì)介紹一下Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-11-11
這篇文章主要為大家介紹了Vue之ref屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助2021-11-11
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面我們來(lái)簡(jiǎn)單了解下吧2019-05-05
vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue實(shí)現(xiàn)PDF文件預(yù)覽的方法詳解
pdf文件預(yù)覽是開(kāi)發(fā)業(yè)務(wù)時(shí)常見(jiàn)的一個(gè)交互,在toB項(xiàng)目中是經(jīng)常用到的,對(duì)于用戶上傳文件,預(yù)覽文件等操作時(shí)有一個(gè)更好的體驗(yàn),下面我結(jié)合實(shí)際業(yè)務(wù),在vue的基礎(chǔ)上與大家分享這個(gè)實(shí)現(xiàn)方法,需要的朋友可以參考下2023-09-09
X6 是 AntV 旗下的圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應(yīng)用。接下來(lái)就看看vue如何使用它2021-05-05
這篇文章主要介紹了vue中封裝echarts公共組件過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue $mount 和 el的區(qū)別說(shuō)明
這篇文章主要介紹了vue $mount 和 el的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09