aimap文档 - --撒点变色

aimap.accessToken = "UFJGhyFdSzvm0ZbecYglp6CssgnDK7PZ";
aimap.baseApiUrl = "https://location-dev.newayz.com";

// 地图初始化参数

const map = new aimap.Map({
   container: 'map',
    center: [121.612846, 31.205494],
    zoom: 16,
    minZoom: 3,
    maxZoom: 20,
    style: "aimap://styles/aimap/darkblue-v4",
    localIdeographFontFamily: "'Microsoft YaHei'",
});

map.addControl(new aimap.NavigationControl({ showCompass: false, }));
map.addControl(new aimap.CompassControl());


let MassMarkerLayer;
map.on('load', () => { // 初始化海量点图层
    MassMarkerLayer = new aimap.MassMarkerLayer({
        map,
        data: [{
            id: '1',
            name: 'icon-1',
            icon: 'company-yellow',
            coordinates: [121.613946, 31.205494]
        }, {
            id: '2',
            name: 'icon-2',
            icon: 'company-green',
            coordinates: [121.612846, 31.205494]
        }, {
            id: '3',
            name: 'icon-3',
            icon: 'company-red',
            coordinates: [121.611746, 31.205494]
        }, {
            id: '4',
            name: 'icon-4',
            icon: 'company-blue',
            coordinates: [121.610646, 31.205494]
        }],
        images: [{
            id: 'company-yellow',
            type: 'png',
            url: 'https://location-dev.newayz.com/static/images/company/small/yellow.png'
        }, {
            id: 'company-red',
            type: 'png',
            url: 'https://location-dev.newayz.com/static/images/company/small/red.png'

        }, {
            id: 'company-green',
            type: 'png',
            url: 'https://location-dev.newayz.com/static/images/company/small/green.png'
        }, {
            id: 'company-blue',
            type: 'png',
            url: 'https://location-dev.newayz.com/static/images/company/small/blue.png'
        }],
        style: {
            'text-field': '{name}',
            'text-color': '#00ff00',
            'text-anchor': 'bottom',
            'text-offset': [0, -4],
            'icon-anchor': 'bottom',
            'icon-image': 'company-yellow',//获取data中的icon属性值来配置图标
            'icon-size': 0.2,
        }
    });
})

function clickBtn(obj) {
    const btnData = obj.innerHTML.replace(/(^\s*)|(\s*$)/g, "");
    if(btnData === 'icon1') {
        const newStyle = {
            'icon-image': 'company-red',//获取data中的icon属性值来配置图标
        };
        MassMarkerLayer.setStyle(newStyle);
        return
    }
    if(btnData === 'icon2') {
        const newStyle = {
            'icon-image': 'company-green',//获取data中的icon属性值来配置图标
        };
        MassMarkerLayer.setStyle(newStyle);
        return;
    }
    if(btnData === 'icon3') {
        const newStyle = {
            'icon-image': 'company-blue',//获取data中的icon属性值来配置图标
        };
        MassMarkerLayer.setStyle(newStyle);
        return;
    }
}

http://location-dev.newayz.com/aimap-gl-example/demo/#/case/massmarkerlayer-quanqu