如何借助第三方API为GeoJson多边形设置填充颜色？

我有一份包含省份ID与坐标的GeoJSON地图文件，同时有一个第三方API（已导入为mockData）能返回各省份ID对应的颜色，想据此给每个多边形设置fillColor属性。

我的GeoJSON文件（仅展示第一个多边形示例） #

[
    {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "id": 0,
                "regionColor": "orangeColor",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [...]
                },
                "properties": {
                    "FID": 0,
                    "FID_1": 0
                }
            }
        ]
    }
]

我的API数据（已导入为mockData） #

{
    "colors": [
        {
            "id": "0",
            "countryColor": "red"
        },
        {
            "id": "1",
            "countryColor": "orange"
        },
        {
            "id": "2",
            "countryColor": "yellow"
        }
    ]
}

我的现有代码 #

<template>
  <div class="container">
    <div id="mapContainer">      
    </div>
  </div>

</template>
<script> 
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import geojson from "../components/provinces.json"
import mockData from "./test.json"

export default{
  name: "locationMap",
  data() {
    return{
      center: [32.87255939010237, 53.781741816799745],
    }
  },

methods: {

setupLeafletMap: function () {
  const mapDiv = L.map("mapContainer").setView(this.center, 5);
  L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      // maxZoom: 18,
    }
  ).addTo(mapDiv);

      var myStyle = {
        "fillColor": "#818181",
        "color": "black",
        "weight": 2,
        "opacity": 0.65,
        "fillOpacity": 0.6
      };

    L.geoJSON(geojson,{
     style: myStyle,
    }
   }
  }
mounted() {
    this.setupLeafletMap()
    console.log(mockData.colors[1].id)
  },
}

</script>

解决方案 #

要实现根据省份ID匹配API颜色设置fillColor，按以下步骤修改代码：

1. 将API的颜色数组转为ID-颜色的映射对象，提升查找效率
2. 把Leaflet的style选项改成函数，动态为每个Feature分配样式
3. 处理ID类型匹配问题，确保能正确找到对应颜色

修改后的完整代码：

<template>
  <div class="container">
    <div id="mapContainer"></div>
  </div>
</template>
<script> 
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import geojson from "../components/provinces.json"
import mockData from "./test.json"

export default{
  name: "locationMap",
  data() {
    return{
      center: [32.87255939010237, 53.781741816799745],
      colorMap: {} // 存储ID到颜色的映射
    }
  },

  created() {
    // 初始化颜色映射，将数组转为键值对
    this.colorMap = mockData.colors.reduce((map, item) => {
      map[item.id] = item.countryColor;
      return map;
    }, {});
  },

  methods: {
    setupLeafletMap() {
      const mapDiv = L.map("mapContainer").setView(this.center, 5);
      L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        }
      ).addTo(mapDiv);

      // 动态样式函数，为每个Feature匹配对应颜色
      const getFeatureStyle = (feature) => {
        // 将Feature的数字ID转为字符串，匹配API中的ID格式
        const featureId = String(feature.id);
        // 查找对应颜色，无匹配时用默认灰色
        const fillColor = this.colorMap[featureId] || "#818181";
        
        return {
          "fillColor": fillColor,
          "color": "black",
          "weight": 2,
          "opacity": 0.65,
          "fillOpacity": 0.6
        };
      };

      // 将GeoJSON图层添加到地图
      L.geoJSON(geojson, {
        style: getFeatureStyle
      }).addTo(mapDiv);
    }
  },

  mounted() {
    this.setupLeafletMap();
  },
}
</script>

关键说明 #

• 用reduce将颜色数组转为映射对象，避免每次查找都遍历数组，提升性能
• 样式函数接收当前Feature为参数，可根据每个省份的ID动态设置颜色
• 注意GeoJSON的ID是数字类型，API的ID是字符串类型，需做类型转换确保匹配
• 补全了原代码中缺失的.addTo(mapDiv)，否则GeoJSON图层不会显示在地图上

内容的提问来源于stack exchange，提问作者Mehrnaz ghaffar