单色路径

北京公交路网，线（line）型数据，形成路径和轨迹的视觉效果。

源代码编辑器

复制

运行

还原

          <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>北京公交路网</title>
    <style>
        html, body, #container {
            margin: 0; padding: 0; width: 100%; height: 100%;
        }
    </style>
</head>
<body>
<div id="container" class="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script>

    var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536',
        features: ['bg','road'],
        center: [116.397732, 39.912152],
        zoom: 11.2,
        pitch: 46,
        viewMode: '3D'
    });

    var layer = new Loca.LineLayer({
        map: map,
    });

    $.get('//a.amap.com/Loca/static/mock/buslines_bj_zip.txt', function (data) {

        var start = [];
        var lines = data.split('&').map(function (item) {
            return {
                linePath: item.split(';').map(function (lnglat, index) {
                    var ll = lnglat.split(',');
                    ll = [+ll[0], +ll[1]];
                    if (index == 0) {
                        start = ll;
                    } else {
                        ll = [ll[0] / 1000 + start[0], ll[1] / 1000 + start[1]]
                    }
                    return ll;
                })
            };
        });

        layer.setData(lines, {
            lnglat: 'linePath'
        });

        layer.setOptions({
            style: {
                // 3D Line 不支持设置线宽，线宽为 1px
                // borderWidth: 1,
                opacity: 0.4,
                color: '#07E8E4',
            }
        });

        layer.render();
    })

</script>
</body>
</html>
        

控制台

清空

新用户
福利示例
中心常见
问题