echarts地图根据经纬度显示,echarts地图点击获取经纬度
最近工作中遇到一个需求。我需要用电子地图在地图上标记点。下面这篇文章主要介绍如何使用Echarts在地图上根据经纬度绘制点和线的相关信息。有需要的朋友可以参考一下。
目录
1、相关介绍2、地图绘制3、根据经纬度进行标点和线图汇总。
1、相关介绍
使用Echar绘制地图对象，首先我们需要地图的json文件，在Echarts依赖它的时候会默认引入相关的json文件，所以这个地图的后续使用可以参考这里的json文件来绘制Echarts地图。
但是，我在后续重建项目的时候发现了一个问题。Echarts的依赖包下没有这样的映射文件。我心里想，这不是混淆视听。我在哪里可以找到这个json文件？后来对比了版本，发现Echarts在5.0版本之前会默认打包这些地图的json文件，5.0之后就不会打包加入依赖项了。可以看看官网升级指南。
也就是说，仍然可以在哪里找到这个json文件。在这里，我们可以从5.0版本之前的Echarts复制过来，也可以从http://datav.aliyun.com/portal/school/atlas/area_selector下载json文件来使用。
2、地图绘制
先给一个用来画地图的画布div。
div id=中国地图 style= width:100%；高度：100%；/div
之后我们导入echarts的json文件和当前vue中较早下载的城市，这里用的是版本5。版本4也可以通过以下方式引入。这里以安徽为例画个图。
//5.0之前
从“echarts”导入e charts；
//5.0之后
从“echarts”导入*作为e charts；
从导入JSON./map JSON/Anhui . JSON ；
这是构建地图所需的Echarts对象。这里，我们首先定义一个mapOption对象，然后在方法中直接分配mapOption。
this.mapOption={
颜色：[#5470c6]，
工具提示：{
触发器：“项目”，
render mode:“html”，
//触发模式
triggerOn:“点击”，
可输入：真，
background color:“# fff”，
填充：0，
textStyle: {
颜色： #000 ，
字体大小：“12”
},
extraCssText: box-shadow:0 0 3px rgba(0，0，0，0，0.3)；
},
dispatchAction: {
类型：“淡化”
},
roam:假，
roamController: {
秀：真的，
x:右，
mapTypeControl: {
中国：没错
}
},
系列：[]，
地理位置：{
秀：真的，
地图：‘安徽’，
类型：“地图”，
映射类型：“安徽”，
roam:假，
标签:{
正常：{
//显示省标签
秀：假的，
textStyle: {
颜色： #fff ，
字体大小：10
}
},
重点：{
//相应的鼠标悬停效果
秀：真的，
//选择后的字体样式
textStyle: {
颜色： #000 ，
字体大小：14
}
}
},
项目样式：{
颜色： #ddb926 ，
正常：{
area color:“# 8 ABC D1”，
边框颜色： #fff ，
边框宽度：1
},
重点：{
边框宽度：0.5，
边框颜色： #8abcd1 ，
areaColor: #fff
}
},
重点：{
标签:{
显示：假
}
}
}
}
最后，直接获取前面定义的json对象和div对象，传入这里初始化的mapOption:
echarts.registerMap(安徽，JSON，{ })；
const myChart=echarts.init(
document.getElementById(中国地图)，
);
mychart . setoption(this . map option)；
window . addevent listener( resize ，()={
mychart . resize()；
});
之后可以检查一下效果：这样的话，一张地图绘制基本完成。
同样，要绘制其他城市的地图，只需要从其他城市导入json即可。
从导入JSON./map JSON/Zhejiang . JSON ；
此外，mapOption下geo的map和mapType可以相应调整，其他代码无需修改即可重用：查看效果：
3、根据经纬度进行标点画线
这里，我们继续用安徽的地图来说明。这里的Echarts主要是用来通过叠加来绘制点和线的，也就是Echarts分别用来在地图上绘制点和线。画点画线，直接串联添加相关配置。
{
名称： ，
类型：“散点图”，
坐标系统：“地理”，
颜色：[#000]，
工具提示：{
位置：“右侧”，
颜色： #000 ，
格式化程序(d) {
控制台. log(d)
return ` div style= padding:5px 10px；【$ { d . data . name }】/div `；
},
},
数据：数据地理，
}
这里要建立点的数据dataGeo:其结构如下：城市名称及其经纬度。
mapPointData.push({
名称：六安，
值：[116.50，31.75]
})
mapPointData.push({
姓名：马鞍山，
值：[118.51，31.68]
})
mapPointData.push({
名称：苏州，
值：[116.98，33.63]
})
这样，添加完成后，就可以浏览页面查看效果了：在这里，按照经纬度画点，然后就完成了。
同一个画线同一个点，串联添加另一个画线对象。
{
名称： ，
类型：“行”，
zlevel: 6，
线型：{
类型：“实心”，
宽度：1，
不透明度：1，
弯曲度：0，
方向：“水平”，
颜色： #000 ，
},
秀：真的，
数据：lineData，
工具提示：{
位置：“右侧”，
颜色： #000 ，
格式化程序(d) {
控制台. log(d)
return ` div style= padding:5px 10px；【$ { d . data . point[0]}】-【$ { d . data . point[1]}】/div `；
},
},
},
同样，我们需要构造线路的lineData:数据格式如下：分别表示出发城市的名称及其对应城市的经纬度。
lineData.push({
点：[六安，马鞍山]，
坐标：[
[116.50, 31.75],
[118.51, 31.68]
],
})
lineData.push({
点：[苏州，马鞍山]，
坐标：[
[116.98, 33.63],
[118.51, 31.68]
],
})
lineData.push({
点：[苏州，六安]，
坐标：[
[116.98, 33.63],
[116.50, 31.75]
],
})
最后，检查效果：
Gitee源码地址，vue-cli搭建的项目，拉完项目后，npm安装然后npm运行dev运行。
Git地址：https://gitee.com/lizuoqun/web-lzq-echarts.git
总结
关于如何使用Echarts根据经纬度在地图上绘制点和线的文章到此结束。有关Echarts的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。