echarts 北京公交线路-线路效应

七月吃橘子

已于 2023-03-23 16:03:58 修改

阅读量2.2k

点赞数 4

文章标签： html web

于 2020-08-28 10:05:17 首次发布

本文链接：https://blog.csdn.net/li836779537/article/details/108274087

版权

echarts 北京公交路线 - 线特效

- 效果图

效果图

**
在这里插入图片描述

注意：有两个地方需要注意，一个是echarts的 lines-bus.json，我把它放在页面的同级目录了（这个随意哈路径写对就行），很多人不知道这个数据从哪来。我也是找了很久，分享给你们去下载链接: https://pan.baidu.com/s/1eA37UhpvFw_jhCbuW89AHw 提取码: 4cbn

还有一个需要注意的地方是百度的AK，我遇到的情况是页面出来后会提示 “百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥” 后来去百度创建一个你的密钥AK引入页面就行了，怎么创建看这个 https://blog.csdn.net/guo_qiangqiang/article/details/86677966
在这里插入图片描述

废话不多说，直接上代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/jquery/jquery.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7r2WfP8NOg3GZdSpK5vw8OmPwm3F3jij"></script>
	<script type="text/javascript">
	
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '北京公交路线 - 线特效';

$.getJSON('lines-bus.json', function(data) {
    var hStep = 300 / (data.length - 1);
    var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
                pt = [
                    prevPt[0] + pt[0],
                    prevPt[1] + pt[1]
                ];
            }
            prevPt = pt;

            points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
            coords: points,
            lineStyle: {
                normal: {
                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                }
            }
        };
    }));
    myChart.setOption(option = {
        bmap: {
            center: [116.46, 39.92],
            zoom: 10,
            roam: true,
            mapStyle: {
              'styleJson': [
                {
                  'featureType': 'water',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#031628'
                  }
                },
                {
                  'featureType': 'land',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#000102'
                  }
                },
                {
                  'featureType': 'highway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#000000'
                  }
                },
                {
                  'featureType': 'arterial',
                  'elementType': 'geometry.stroke',
                  'stylers': {
                    'color': '#0b3d51'
                  }
                },
                {
                  'featureType': 'local',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#000000'
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#000000'
                  }
                },
                {
                  'featureType': 'railway',
                  'elementType': 'geometry.stroke',
                  'stylers': {
                    'color': '#08304b'
                  }
                },
                {
                  'featureType': 'subway',
                  'elementType': 'geometry',
                  'stylers': {
                    'lightness': -70
                  }
                },
                {
                  'featureType': 'building',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#000000'
                  }
                },
                {
                  'featureType': 'all',
                  'elementType': 'labels.text.fill',
                  'stylers': {
                    'color': '#857f7f'
                  }
                },
                {
                  'featureType': 'all',
                  'elementType': 'labels.text.stroke',
                  'stylers': {
                    'color': '#000000'
                  }
                },
                {
                  'featureType': 'building',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#022338'
                  }
                },
                {
                  'featureType': 'green',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#062032'
                  }
                },
                {
                  'featureType': 'boundary',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#465b6c'
                  }
                },
                {
                  'featureType': 'manmade',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#022338'
                  }
                },
                {
                  'featureType': 'label',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }
              ]
            }
        },
        series: [{
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
                normal: {
                    // color: '#c23531',
                    // color: 'rgb(200, 35, 45)',
                    opacity: 0.2,
                    width: 1
                }
            },
            progressiveThreshold: 500,
            progressive: 200
        }, {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLines,
            lineStyle: {
                normal: {
                    width: 0
                }
            },
            effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 1.5
            },
            zlevel: 1
        }]
    });
});;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
</body>
</html>


参考链接：https://blog.csdn.net/u010983881/article/details/53219906/
官网Demo地址：https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect

七月吃橘子

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
9
评论
echarts 北京公交线路-线路效应

echarts 北京公交路线 - 线特效效果图**效果图**注意：有两个地方需要注意，一个是echarts的 lines-bus.json，我把它放在页面的同级目录了（这个随意哈路径写对就行），很多人不知道这个数据从哪来。我也是找了很久，分享给你们去下载链接: https://pan.baidu.com/s/1eA37UhpvFw_jhCbuW89AHw 提取码: 4cbn还有一个需要注意的地方是百度的AK，我遇到的情况是页面出来后会提示 “百度未授权使用地图API,可能是因为您提供的密钥不是
复制链接

扫一扫