vue.js - Vue Leaflet 获取颜色函数

Question

我正在使用 VueLeaflet 创建一个地图，如下例所示：https ://vue2-leaflet.netlify.com/examples/geo-json.html

我喜欢在这个例子中为多边形添加一些颜色：https ://leafletjs.com/examples/choropleth/

这是我在这里的尝试：https ://codesandbox.io/s/old-framework-mlc7b

getcolorFunction(d) {
      return d > 1000
        ? "#800026"
        : d > 500
        ? "#BD0026"
        : d > 200
        ? "#E31A1C"
        : d > 100
        ? "#FC4E2A"
        : d > 50
        ? "#FD8D3C"
        : d > 20
        ? "#FEB24C"
        : d > 10
        ? "#FED976"
        : "#FFEDA0";
    },

    styleFunction() {
      const fillColor = this.fillColor; // important! need touch fillColor in computed for re-calculate when change fillColor
      return () => {
        return {
          weight: 2,
          color: "#ECEFF1",
          opacity: 1,
          fillColor: getColor(feature.properties.sales),
          fillOpacity: 1
        };
      };
    },

    onEachFeatureFunction() {
      if (!this.enableTooltip) {
        return () => {};
      }
      return (feature, layer) => {
        layer.bindTooltip(
          "<div>Name Province:" +
            feature.properties.varname_1 +
            "</div><div>Sales: " +
            feature.properties.sales +
            "</div>",
          { permanent: false, sticky: true }
        );
      };
    }
  },

我怎样才能在 Vue.js 中使用 getColor 函数？

标签： vue.jsleaflet

Answer 1

onEachFeatureFunction() {
        return (feature, layer) => {
        layer.options.fillColor = this.getcolorFunction(
          feature.properties.sales
            ?feature.properties.sales
            : 0
        );
        layer.on("click", function (e) {
           console.log(e, feature);
        })          
    };
}