如何通过geojson-vt配置为GeoJSON转矢量瓦片的多边形设不同颜色？

• 第一步：确认GeoJSON结构
  确保你的GeoJSON要素的properties中包含颜色相关字段，比如fillColor（填充色）、strokeColor（边框色）、fillOpacity（填充透明度）等，示例如下：

  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "name": "区域A",
          "fillColor": "#2ecc71",
          "strokeColor": "#27ae60",
          "fillOpacity": 0.7
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [/* 坐标数据 */]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "区域B",
          "fillColor": "#e74c3c",
          "strokeColor": "#c0392b",
          "fillOpacity": 0.7
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [/* 坐标数据 */]
        }
      }
    ]
  }
  

• 第二步：初始化geojson-vt图层并配置样式函数
  在创建L.geoJson.vt实例时，通过style选项传入一个函数，该函数会接收当前要素的properties作为参数，返回对应的样式配置：

  // 加载GeoJSON数据（可以是本地文件或远程请求）
  fetch('your-geojson-file.geojson')
    .then(response => response.json())
    .then(geojsonData => {
      // 创建geojson-vt图层
      const vectorTileLayer = L.geoJson.vt(geojsonData, {
        maxZoom: 18, // 根据需求设置最大缩放级别
        style: function(featureProperties) {
          // 从要素属性中提取颜色配置，返回Leaflet样式对象
          return {
            fillColor: featureProperties.fillColor || '#cccccc', // 颜色不存在时用默认值
            color: featureProperties.strokeColor || '#333333',
            fillOpacity: featureProperties.fillOpacity || 0.5,
            weight: 1 // 边框宽度
          };
        }
      });
  
      // 添加图层到Leaflet地图
      vectorTileLayer.addTo(map);
    });
  

• 第三步：注意事项

  • 如果你的GeoJSON里的颜色字段不是fillColor这类自定义命名，比如叫customFill，只要在样式函数里对应提取即可：fillColor: featureProperties.customFill
  • 样式函数返回的对象需符合Leaflet样式规范，可用属性包括fillColor、color（边框色）、fillOpacity、opacity（边框透明度）、weight（边框宽度）等
  • 为避免部分要素无颜色属性导致样式失效，记得设置默认值

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