高德地图数据可视化JS API示例学习笔记（2）——图标点 IconLayer

本文链接：https://blog.csdn.net/hequhecong10857/article/details/103794381

本文介绍如何使用Loca.IconLayer自定义地图图标，包括天气预报图标和银行网点图标，通过设置source属性指定图标来源，实现地图上的信息可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

天气预报

图形标记 - 天气预报。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。

// 天气图标
    var pngs = ['baoyu', 'qing', 'daxue', 'duoyun', 'wu', 'wumai', 'yun'];

    var map = new AMap.Map('container', {
        showIndoorMap: false,
        viewMode: '3D',
        resizeEnable: true,
        mapStyle: 'amap://styles/midnight',
        features: ['bg', 'road']
    });

    var layer = new Loca.IconLayer({
        map: map,
        fitView: true,
    });
    layer.setData(districts, {
        lnglat: 'center'
    });
    layer.setOptions({
        source: function (res) {
            var i = res.index;
            return '//a.amap.com/Loca/static/manual/image/' + pngs[i % pngs.length] + '.png';
        },
        style: {
            size: 25,
        }
    });

    layer.render();

银行网点

图标 - 银行网点。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。

var bankMap = {
        160104: '中国银行',
        160139: '邮储银行',
        160105: '工商银行',
        160106: '建设银行',
        160108: '交通银行',
        160107: '农业银行',
        160109: '招商银行',
        160111: '中信银行',
    };

    var vl = new Loca.IconLayer({
        map: map
    });

    vl.setData(bankData, {
        lnglat: 'location'
    });

    vl.setOptions({
        source: function(res) {
            var value = res.value;
            var typecode = value.typecode;
            // 这里需要写上 http 协议，不能忽略
            var src = 'https://a.amap.com/Loca/static/manual/image/'+ bankMap[typecode] + '.png';
            return src;
        },
        style: {
            size: 35
        }
    });

    vl.render();