北京公交路网

北京公交路网。线（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="./script/loca.js"></script>-->
<script src="//webapi.amap.com/loca?v=1.2.0&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script>

    var map = Loca.create('container', {
        mapStyle: 'amap://styles/midnight',
        features: ['bg'],
        center: [116.397732, 39.912152],
        zoom: 10,
        pitch: 40,
        // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
        // viewMode: '3D'
    });

    var layer = Loca.visualLayer({
        container: map,
        type: 'line',
        shape: 'line',
    });

    $.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: '#b7eff7',
            }
        });

        layer.render();
    })

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

控制台

清空

返回顶部示例中心常见问题智能客服公众号
二维码