北京不同类型公交线路

源代码编辑器
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>北京不同类型公交线路</title>
        <style>
          html,
          body,
          #map {
              width: 100%;
              height: 100%;
              margin: 0;
              padding: 0;
          }
        
          .demo-title {
              position: absolute;
              top: 25px;
              left: 25px;
              z-index: 1;
          }

          h1 {
              font-size: 18px;
              margin: 0;
              color: rgb(180, 180, 190);
          }

          h3 {
              font-size: 12px;
              font-weight: normal;
              margin-top: 5px;
              color: rgb(150,150,150);
          }
      </style>
    </head>

    <body>
      <div class="demo-title">
        <h1>北京公交线路行驶路线分类</h1>
        <h3>北京全市范围内各公交线路运行情况</h3>
    </div>
        <div id="map"></div>
        <script src="http://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script>
        <script src="http://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
        <script>
            var map = ( new AMap.Map('map', {
                zoom: 11.2,
                center: [116.352734,39.8447],
                showLabel: false,
                viewMode: '3D',
                mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
                pitch: 50,
            }));

            var loca = new Loca.Container({
                map,
            });
            window._loca = loca;

            var geo = new Loca.GeoJSONSource({
                url: 'http://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
            });

            var layer = new Loca.PulseLineLayer({
                // loca,
                zIndex: 10,
                opacity: 1,
                visible: true,
                zooms: [2, 22],
            });

            var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];

            console.log('geo', geo);
            layer.setSource(geo);
            layer.setStyle({
                altitude: 0,
                lineWidth: 2,
                // 脉冲头颜色
                headColor: (_, feature) => {
                    return headColors[feature.properties.type - 1];
                },
                // 脉冲尾颜色
                trailColor: 'rgba(128, 128, 128, 0.5)',
                // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
                interval: 0.25,
                // 脉冲线的速度，几秒钟跑完整段路
                duration: 5000,
            });
            loca.add(layer);
            loca.animate.start();

            // 图例
            var lengend = new Loca.Legend({
                loca: loca,
                title: {
                    label: '公交类型',
                    fontColor: 'rgba(255,255,255,0.4)',
                    fontSize: '16px'
                },
                style: {
                    backgroundColor: 'rgba(255,255,255,0.1)',
                    left: '20px',
                    bottom: '40px',
                    fontSize: '12px'
                },
                dataMap: [
                    { label: 'A类型', color: headColors[7] },
                    { label: 'B类型', color: headColors[6] },
                    { label: 'C类型', color: headColors[5] },
                    { label: 'D类型', color: headColors[4] },
                    { label: 'E类型', color: headColors[3] },
                    { label: 'F类型', color: headColors[2] },
                    { label: 'G类型', color: headColors[1] },
                    { label: 'H类型', color: headColors[0] },
                ],
            });

            loca.animate.start();
            var dat = new Loca.Dat();
            dat.addLayer(layer, '公交');

        </script>
    </body>
</html>
控制台
清空
返回顶部示例中心常见问题智能客服