将 choropleth 图层添加到 Leaflet 地图

Question

正在尝试构建 Leaflet 地图。目标是使用 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

根据您的中的示例数据，您只需修改 GeoJSON 数据以指定 "Polygon" 类型的几何图形（带有坐标数组），而不是当前的 "Point" 类型几何（默认情况下，Leaflet 将其呈现为简单标记）。

将 choropleth 图层添加到 Leaflet 地图

Add choropleth layer to Leaflet map

geojson

leaflet

choropleth