高德地图根据数据来判断圆点的颜色

首先呢，我们要构造一个绘制引擎的构造类

renderConstructor 就是它了 代码如下

//使用GroupStyleRender
renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,

我们有了PointSimplifier.Render.Canvas.GroupStyleRender（样式分组引擎）继承自 PointSimplifier.Render.Canvas，额外增加如下构造参数以支持定义样式分组

参数名称

 getGroupId: function(item, idx) {
     //item 返回的是一个数组               
    return item.dataItem.sootConcentration
 },
 groupStyleOptions: function(gid) {
    // god 是 getGroupId 返回的数据
    // console.log(gid)
    return {
             pointStyle: {
                fillStyle: gid < 2 ? "green" : "red"  // 这里是根据你逻辑来判断点的显示颜色
             }
     };
  

完整代码

_this.pointSimplifierIns = new PointSimplifier({
        map: map, //所属的地图实例
        zIndex: 110,
        autoSetFitView: false, //禁止自动更新地图视野
        getPosition: function(item) {
            // console.log(item);
            return item.position;
        },
        getHoverTitle: function(dataItem, idx) {    //在这里设置点的返回内容
            return idx + ': ' + dataItem.dataItem.companyName;
            // return 1232131
            // console.log(dataItem,idx);
            
        },
        //使用GroupStyleRender
        renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
        renderOptions: {
            //点的样式
            pointStyle: {
                width: 10,
                height: 10,
                fillStyle: 'rgba(0, 0, 0, 1)'
            },
               getGroupId: function(item, idx) {
                    //溶度区间分组
                    return item.dataItem.sootConcentration
                },
                groupStyleOptions: function(gid) {
                    // console.log(gid)
                    return {
                        pointStyle: {
                            fillStyle: gid < 2 ? "green" : "red"
                        }
                    };
                },

            hoverTitleStyle: {
                position: 'top'
            }
        },

效果图

希望对各位小伙伴有帮助