散点图 - 10万个点

3D 散点图，描述了一份 10 万辆北京公共交通车辆的瞬时位置。

源代码编辑器

<!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>3D 散点图 - 10万辆北京公共交通车辆</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container" class="container">
</div>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script src="//webapi.amap.com/loca?v=1.2.0&key=您申请的key值"></script>
<script>

    var startRotation = 30;
    var startPitch = 60;
    var startZoom = 12;
    var startCenter = [116.397217, 39.909071];

    var map = Loca.create('container', {
        mapStyle: 'amap://styles/midnight',
        zoom: startZoom,
        center: startCenter,
        features: ['bg', 'road'],
        pitch: startPitch,
        rotation: startRotation,
        skyColor: '#33216a',
        // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
        // viewMode: '3D'
    });

    var colors = [
        '#c57f34',
        '#cbfddf',
        '#edea70',
        '#8cc9f1',
        '#2c7bb6'
    ];

    // 10万辆北京公共交通车辆
    $.get('//a.amap.com/Loca/static/mock/traffic_110000.csv', function (csv) {
        var layer = Loca.visualLayer({
            container: map,
            type: 'point',
            shape: 'circle'
        });

        layer.setData(csv, {
            lnglat: function (obj) {
                var value = obj.value;
                return [value['lng'], value['lat']];
            },
            type: 'csv'
        });

        layer.setOptions({
            style: {
                // 根据车辆类型设定不同半径
                radius: function (obj) {
                    var value = obj.value;
                    switch (parseInt(value.type)) {
                        case 3:
                            return 1;
                        case 4:
                            return 1.2;
                        case 41:
                            return 1.4;
                        case 5:
                            return 1.2;
                        default:
                            return 1;
                    }
                },
                // 根据车辆类型设定不同填充颜色
                color: function (obj) {
                    var value = obj.value;
                    switch (parseInt(value.type)) {
                        case 3:
                            return colors[0];
                        case 4:
                            return colors[1];
                        case 41:
                            return colors[2];
                        case 5:
                            return colors[3];
                        default:
                            return colors[4];
                    }
                },
                opacity: 0.8
            }
        });

        layer.render();
    });

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

控制台

清空

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