Skip to main content

矢量样式

矢量样式主要是LGeoJSONLayer图层的样式配置。因为在QE中,矢量数据内部使用GeoJSON进行表达,我们知道GeoJSON对象包含了点线面,所以我们的矢量样式的配置内容也是点、线、面三个方面。这里我们重点从配置方式的角度展开。

常量

最简单的情况也就是配置一个固定值。

const style={
   point:{
       color:"red",
       size:3,
       strokeColor:"white"
   },
   polyline:{
       color:"yellow",
       width:3,
       dashArray:[5,5,5,5]
   },
   polygon:{
       color:"orange",
       shadowColor:"rgba(200,200,100,0.6)"
   }
}
const layer = new LGeoJSONLayer().setDataSource(provider).setDrawOptions(style);

在设置了点线面的样式后,点线面就会显示到地图的对应位置上,气象应用中经常会需要在点线面的附近展示数据信息,我们只需分别在点、线、面的样式中加上标签的样式配置即可。标签的配置是数组形式的,所以一个矢量单位的附近是可以添加多个标签的。可以增加文本标签和图片标签。

分级规则

如果想让点颜色按照气温值分级填色,可以使用分级规则stops

const style = {
  point: {
  	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"   //用于分段的属性字段名,必选项
    }
  }
}
函数

江苏省内的点显示红色,其余显示蓝色

const style = {
  point:{
    color:(feature) => {
      if (feature.properties["Province"] === "江苏省") {
        return "red";
      } else {
        return "blue";
      } 
    },
  }
}
属性选择器

$为属性选择器也称字段选择器,在配置标签值的时候,用于取geojson的properties里面的某个属性值。

const style = {
  point: {
    color: "red",
    label: {
      text: {
        data: "$TEM",
      }
    }
  }  
}
loader

如果当资源管理器中已经存在该分段规则,则可使用资源loader(#res)来加载。

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

具体可配置的样式属性请查看IFeatureStyleOptions