echarts地图绘制部分上海市公交线路数据_echarts.map 上海 example-CSDN博客

本文链接：https://blog.csdn.net/coldriversnow/article/details/123900819
该博客展示了如何使用ECharts和百度地图API实现上海公交线路的地理可视化。代码中定义了具体的公交线路坐标数据，并配置了地图样式和公交线路的线条样式，创建了一个交互式的地图应用，用户可以查看和探索上海的公交网络。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
源代码地址
MyHTML/roadMap.html at gh-pages · a1115040996/MyHTML · GitHub
预览地址
https://a1115040996.github.io/MyHTML/echarts/roadMap.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="box" style="width: 100%;height: 100%;"></div>
        <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bmap.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 使用的是2.0版本的地图数据 -->
        <script src="http://api.map.baidu.com/api?v=3.0&ak=UAumsTfvpKBlNPUd9e5PvAEnR0YGNllO" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //  const searchList = ["770路","771路","774路","775路","776路","778路","779路","780路","781路","783路","784路","784路区间","785路","787路","789路","790路","791路","793路B线","793路","794路","795路","798路","799路","801路","802路","804路","806路","807路","808路","809路","810路","812路","813路","816路","817路","818路","819路","822路","823路","824路","825路","829路","830路","836路","837路","842路","843路","844路","845路","848路","849路","850路","851路","854路","855路","856路","858路","860路","862路","863路","864路","868路","869路","870路","871路","875路","876路","909路"];
            //  上海市暂时添加这几个公交线路数据 后期再补
            busLines = [{"coords":[[121.448029,31.198981],[121.448319,31.19844],[121.423055,31.179337],[121.423241,31.17883],[121.423274,31.178741],[121.423556,31.177975],[121.423786,31.177349],[121.423793,31.177329],[121.423796,31.177322],[121.424074,31.176597],[121.424074,31.176597],[121.424202,31.176189],[121.424362,31.175681],[121.424702,31.174598],[121.424771,31.1743],[121.425043,31.173124],[121.42508,31.172964],[121.42508,31.172964],[121.425099,31.172824],[121.425219,31.171954],[121.42522,31.171947],[121.425419,31.170691],[121.425552,31.169854],[121.425601,31.169545],[121.42571,31.168856],[121.425778,31.168427],[121.425778,31.168426],[121.425898,31.167737],[121.426078,31.166702],[121.426132,31.166393],[121.426179,31.166124],[121.426379,31.164977],[121.426457,31.164528],[121.426457,31.164528],[121.4258,31.164317],[121.423929,31.163844],[121.423301,31.163685],[121.421621,31.16326],[121.421046,31.163115],[121.421033,31.163112]],"lineStyle":{"normal":{"color":"rgba(135, 206, 235, 1)"}}}]
            const option = {
                bmap: {
                    center: [121.494687,31.23937],
                    zoom: 12,
                    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': {
                                // 'color': '#000000',// 默认透明显示地铁线路
                                '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.4,
                            width: 2.5
                        }
                    },
                    progressiveThreshold: 500,
                    progressive: 200
                }, {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: busLines,
                    lineStyle: {
                        normal: {
                            width: 0
                        }
                    },
                    effect: {
                        constantSpeed: 50,
                        show: true,
                        trailLength: 0.6,
                        symbolSize: 3
                    },
                    zlevel: 1
                }]
            };
            const myChart = echarts.init(document.getElementById('box'));
            myChart.setOption(option);
        </script>
    </body>
</html>