蜂行天下驾驶舱地图的实现

10大屏地图的实现学习目标熟悉China.js文件（重点）掌握地图实现的步骤（难点）132知识思政技能能在vue中实现echarts地图能对echarts地图进行美化（重点）培养精益求精的工作态度培养团队合作精神一、china.js简介

在vue中实现中国地图是基于echarts.js和china.js来完成的。china.js

是一个开源的JavaScript库,它提供了许多与地理位置、时区、语言等相关的方法和属性,可以帮助开发者更加方便地处理与地理位置相关的数据。在echarts最新的5.4.0版本中，已不能直接引用china.js来绘制中国地图，需要自己下载china.js包china.js下载链接如下：/download/m0_54583478/35175000?utm_source=bbsseo在需要呈现中国地图的组件里直接引用china.js，最后结合ECharts图表,实现散点图二、大屏地图的实现

1、首先把下载的china.js文件复制到项目的根目录下。2、在项目component文件夹下新建地图子组件,命名为chinaMap.vue在<script>标签中输入import语句，引用地图数据文件“china.js”。3、和前面对柱状图等echarts图表的使用方法一样，

在chinaMap.vue在<script>标签引用vue框架中的ref和onMounted方法、echarts库二、大屏地图的实现

4、由于本项目的地图要呈现出不同地区的花期和蜜源植物，所以，定义变量geoCoordMap保存每个地名对应的经纬度以及花期信息，以方便后期在地图上呈现。var

geoCoordMap

={

广州:[113.5107,23.2196,["1月到3月"

+

":"

+

"采油菜","紫云英"]],

北京:[116.4551,40.2539,["4月到5月"

+

":"

+

"采枣树"

+

"</br>"

+

"6月"

+

":"

+

"紫云英"]],

南昌:[116.0046,28.6633,["3月到4月"

+

":"

+

"采油菜","紫云英"]],

长春:[125.8154,44.2584,[

"7月"

+

":"

+

"采草木犀",

"荆条",

"椴树"

+

"</br>"

+

"8月"

+

":"

+

"向日葵,苕条"]],

呼和浩特:[111.4124,40.4901,["8月-9月"

+

":"

+

"月采"]],

};二、大屏地图的实现

5、定义地图上放峰线路的起点和终点数据：使用数组变量

gzData、ncData、bjData、ccData

分别保存了广州到广州、广州到南昌、南昌到北京、北京到长春、长春到呼和浩特的起点和终点地名。var

gzData

=[

[

{

name:"广州",

},

{

name:"广州",

},

],

[

{

name:"广州",

},

{

name:"南昌",

},

],

];var

ncData

=[

[

{

name:

"南昌",

},

{

name:

"北京",

},

],

];var

bjData

=[

[

{

name:

"北京",

},

{

name:

"长春",

},

],

];var

ccData

=[

[

{

name:

"长春",

},

{

name:

"呼和浩特",

},

],

];二、大屏地图的实现

6、定义

vue的

ref

对象：使用

ret

变量创建了一个ref对象，用于在

vue模板中引用

<divref="ret"id="dom"></div>

元素。varret=ref()二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。①使用

echarts.init()

方法初始化一个echarts实例，并传入之前定义的

ret.value

对象作为容器。var

mecharts=echarts.init(ret.value)二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。②定义数据处理函数

convertData：这个函数用于将起点和终点的地名转换成地理坐标，并将转换后的数据以适合echarts的格式返回。var

convertData=function(data){

var

res=[]

for(let

i=

0;i

<

data.length;i++){

var

dataItem=data[i]

var

fromCoord=geoCoordMap[dataItem[0].name]

var

toCoord=geoCoordMap[dataItem[1].name]

if(fromCoord!=toCoord){

res.push([

{

coord:fromCoord

},

{

coord:toCoord

}])}

}

return

res;

}

geoCoordMapcode函数是一个用于地理坐标映射的函数，它将地球上的经纬度坐标转换为地图上的点，从而在地图上准确地显示出这些坐标的位置二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。定义配置项

series：这里使用循环遍历前面定义的起点和终点数据，依次生成一个包含起点、终点坐标和连线的系列数据对象，并将其添加到

series

数组中。var

series=[];

[

["广州",gzData],

["南昌",ncData],

["北京",bjData],

["长春",ccData]

].forEach(function(item){

console.log("item",item);

console.log("convertData(item[1]",convertData(item[1]));

series.push({

//带有起点和终点的线数据的绘制

主要用于地图上的航线

数据的可视化

type:"lines",

//数据

data:convertData(item[1])

})

})二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。④定义最终的echarts配置项

option：设定地图类型为“china”，并设置缩放比例为1.2。然后将之前生成的

series

数组作为系列数据添加到

option

中。var

option={

geo:{

map:'china',

//当前视角的缩放比例

zoom:1.2

},

series:series

}二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。⑤使用

setOption

方法将配置项应用到echarts实例上。mCharts.setOption(option)二、大屏地图的实现

7、使用

onMounted函数，在页面加载完成后执行下面的逻辑。⑥样式设置：通过定义的样式规则，对渲染图表的容器

<divid="dom"></div>

进行样式设置，设置其宽度为600px，高度为400px，边距为60px。#dom{

width:600px;

height:400px;

margin:60px;

}二、大屏地图的实现

经过以上7个步骤，在中间区域呈现中国地图。下面将对地图进行美化。三、地图的美化

1、线形的尾迹特效实现对地图上城市之间的连接线进行特效设置。在series.push片段中的type:“lines”后，输入如下线形的尾迹特效代码。//线特效的配置

effect:{

//特效尾迹的长度取从0到1的值数值越大尾迹越长

trailLength:

0,

//特效图形的标记。'circle','rect','roundRect','triangle','diamond','pin','arrow','none'

Symbol:"arrow",

//

特效图形的标记

show:true,

//特效的时间

period:6,

//特效颜色

color:"#fff",

//特效标记的大小

symbolSize:3

},三、地图的美化

2、设置连接线的颜色以及宽度接1，在其后面一行，继续输入如下代码，设置线的宽度、透明度和颜色//线的数组

lineStyle:{

color:"#3ed4ff",

//线条宽度

width:2,

//线条透明度

opacity:2,

},三、地图的美化

2、设置连接线的颜色以及宽度这段代码执行之后，线的颜色变为设置的蓝色。三、地图的美化

3、设置带有涟漪特效的气泡图在数据data后，编写代码，对数值设置带有涟漪特效的气泡图，这种动画特效可以将数据视觉显示。三、地图的美化

3、设置带有涟漪特效的气泡图涟漪特效的气泡图具体代码如下：{

//数值带有涟漪特效的气泡图，利用动画特效可以将一些需要突出的数据进行视觉突出

type:"effectScatter",

//利用地址坐标系

coordinateSystem:"geo",

//图形的显示文本

label:{

//是否显示标签

show:true,

position:"bottom",

formatter:"{b}"

},

//图形颜色

itemStyle:{

//图形的颜色

color:

"#3ed4ff",

},

data:item[1].map(function(dataItem){

return{

name:dataIte