mapboxgl 地图样式唯一值渲染-match转换成if else代码格式

mapboxgl 地图样式唯一值渲染match转换成if else代码格式

1. mapbox 地图样式唯一值示例如下

const data = [
    "match",
    ["get","name"],
    "怀柔区","#FFFFCC",
    "密云区","#CCFFFF",
    "平谷区","#FFCCCC",
    "通州区","#FFFF99",
    "房山区","#CCCCFF",
    "延庆区","#FFCC99",
    "门头沟区","#CCFF99",
    "大兴区","#66CCFF",
    "顺义区","#99CCFF",
    "海淀区","#CCCCCC",
    "西城区","#CCFFCC",
    "东城区","#CC99CC",
    "朝阳区","#99CC99",
    "石景山区","#CCCC99",
    "昌平区","#FF9969",
    "丰台区","#999999",
    "black"
];

2. 将上面的数据格式转换成javascript中的if else 格式，代码如下:

function generateColorStringFunction(data) {
    let colorString = "function getColor(feature) {\n";
    colorString += "    switch(feature.properties.name) {\n";

    for (let i = 2; i < data.length - 1; i += 2) {
        colorString += `        case "${data[i]}":\n`;
        colorString += `            return "${data[i  + 1]}";\n`;
    }

    colorString += "        default:\n";
    colorString += "            return 'black';\n";
    colorString += "    }\n";
    colorString += "}\n";

    return colorString;
}

3. 完整代码如下:

function generateColorStringFunction(data) {
    let colorString = "function getColor(feature) {\n";
    colorString += "    switch(feature.properties.name) {\n";

    for (let i = 2; i < data.length - 1; i += 2) {
        colorString += `        case "${data[i]}":\n`;
        colorString += `            return "${data[i  + 1]}";\n`;
    }

    colorString += "        default:\n";
    colorString += "            return 'black';\n";
    colorString += "    }\n";
    colorString += "}\n";

    return colorString;
}

const data = [
    "match",
    ["get","name"],
    "怀柔区","#FFFFCC",
    "密云区","#CCFFFF",
    "平谷区","#FFCCCC",
    "通州区","#FFFF99",
    "房山区","#CCCCFF",
    "延庆区","#FFCC99",
    "门头沟区","#CCFF99",
    "大兴区","#66CCFF",
    "顺义区","#99CCFF",
    "海淀区","#CCCCCC",
    "西城区","#CCFFCC",
    "东城区","#CC99CC",
    "朝阳区","#99CC99",
    "石景山区","#CCCC99",
    "昌平区","#FF9969",
    "丰台区","#999999",
    "black"
];

const getColorFunctionString = generateColorStringFunction(data);
console.log(getColorFunctionString);

4. 打印结果如下:

function getColor(feature) {
    switch(feature.properties.name) {
        case "怀柔区":
            return "#FFFFCC";
        case "密云区":
            return "#CCFFFF";
        case "平谷区":
            return "#FFCCCC";
        case "通州区":
            return "#FFFF99";
        case "房山区":
            return "#CCCCFF";
        case "延庆区":
            return "#FFCC99";
        case "门头沟区":
            return "#CCFF99";
        case "大兴区":
            return "#66CCFF";
        case "顺义区":
            return "#99CCFF";
        case "海淀区":
            return "#CCCCCC";
        case "西城区":
            return "#CCFFCC";
        case "东城区":
            return "#CC99CC";
        case "朝阳区":
            return "#99CC99";
        case "石景山区":
            return "#CCCC99";
        case "昌平区":
            return "#FF9969";
        case "丰台区":
            return "#999999";
        default:
            return 'black';
    }
}