如何利用Echarts根据经纬度给地图画点画线
1、相关介绍
在使用Echar进行绘制地图对象，首先我们需要地图的json文件，Echarts依赖默认会引入这个相关的json文件，所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图。
但是在后续重新构建项目的时候发现了一个问题，Echarts的依赖包下没有这个map文件了，我心想这不人麻了，这json文件我要去哪找。后面再对比版本之后发现，在5.0版本之前Echarts会默认将这些Map的json文件进行打包,但是在5.0之后就不会对这个进行打包加入到依赖之中了,可以看一下官网升级指南。
那说来说去还是这个json文件要去哪找,在这里我们可以在5.0版本之前的Echarts当中复制过来,或者我们可以从这里 http://datav.aliyun.com/portal/school/atlas/area_selector 进行下载json文件进行使用
2、地图绘制
先给一个用于绘制地图的canvas的div
<div id="china-map" style="width: 100%;height: 100%;"></div>
之后我们在当前vue导入echarts和前面下载的地市的json文件，并且这里使用的是5的版本，对于4的版本还可以采用以下方式引入，这里绘制地图以安徽为例。
// 5.0以前 import echarts from 'echarts'; // 5.0以后 import * as echarts from 'echarts'; import JSON from '../mapJson/anhui.json';
往下就是构建地图所需要使用的Echarts对象了，这里先定义一个mapOption对象，之后我们直接在方法当中对这个mapOption进行赋值
this.mapOption= {
color: ['#5470c6'],
tooltip: {
trigger: 'item',
renderMode: 'html',
// 触发方式
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: {
// 显示省份标签
show: false,
textStyle: {
color: '#fff',
fontSize: 10
}
},
emphasis: {
// 对应的鼠标悬浮效果
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对象，以及前面定义的div对象，将这里初始化了的mapOption进行传入即可：
echarts.registerMap('anhui', JSON, {});
const myChart = echarts.init(
document.getElementById('china-map'),
);
myChart.setOption(this.mapOption);
window.addEventListener('resize', () => {
myChart.resize();
});
之后可以查看效果：这样的话对于一个绘制地图也就基本上完成了。
同样的举一反三，对于绘制其他地市的地图，我们只需要导入其他地市的json即可，
import JSON from '../mapJson/zhejiang.json';
并且将mapOption下的geo的map和mapType进行响应的调整即可，其余代码都可进行复用，不必修改：查看效果：
3、根据经纬度进行标点画线
这里还是先继续用安徽的地图来进行说明，这里的Echarts来进行绘制点和线主要就是通过叠加，也就是在地图上分别使用Echarts进行画点画线。而对于绘制点和线直接在series当中进行添加相关配置即可。
{
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,
}
这里点的数据 dataGeo 要进行构建：其结构如下：分别是城市名称与其经纬度。
mapPointData.push({
name: '六安',
value: [116.50, 31.75]
})
mapPointData.push({
name: '马鞍山',
value: [118.51, 31.68]
})
mapPointData.push({
name: '宿州',
value: [116.98, 33.63]
})
这样添加完成之后可以进行浏览页面查看效果：到这里根据经纬度进行绘制点也就完成了。
同样的绘制线也和点一样，同样在series当中再添加一个绘制线的对象.
{
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>`;
},
},
},
同样的我们需要对线的数据lineData进行构建：数据格式如下：分别表示起始地市的名称与其对应地市的经纬度
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搭建的项目，拉取项目后先 npm install 再 npm run dev 运行
git地址：https://gitee.com/lizuoqun/web-lzq-echarts.git
总结
到此这篇关于如何利用Echarts根据经纬度给地图画点画线的文章就介绍到这了,更多相关Echarts地图画点画线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要大家介绍了查看当前vue项目所需Node.js版本的方法,文章通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了如何实现无感刷新token，当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。下面我们大家一起进入文章看看实现思路即详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了基于Vue.js实现简单搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue表单之v-model绑定下拉列表功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vuejs 单文件组件实例详解,需要的朋友可以参考下2018-02-02
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
这篇文章主要介绍了vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue如何解决每次发版都要强刷清除浏览器缓存问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论