高德地图 数据可视化JS API示例学习笔记（1）——基本功能

可视化图层创建

使用 RoundPointLayer 点图层，绘制圆形点标记。

<script src="//a.amap.com/Loca/static/mock/districts.js"></script>
    <script>
        var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',
            zoom: 4,
            center: [107.4976, 32.1697],
            features: ['bg', 'road'],
            // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
            // viewMode: '3D'
        });

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

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 5,
                // 填充颜色
                color: '#07E8E4',
                // 描边颜色
                borderColor: '#5DFBF9',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });

        layer.render();

    </script>

加载 CSV 数据

通过 setData(csv, {type: ‘csv’}) 接口传入 CSV 格式数据。

 $.get('//a.amap.com/Loca/static/mock/china5a.csv', function (data) {
            var map = new AMap.Map('container', {
                mapStyle: 'amap://styles/twilight',
                zoom: 4,
                center: [107.4976, 32.1697],
                features: ['bg', 'road'],
                // Loca 自 1.2.0 起 viewMode 模式默认为 3D，如需 2D 模式，请显示配置。
                // viewMode: '3D'
            });

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

            layer.setData(data, {
                lnglat: '经纬度',
                // 或者使用回调函数构造经纬度坐标
                /*
                 lnglat: function (obj) {
                     var value = obj.value;
                     var lnglat = [value['经度'], value['纬度']];
                     return lnglat;
                 },
                 */
                // 指定数据类型
                type: 'csv'
            });

            layer.setOptions({
                style: {
                    // 圆形半径，单位像素
                    radius: 14,
                    // 填充颜色
                    color: '#f3ad6a',
                    // 描边颜色
                    borderColor: '#252e64',
                    // 描边宽度，单位像素
                    borderWidth: 1,
                    // 透明度 [0-1]
                    opacity: 0.9,
                }
            });

            layer.render();
        });

设置选中样式

设置 selectStyle，可以在图层元素被 mouseenter 或者 click 时触发。需要开启 eventSupport: true。

 var layer = new Loca.PointLayer({
            map: map,
            eventSupport: true,    // selectStyle 配置需要开启 eventSupport: true
        });

        layer.setData(districts, {
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                radius: 10,
                color: '#4fc2ff',
                borderColor: '#ffffff',
                borderWidth: 1.5,
                opacity: 0.8
            },
            // 图层上元素被 mouseenter 或者 click 时会触发 selectStyle，
            // 同时 selectStyle 配置需要开启 eventSupport: true 才会生效，
            // 只有 selectStyle 设置的属性才会变化，其他属性不变，
            // 如果关闭 selectStyle，设置 selectStyle: false 即可。
            selectStyle: {
                radius: 14,
                color: '#ffe30a'
            }
        });

        layer.render();

鼠标事件

鼠标事件

 var layer = new Loca.PointLayer({
            eventSupport: true,
            map: map
        });

        layer.on('mousemove', function (ev) {
            // 事件类型
            var type = ev.type;
            // 当前元素的原始数据
            var rawData = ev.rawData;
            // 原始鼠标事件
            var originalEvent = ev.originalEvent;

            openInfoWin(map, originalEvent, {
                '名称': rawData.name,
                '位置': rawData.center
            });
        });

        layer.on('mouseleave', function (ev) {
            closeInfoWin();
        });

        layer.setData(districts, {
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                radius: 10,
                color: '#4fc2ff',
                borderColor: '#ffffff',
                borderWidth: 1.5,
                opacity: 0.8
            },
            selectStyle: {
                radius: 14,
                color: '#ffe30a'
            }
        });

        layer.render();