将 choropleth 图层添加到 Leaflet 地图

Question

尝试构建传单地图。目标是使用 Choropleth 在地图上为每个国家放置平均点。 BindpopUp 有效。但由于某种原因，它并没有像预期的那样显示国家的边界​​，而只是简单的标记。这是我不想要的。

var myMap = L.map("map", {
  center: [40.7128, -74.0059],
  zoom: 2.5
});

// Adding tile layer
L.tileLayer(
  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: "mapbox.streets",
    accessToken: API_KEY
  }
).addTo(myMap);

var geojson;

// Grab the data with d3
d3.json("static/js/wine.json").then(function(data) {
  // This should place borders for the countries
   L.geoJson(data).addTo(myMap);
  // Create a new choropleth layer
  geojson = L.choropleth(data, {
    // Define what  property in the features to use
    valueProperty: "points",

    // Set color scale
    scale: ["#ffffb2", "#b10026"],

    // Number of breaks in step range
    steps: 10,

    // q for quartile, e for equidistant, k for k-means
    mode: "q",
    style: {
      // Border color
      color: "#fff",
      weight: 1,
      fillOpacity: 0.8
    },

    // Binding a pop-up to each layer
    onEachFeature: function(feature, layer) {
      layer.bindPopup(
        feature.properties.country +
          ", " +
          feature.properties.points+
          "<br>Median Price per bottle of wine:<br>" +
          "$" +
          feature.properties.price
      );
    }
  }).addTo(myMap);

});

Answer 1

根据来自previous question 的示例数据，您只需修改 GeoJSON 数据以指定“多边形”类型的几何图形（带有坐标数组），而不是当前的“点”类型的几何图形（由Leaflet 默认为简单标记）。