如何将属性添加到 TileVectorLayer 的渲染特征

Question

如下面发布的代码所示，我创建了一个 VectorTileLayer 并且 VectorTileSource 是 MVT 几何体，它是从 url 中所述的网络服务检索的属性。数据库 table 包含如下所示的列。对于每个放大和缩小或拖动事件，将调用网络服务并根据 x、y 和缩放 z 检索 matching/correspnding tiles。网络服务提供给 VectorTileSource 的是 table grid_cell_data 的一行。现在，对于每个呈现的功能，函数 style 将被调用。我想要实现的是，可以访问渲染功能 properties/attributes，例如 isTreatment、fourCornersRepresentativeToBufferAsGeoJSON 等。我在样式函数中添加了日志，如下所示，但是下面提到的 table 中的 none 列是可以访问的。换句话说，table 的列名称未设置为渲染特征的属性。呈现的特征应该是包含所有信息的一行。请让我知道如何访问功能属性我还添加了一张图片，显示了样式函数中提到的日志的输出。

代码:

public visualisePolygonsAsMVTTilesOnMapWithColors(map,keyGridsAsGeoJSON,fillColor,strokeColor,text){
var vectorTile = new VectorTileLayer({
    source: new VectorTileSource({
        format: new MVT(),
        url: environment.LocalHostForTileLayerSourceAsMVTTileForZXYWS + "/{z}/{x}/{y}",
    }),
    style: function (feature,resolution){
        console.log("feature:",feature)
        console.log("feature.getProperties():",feature.getProperties())
    }
  });
return vectorTile;

}

postgresql 数据库table

CREATE TABLE IF NOT EXISTS grid_cell_data (
   id SERIAL PRIMARY KEY,
   isTreatment boolean,
   isBuffer boolean,
   fourCornersRepresentativeToTreatmentAsGeoJSON text,
   fourCornersRepresentativeToBufferAsGeoJSON text,
   distanceFromCenterPointOfTreatmentToNearestEdge float8,
   distanceFromCenterPointOfBufferToNearestEdge float8,
   areasOfCoveragePerWindowForCellsRepresentativeToTreatment float8,
   areasOfCoveragePerWindowForCellsRepresentativeToBuffer float8,
   averageHeightsPerWindowRepresentativeToTreatment float8,
   averageHeightsPerWindowRepresentativeToBuffer float8,
   geometryOfCellRepresentativeToTreatment geometry,
   geometryOfCellRepresentativeToBuffer geometry 
)

渲染特征的内容

Answer 1

getProperties() returns 属性对象，因此 feature.getProperties().myProperty = myValue 应该可以工作，但该功能可能分布在多个图块上并存在于多个缩放级别，因此这不是一个好方法方法，最好设置一个由唯一特征 ID 索引的对象（例如 https://openlayers.org/en/latest/examples/vector-tile-selection.html 国家的 iso_a3 代码）来存储额外的属性

const featuresExtraProperties = {};

setExtraProperty = function(feature, key, value) {
  const id = feature.getId();
  if (!featuresExtraProperties[id]) {
    featuresExtraProperties[id] = {};
  }
  featuresExtraProperties[id][key] = value;
}

getExtraProperty = function(feature, key) {
  const id = feature.getId();
  if (featuresExtraProperties[id]) {
    return featuresExtraProperties[id][key];
  }
  return;
}

Answer 2

我解决了。问题出在 select 语句中。 select语句必须包含如下列名称：

query_1

query="""
        SELECT 
            ST_AsMVT(mvtGeometryRow, 'MVTGeometryRow', 4096, 'geom') as result
        FROM ( 
            SELECT 
                isTreatment,isbuffer,fourCornersRepresentativeToTreatmentAsGeoJSON,fourCornersRepresentativeToBufferAsGeoJSON,distanceFromCenterPointOfTreatmentToNearestEdge,
                distanceFromCenterPointOfBufferToNearestEdge,areasOfCoveragePerWindowForCellsRepresentativeToTreatment,areasOfCoveragePerWindowForCellsRepresentativeToBuffer,averageHeightsPerWindowRepresentativeToTreatment,
                averageHeightsPerWindowRepresentativeToBuffer,geometryOfCellRepresentativeToTreatment,geometryOfCellRepresentativeToBuffer,
                ST_AsMVTGeom(
                    geometryOfCellRepresentativeToTreatment,ST_MakeEnvelope(%s,%s,%s,%s,4326),4096,0,false) As geom
            FROM grid_cell_data where  geometryOfCellRepresentativeToTreatment <> 'POLYGON EMPTY' and fourCornersRepresentativeToTreatmentAsGeoJSON <> '' and fourCornersRepresentativeToTreatmentAsGeoJSON IS NOT null
            ) mvtGeometryRow
        """

以下查询有效，但列名不会显示为渲染特征的属性：

query = """
        WITH j AS (
        SELECT ST_AsMVTGeom(
            geometryOfCellRepresentativeToBuffer,
            ST_MakeEnvelope(%s,%s,%s,%s,4326),4096,0,false
            ) As MVTGeom
        FROM grid_cell_data where  geometryOfCellRepresentativeToBuffer <> 'POLYGON EMPTY' and fourCornersRepresentativeToBufferAsGeoJSON <> '' and fourCornersRepresentativeToBufferAsGeoJSON IS NOT NULL        
        )
        SELECT ST_AsMVT(j.*) FROM j;
    """

结果

如何将属性添加到 TileVectorLayer 的渲染特征

How to add properties to a rendered feature of TileVectorLayer

postgresql

openlayers

angular-openlayers

angular

openlayers-6