唯一值类型

字数统计: 1.2k 字
阅读时长: 约 3 分钟
当前版本: 4.29

按高速公路类型进行唯一值渲染的高速公路

什么是唯一值类型？ ​

唯一值是基于要素中一个或多个属性字段进行渲染。它用不同的符号表示由唯一属性值定义的各个类别，例如：

  • 在地图上显示感兴趣点（例如学校、公园、宗教地点）

  • 表示数据的类别（比如区域、类型）

  • 可视化排序数据（例如高、中、低）

如何用唯一值类型表示要素 ​

配置唯一值渲​​染器，需要定义两个条件：

  1. 指定field，可以是字段名或 Arcade 表达式。

  2. 设置uniqueValueInfos，field不同值类型及其对应符号的集合。

示例 ​

分类数据 ​

此示例演示了如何用唯一值类型渲染高速公路类别，分别有公路、国道或高速公路。

  1. 创建唯一值渲​​染器。

  2. 设置包含分类值的字段名称。

  3. 创建唯一值信息对象，并为每个预期值分配一个符号。

  4. 添加默认符号，没有匹配到的要素可以使用该默认符号。

js
    const hwyRenderer = {
        type: "unique-value",
        legendOptions: {
            title: "Freeway type"
        },
        field: "RTTYP",
        uniqueValueInfos: [{
            value: "S",
            label: "State highway",
            symbol: {
                type: "simple-line",
                color: "#e6d800",
                width: "6px",
                style: "solid"
            }
        }, {
            value: "I",
            label: "Interstate",
            symbol: {
                type: "simple-line",
                color: "#e60049",
                width: "6px",
                style: "solid"
            }
        }, {
            value: "U",
            label: "Highway",
            symbol: {
                type: "simple-line",
                color: "#9b19f5",
                width: "6px",
                style: "solid"
            }
        }]
    };

感兴趣点 (3D) ​

此示例演示了如何在 3D 场景中可视化感兴趣点 (POI)。此示例演示了如何使用 PictureMarkerSymbol 创建 POI 符号。您也可使用 web 样式来创建相同的可视化效果。

  1. 创建唯一值渲​​染器。

  2. 引用包含位置类型的字段名 (例如 museum、park 等)。

  3. 创建唯一值信息对象，并为每个预期值分配一个符号。

js
    // Expand the code above to view how each marker
    // symbol is created in getUniqueValueSymbol()
    const pointsRenderer = {
        type: "unique-value",
        field: "Type",
        uniqueValueInfos: [
            {
                value: "Museum",
                symbol: getUniqueValueSymbol("/static/visualization-point-styles/live/Museum.png", "#D13470")
            },
            {
                value: "Restaurant",
                symbol: getUniqueValueSymbol("/static/visualization-point-styles/live/Restaurant.png", "#F97C5A")
            },
            {
                value: "Church",
                symbol: getUniqueValueSymbol("/static/visualization-point-styles/live/Church.png", "#884614")
            },
            {
                value: "Hotel",
                symbol: getUniqueValueSymbol("/static/visualization-point-styles/live/Hotel.png", "#56B2D6")
            },
            {
                value: "Park",
                symbol: getUniqueValueSymbol("/static/visualization-point-styles/live/Park.png", "#40C2B4")
            }
        ]
    };

序数数据 ​

此示例演示了如何使用 Arcade 表达式从数值字段属性创建序数类别。此应用程序按低、中、高卡车流量对高速公路进行分类。

注: 您还可以使用数值数据通过分类间隔渲染器来完成相同的可视化。

  1. 创建唯一值渲染器。

  2. 编写一个 Arcade 表达式，将数据按低、中、高的顺序进行分类。然后在 valueExpression 属性中引用它。请参阅以下代码片段。

  3. 创建唯一值信息对象，并为每个预期值分配一个符号。

  4. 添加默认符号，没有匹配值的要素可以使用该默认符号。

js
    var traffic = $feature.AADT;
    When(
        traffic > 80000, "High",
        traffic > 20000, "Medium",
        "Low"
    );
js
    const renderer = {
        type: "unique-value",
        valueExpression: `
            var traffic = $feature.AADT;
            When(
            traffic > 80000, "High",
            traffic > 20000, "Medium",
            "Low"
            );
            `,
        valueExpressionTitle: "Traffic volume",
        uniqueValueInfos: [{
            value: "High",
            symbol: {
                type: "simple-line",
                color: "#810f7c",
                width: "6px",
                style: "solid"
            }
        }, {
            value: "Medium",
            symbol: {
                type: "simple-line",
                color: "#8c96c6",
                width: "3px",
                style: "solid"
            }
        }, {
            value: "Low",
            symbol: {
                type: "simple-line",
                color: "#9d978b",
                width: "1px",
                style: "solid"
            }
        }]
    };

分类数据 (3D) ​

此示例根据建筑物类型进行可视化：住宅、商业或混合用途。唯一值渲​​染器根据建筑物的用途属性为每个建筑物分配颜色。

步骤 ​

  1. 为每种建筑物类型创建不同的符号。

  2. 将符号分配给唯一值渲染器。

  3. 将渲染器分配给场景图层。

js
    const typeRenderer = {
        type: "unique-value",
        legendOptions: {
            title: "Building Type"
        },
        defaultSymbol: {
            type: "mesh-3d",
            symbolLayers: [
            {
                type: "fill",
                material: { color: "#FFB55A", colorMixMode: "replace" }
            }
            ]
        },
        defaultLabel: "Others",
        field: "landuse",
        uniqueValueInfos: [{
            value: "MIPS",
            symbol: {
                type: "mesh-3d",
                symbolLayers: [{
                    type: "fill",
                    material: { color: "#FD7F6F", colorMixMode: "replace" }
                }]
            },
            label: "Office"
        },
        {
            value: "RESIDENT",
            symbol: {
                type: "mesh-3d",
                symbolLayers: [{
                    type: "fill",
                    material: { color: "#7EB0D5", colorMixMode: "replace" }
                }]
            },
            label: "Residential"
        },
        {
            value: "MIXRES",
            symbol: {
                type: "mesh-3d",
                symbolLayers: [{
                    type: "fill",
                    material: { color: "#BD7EBE", colorMixMode: "replace" }
                }]
            },
            label: "Mixed use"
        },
        {
            value: "MIXED",
            symbol: {
                type: "mesh-3d",
                symbolLayers: [{
                    type: "fill",
                    material: { color: "#B2E061", colorMixMode: "replace" }
                }]
            },
            label: "Mixed use without residential"
        }]
    };