<script type="text/javascript" src="js/bmap.min.js"></script> <script type="text/javascript" src="/js/china.js"></script>
<script type="text/javascript" src="/js/echarts4.0.4.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=XlQ9m3CqMs1UKUbuPIN15LsDp7VC6hoM"></script>
//必须加入以上四种文件
<div class="map-box2 " id="singel-map" style="height:400px;width:500px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('level-map'));
var color = ['#cf5634', '#fff200',];
var startPoint = { //页面初始化坐标点
x: 114.254722,
y: 30.550605
};
// 地图自定义样式
var bmap = {
center: [startPoint.x, startPoint.y],
zoom: 15,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
},
{
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
},
{
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
},
{
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color':'#003051'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
},
{
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
},
{
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
},
{
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}
]
}
}
var addr = [
[{ name: '琴台大剧院' }, { jd:114.2592716217 , wd: 30.5616327403 }],
[{ name: '钟家村' }, { jd:114.26728 , wd: 30.549565 }],
[{ name: '钟家1村' }, { jd:114.26728 , wd: 30.539565 }],
[{ name: '汉阳区江堤街江堤社区北方向' }, { jd:114.2530059814 , wd: 30.5378686275 }],
[{ name: '汉阳大道钟家村公交站' }, { jd:114.254722 , wd: 30.550605 }]
];
var series3 = [];
addr.forEach(function(item, i) {
series3.push({
name: addr[i][0].name ,
type: 'effectScatter', // 坐标点数据
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 20,
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#cf5634'
}
},
data: [{
name: addr[i][0].name,
value: [addr[i][1].jd, addr[i][1].wd]
}]
} );
});
addr.forEach(function(item, i) {
if(i<addr.length-1){
var endNum=i+1;
series3.push({
type: 'lines',
coordinateSystem: 'bmap', // 线连接， 只需要坐标，为 起点和终点
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol:'triangle',
symbolSize: 10
},
lineStyle: {
normal: {
color: '#cf5634',
width: 1,
opacity: 0.4,
curveness: 0
}
},
data: [{ coords: [ [addr[i][1].jd,addr[i][1].wd],[addr[endNum][1].jd,addr[endNum][1].wd]]}]
});
}
});
addr.forEach(function(item, i) {
if(i<addr.length-1){
var endNum=i+1; //点移动的拖尾特效
series3.push({
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#cf5634',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.0
}
},
data: [{ coords: [ [addr[i][1].jd,addr[i][1].wd],[addr[endNum][1].jd,addr[endNum][1].wd]]}]
});
}
});
var color = ['#cf5634', '#fff200',];
option = {
bmap: bmap,
zoom: 13,
color: ['gold', 'aqua', 'lime'],
series: series3
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
方法二
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
$("#level-map").css('width',$(".full-view").width()*0.9);
$("#level-map").css('height',$(".full-view").height()*1.2);
var myChart3 = echarts.init(document.getElementById('level-map'));
var ZOOM = 12 //地图默认放大
var isEffect = true //是否要飞机动效
var lineWidth = 2 //线条宽度
var pointSymbolSize = 30 //中心店黑色小球大小
//中心点
var point = [{
"name": "济宁医学院附属医院",
"value": ["116.58724000", "35.41459000", 507]
}]
//红色线条
var targetInPoint = [{
"name": "济宁市第一人民医院",
"value": ["116.5932655334", "35.2982158410", "248"]
}, {
"name": "济宁市第二人民医院",
"value": ["116.6090583801", "35.5448656791", "163"]
}, {
"name": "济宁市第二人民医院",
"value": ["116.5390583801", "35.5748656791", "163"]
}, {
"name": "济宁市市直机关医院",
"value": ["116.46935206137962", "35.4140962246", "96"]
}]
//黄色线条
var targetOutPoint = [{
"name": "济宁市市骨伤医院",
"value": ["116.6422577477", "35.5020987788", "144"]
}, {
"name": "骨伤医院2",
"value": ["116.6822577477", "35.4020987788", "143"]
}, {
"name": "济宁市第三人民医院",
"value": ["116.5090583801", "35.5648656791", "163"]
},{
"name":"骨伤医院1",
"value": ["116.3822577477", "35.3020987788", "237"]
}]
var inPoint = []
var outPoint = []
targetInPoint.forEach((item, index) => {
targetInPoint[index]['tag'] = 'in'
inPoint.push({
name: point[0].name,
toname: item.name,
coords: [point[0].value.slice(0, 2), item.value.slice(0, 2)],
})
})
targetOutPoint.forEach((item, index) => {
targetOutPoint[index]['tag'] = 'out'
outPoint.push({
name: point[0].name,
toname: item.name,
coords: [point[0].value.slice(0, 2), item.value.slice(0, 2)],
})
})
var targetPoint = [...targetInPoint, ...targetOutPoint]
function getSeries() {
var arr = [{
type: 'lines',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 10,
data: outPoint,
//线上面的动态特效
effect: {
show: isEffect,
period: 6,
trailLength: 0,
symbol:'triangle',
symbolSize: 17
},
lineStyle: {
normal: {
width: lineWidth,
color: '#fff200',
curveness: 0.2,
}
}
}, {
type: 'lines',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 10,
data: inPoint,
effect: {
show: isEffect,
period: 6,
trailLength: 0,
symbol:'triangle',
symbolSize: 18
},
lineStyle: {
normal: {
width: lineWidth,
color: '#cf5634',
curveness: 0.3,
}
}
}, {
type: 'effectScatter',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 10,
// symbolSize: 6,
symbolSize: function(value) {
var v = value && value[2] //可自动以更改
var size = parseInt(v) / 4
if (size >= 20) return 20
if (size <= 2) return 2
return size
// return 20
},
label: {
normal: {
show: false,
fontWeight: 300,
position: 'right',
formatter: ' {b}',
textStyle: {
fontFamily: '宋体', //字体样式可改
},
}
},
rippleEffect: {
period: 8,
scale: 2,
brushType: 'stroke',
},
showEffectOn: 'render',
itemStyle: {
normal: {
textStyle: {
fontWeight: 700,
fontStyle: 'italic',
fontSize: '20',
fontFamily: 'cursive',
},
color: function(value) {
switch (value.data.tag) {
case 'in': //可调整颜色
return '#D07070'
break;
case 'out': //可调整颜色
return '#fff200'
break;
default:
}
},
}
},
data: targetPoint,
},
{
type: 'effectScatter',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 10,
symbolSize: pointSymbolSize,
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}',
textStyle: {
fontWeight: 600,
fontSize: '16',
fontFamily: '宋体',
},
}
},
showEffectOn: 'render',
rippleEffect: {
period: 8,
scale: 2,
brushType: 'stroke',
},
itemStyle: {
normal: {
color: '#D07070',
},
},
data: point,
},
]
return arr
}
option = {
bmap: {
center: point[0].value.slice(0, 2),
zoom: 12,
roam: true,
//地图样式的调整
mapStyle: {
styleJson: [
{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
},
{
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
},
{
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
},
{
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color':'#003051'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
},
{
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
},
{
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
},
{
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}
]
}
},
series: getSeries()
}
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(option);
</script>