Echarts使用笔记(二) 如何在地图上添加线性动画和图标

首先声明一些变量、地图对象以及若干个点

        // 垃圾车图标的长和宽
        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]
        }
    ]]
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容