美文网首页
Eachrts离线地图

Eachrts离线地图

作者: demoxjl | 来源:发表于2019-10-21 10:26 被阅读0次
world.png

代码如下:

<template>

<div id="myMap"></div>

</template>

<script>

import echarts from 'echarts';

import '../../node_modules/echarts/map/js/world.js';

export default {

data(){

return{}

},

mounted(){

this.drawMap();

},

methods:{

drawMap(){

var myCharts = this.$echarts.init(document.getElementById('myMap'));

var geoCoordMap = { // 各城市的经纬度

'南宁': [108.479, 23.1152],

'广州': [113.5107, 23.2196],

'深圳': [114.085947, 22.547],

'重庆': [107.7539, 30.1904],

'芬兰': [24.909912, 60.169095],

'美国': [-100.696295, 33.679979],

'日本': [139.710164, 35.706962],

'韩国': [126.979208, 37.53875],

'瑞士': [7.445147, 46.956241],

'东南亚': [117.53244, 5.300343],

'澳大利亚': [135.193845, -25.304039],

'德国': [13.402393, 52.518569],

'英国': [-0.12797, 51.507702],

'加拿大': [-98.308968, 56.954681]

};

/*

记录下七点城市和终点城市的名称,以及权重,数组第一位为终点城市,数组第二位为起点城市,以及城市的权重,

就是图上圆圈的大小

* */

var SZData = [

[{name: '深圳'}, {name:'芬兰'}],

[{name: '深圳'}, {name:'德国'}],

[{name: '深圳'}, {name:'英国'}],

[{name: '深圳'}, {name:'韩国'}],

[{name: '深圳'}, {name:'日本'}],

[{name: '深圳'}, {name:'瑞士'}],

[{name: '深圳'}, {name:'加拿大'}]

];

var NNData = [

[{name:'南宁'},{name:'澳大利亚',value: 70}]

];

//飞机航线

var planePath ='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

var allData = function(data){

const coordinate = [];

for(var i = 0; i < data.length; i++){

var dataItem = data[i];

var startCoord = geoCoordMap[dataItem[0].name]; //起始点坐标

var endCoord = geoCoordMap[dataItem[1].name]; //终点坐标

if(startCoord && endCoord){

coordinate.push([

{

coord: startCoord

},

{

coord: endCoord

}

]);

}

}

return coordinate;

};

var corlors =['#ffa022', '#46bee9'];

var series = [];

[['深圳',SZData],['南宁',NNData]].forEach(function(item, i) {

series.push(

{

// name: item[0],

type: 'lines',

zlevel: 1,

effect:{

show: true,//是否显示动画

period: 6,//显示动画时长

trailLength: 0.7,//轨迹长度

color: '#fff',

symbolSize: 3  //特效大小

},

lineStyle:{//正常情况下线条

normal:{

color: corlors[i],

width: 0,

curveness: 0.2 //线条曲线

}

},

data: allData(item[1]) //特效起始点位置

},

{//小飞机航线

// name: item[0].name + 'Top10',

type: 'lines',

zlevel: 2,

// symbol: ['none','arrow'],//设置箭头

symbolSize: 10,

effect: {

show: true,

period: 6,

trailLength: 0,

symbol: planePath,

symbolSize: 15

},

lineStyle:{

normal:{

color: '#46bee9',

width:1,

opacity: 0.6,

curveness: 0.2

}

},

data: allData(item[1])

},

{//散点

// name: item[0].name + 'Top10',

type: 'effectScatter',

coordinateSystem: 'geo', //采用地理坐标点

zlevel:3,

rippleEffect: {

brushType: 'stroke' //波纹效果

},

label:{

normal:{//默认的文本标签显示样式

show: true,

position: 'left',//标签位置

formatter: '{b}' //标签内容格式容器

}

},

// symbolSize: function(val){

// return val[2] /8;

// },

itemStyle:{

normal:{

color: corlors[i]

}

},

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

return {

name: dataItem[1].name, //起始点名称

value: geoCoordMap[dataItem[1].name],

//散点大小

symbolSize:dataItem[1].value /8

};

})

});

});

series.push({

type: 'effectScatter',

coordinateSystem: 'geo',

zlevel:3,

rippleEffect: {

brushType: 'stroke'

},

label:{

normal:{

show: true,

position: 'left',

formatter: '{b}'

}

},

symbolSize(val){

return val[2] / 8;

},

itemStyle:{

normal:{

color: corlors[1]

}

},

data:[

{

name: '深圳',

value: [114.085947,22.547],

label: {

normal:{

position: 'top'

}

}

},

{

name: '南宁',

value: [108.479, 23.1152],

label: {

normal:{

position: 'bottom'

}

}

}

]

});

myCharts.setOption({

title:{

text: '攻略图',

            left: 'center',

            textStyle: {

                color: '#46bee9'

            }

},

textStyle:{

fontSize: 12

},

tooltip:{

trigger: 'item'

},

legend:{

orient: 'vertical',

top: 'bottom',

left: 'right',

data: ['深圳','南宁'],

textStyle:{

color: '#fff'

},

selectedMode: 'single'

},

geo: {

map: 'world',

roma: false,//禁止缩放平移

itemStyle:{ //每个区域样式

normal: {

areaColor: '#323c48'

},

emphasis:{

areaColor: '#2a333d'

}

},

label:{

emphasis:{

show: false

}

},

//选中的区域

regions:[

{

name: 'China',

selected: true,

itemStyle: { //高亮时的样式

emphasis:{

areaColor: '#7d7d7d'

}

},

label: { //高亮时不显示标签

emphasis:{

show:true

}

}

}

],

itemStyle:{

normal:{

areaColor: '#323c48',

borderColor: '#404a59'

},

emphasis:{

areaColor: '#2a33dd'

}

}

},

series: series

});

链接接口代码

1 2 3 4

}

}

}

/**

* tooltip:{

* trigger: 'axis',

* confine:true,

* textStyle:{

* align:'center'

* },

* axisPointer:{

* type:'cross',

* label:{

* backgroundColor: '#6a7985'

* }

* }

* }

*

* */

</script>

<style>

#myMap{

width: 100%;

height: 600px;

}

</style>

相关文章

网友评论

      本文标题:Eachrts离线地图

      本文链接:https://www.haomeiwen.com/subject/mlgzmctx.html