首先声明一些变量、地图对象以及若干个点
// 垃圾车图标的长和宽
var carw = 28;
var carh = 16;
// 动画运动时间
var time = 60;
// 地图缩放比例
var zoom = 17;
// 地图处理
var myMap;
// 坐标点
var geoCoordMap = {
'大活': [117.0626033810, 39.2452762269],
'食堂': [117.0592977018, 39.2453218096]
};
接下来声明绘制地图方法,同时在地图上绘制了若干图标,
从下面我们可以看出来option中是通过bmap进行地图的绘制的,而其他图形则通过series对象数组中的图表对象进行控制的,这里type使用了scatter就是散点图,就是在每个点上去画。
因为在地图上层绘制图表,所以zlevel为2,
symbolSize控制图形大小,symbol可以使用path://、image://链接等,还没有尝试过本地图片好不好使。
data就按照我的格式去写就可以在对应的经纬度位置绘制图标了。
function map() {
// 基于准备好的dom,初始化echarts实例
myMap = echarts.init(document.getElementById('map'));
option = {
bmap: {
center: [117.0609231204, 39.2453384287],
zoom: zoom,
roam: true,
},
series: [{
name: 'cars', //名字
type: 'scatter', //类型为散点型
coordinateSystem: 'bmap',
zlevel: 2,
//设置标签(也就是这个点的文本说明)
label: {
normal: { //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式。
show: false
}
},
//散点的尺寸:当数据加载完成之后执行回调,通过返回值来设置大小
symbolSize: [carw, carh],
//设置点的样式
symbol: "image://http://trash.hebut.top/images/cashcar.png",
//设置数据,使用map方法返回一个新数组(因为data不能使用回调方法),格式:[{name:"广州",value:[坐标x,y,value]},{第二个点},.....]
data: [ {
name: "大活a",
value: [117.062619907, 39.2455712159]
}, {
name: "大活b",
value: [117.0626038143, 39.2454507276]
}, {
name: "大活c",
value: [117.0626033810, 39.2452762269]
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myMap.setOption(option);
window.addEventListener("resize", function () {
myMap.resize();
});
}
而绘制动画也很简单,只需要在上面的series数组中添加一项即可,唯一需要注意的就是data的格式
{
name: '车辆跟踪', //名字
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 2, //1.设置的层一样,则会使组件或图表样式使用同一个canvas渲染。2.数值越大越在上面
effect: {
show: true,
animation: false,
loop: false,
period: time,
symbol: "image://http://trash.hebut.top/images/cashcar@up@left.png",
symbolSize: [carh, carw] //设置图标大小
},
lineStyle: {
normal: {
color: '#46bee9',
width: 1,
opacity: 0.0, //线条的透明度
curveness: 0.0 // 线条曲度
}
},
data: [[
{
"name": "大活",
"coord": [117.062603381, 39.2452762269]
},
{
"name": "食堂",
"coord": [117.0592977018, 39.2453218096]
}
]]
}