前言

❝

字符表达式是实现地图要素个性化展示的关键工具。它通过简洁而强大的语法，允许开发者根据数据属性动态生成样式，从而赋予地图要素更具表现力的视觉效果。字符表达式不仅能够提升地图的可读性和美观度，还能根据不同的应用场景灵活调整样式，满足多样化的地图展示需求。掌握其用法，可以让你在地图开发中轻松实现复杂而富有创意的样式设计，为用户提供更加直观和富有吸引力的地图体验。

1. 公式一

StringExpression用于文字标注，内容可以设置文本字符串如"Hello"，或者字符串数组["get","fieldName"]。用于文字样式参数的基本类型；可以是数字文字或运算符的输出，运算符又接受ExpressionValue参数。如下代码["get", "name"]中"get"意为获取字段值，"name"为要素属性字段名称。翻译过来即设置要素标注内容为行政区名称。

公式一：['get', attributeName]，用于获取特征属性值，类似于feature.get('attributeName')。

    const layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: JSON_URL,
            format: new ol.format.GeoJSON()
        }),
        // 样式表达式
        style: {
            // 获取文字
            "text-value": ["get", "name"],
            "text-fill-color": "#FAFAD2",
            "text-stroke-color": "#2F4F4F",
            "fill-color": [230, 230, 250, 0.25],
            "stroke-color": "#00FFFF",
            "stroke-width": 1.25
        },
        declutter: true
    })

实现标注效果如下图所示。

2. 公式二

公式二：['get', attributeName, keyOrArrayIndex, ...]，用于获取要素属性中嵌套字段或数组元素值，keyOrArrayIndex为属性键值或者数组索引值。如下parent为嵌套对象属性

{
  "parent": {
    "adcode": "530000",
    "name": "云南省"
  }
}

若要获取name属性值，可以使用表达式：["get", "parent", "name"]，即"text-value": ["get", "parent", "name"]。

或者获取嵌套对象数组值，可以使用表达式：["get", "center", 0]，即"text-value": ["get", "center", 0]。

"center": [
    99.706463,
    27.826853
]

3. 高级应用

3.1. 连接表达式

"concat"表达式用于连接一个两个或以上字段数据，实现数据个性化标注功能。

在表达式["concat", ['get', 'name'], "n------n", ["get", "GDP"], "（亿元）"]中"concat"连接name属性值加上换行符"n------n"，以及"GDP"属性值加上单位。

// 连接表达式
style: {
    "text-value": ["concat", ['get', 'name'], "n------n", ["get", "GDP"], "（亿元）"],
    "text-fill-color": "#FAFAD2",
    "text-stroke-color": "#2F4F4F",
    "fill-color": [230, 230, 250, 0.25],
    "stroke-color": "#00FFFF",
    "stroke-width": 1.25
},

实现行政区名称加GDP标注效果如下。

3.2. 条件表达式

"case"表达式用于条件筛选。

公式：['case', condition1, output1, ...conditionN, outputN, fallback]

以表达式["case", [">", ["get", "GDP"], 1500], "#FAFAD2", "#ffc107bd"]进行讲解就是

• "case"关键字用于声明这是一个条件表达式。
• [">", ["get", "GDP"], 1500]对应condition1，也就是第一个条件判断，[">", ["get", "GDP"], 1500]对应公式[">", value1, value2]。综合起来意思就是判断字段"GDP"的值是否大于给定值1500。
• "#FAFAD2"对应output1，也就是当"GDP"的值大于1500时输出"#FAFAD2"，此时分别设置文字或者填充颜色为"#FAFAD2"、"#ff0066"。
• "#ffc107bd"对应fallback，也就是回退值，当所有条件都不满足时候的输出值。在文中也就是当"GDP"的值不大于1500时分别设置文本和填充色为"#ffc107bd"、"#1befef38"。

// 条件表达式
style: {
    "text-value": ["concat", ['get', 'name'], "n------n", ["get", "GDP"], "（亿元）"],
    "text-fill-color": ["case", [">", ["get", "GDP"], 1500], "#FAFAD2", "#ffc107bd"],
    "text-stroke-color": "#2F4F4F",
    "fill-color": ["case", [">", ["get", "GDP"], 1500], "#ff0066", "#1befef38"],
    "stroke-color": "#00FFFF",
    "stroke-width": 1.25
},

表现效果如下图所示。