Skip to main content

分级规则-stops

分级规则也称分段规则,是对数据进行分段处理来返回不同值的一种设置方式。常应用于图例设置。

分级规则是什么

我们先看下分级规则是长什么样的?

{
  "stops": [
    {
      "stop": "rgb(37, 0, 45)",
      "value": -60
    },
    ...                          //中间省略了更多类似配置
    {
      "stop": "rgb(53, 0, 0)",
      "value": 60
    }
  ],
  "fieldName": "0"
}

其中stops是个数组代表分级规则,fieldName代表分级字段。stops数组中的每一个对象表示一个分级规则,规则是从小到大的,value表示分级的值,stop表示分级目标,上面示例中分级的是颜色,即按照不同的数值来返回不同的颜色值,<=-60的使用rgb(37,0,45),以此类推往下。

fieldName表示属性名

在站点图层中,我们经常会用分级规则去设置颜色,下面是用分级规则设置站点填值图层中点的颜色的示例。这里fieldName就是geojson中properties里面的字段名。

const style = {
  point: {
    size: 3,
  	color: {
    	"stops": [   //分级规则数组
            {
              "stop": "rgb(37, 0, 45)",
              "value": -60
            },
          	{
              "stop": "rgb(119, 32, 117)",
              "value": -40
            },
            {
              "stop": "rgb(176, 33, 198)",
              "value": -32
            },
          	...
        ],
      	"fieldName": "TEM"   //用于分段的属性字段名,必选项
    }
  }
}

为了方便共享分级规则,我们可以将分级规则存储于资源管理器,这样的话,这里配置分级规则就可以很简单,用loader获取即可,如下所示

const style = {
  point: {
    size: 3,
    color: "color-temp#res?field=TEM"
  }
}
fieldName

分段规则中的fieldName是必填项,那在格点数据中,这个fieldName该怎么配呢?格点数据中,fieldName表示格点序列值,一般都是"0",只有在风向风速数据中,"0"是风速值,"1"是风向值。在矢量数据中,一般通过res的loader后附加field参数进行设置,具体可以参考加载器。

const style: IPixelLayerStyleOptions = {
  fillColor: {
    "stops": [   //分级规则数组
      {
        "stop": "rgb(37, 0, 45)",
        "value": -60
      },
      {
        "stop": "rgb(119, 32, 117)",
        "value": -40
      },
      {
        "stop": "rgb(176, 33, 198)",
        "value": -32
      },
      ...
    ],
    "fieldName": "0"   //格点序列值
  }
}
上面示例都是区间渲染,当使用区间渲染的时候value只能是number类型
关键字分级

分级规则除了支持区间规则之外,也支持关键字分级。分级规则中还有一个可配置参数我们没有讲,就是action。当aciton设置为"unique"时表示field == value 时取该stop的值。

以下示例表示当属性值NAME为江苏时,多边形使用资源管理器中heart图片作为填充图案,其余情况不填充。

const style: IFeatureStyleOptions = {
  polygon: {
    fill: true,
    fillImage: {
      stops: [
        {
          value: "江苏",
          stop: "heart#res"
        },
        {
          value: "*",
          stop: undefined
        }
      ],
      fieldName: "NAME",
      action: "unique"
    }
  }
}