json - 如何动态更改图标大小以创建比例符号图

Question

所以我正在关注本教程：https ://www.e-education.psu.edu/geog585/node/781 。旨在使用 Leaflet 创建比例符号图。

这是我的 json 文件：https ://api.myjson.com/bins/ohhd8

这是我的代码：

函数 addCTHValue() {

        // function to size each icon proportionally based on CTH value

    function sizeByCTHValue(feature){
      var calculatedSize = (feature.properties.CTHValue / 3000) * 30;

      // create money icons

      return L.icon({
        iconUrl: 'money.png',
        iconSize: [calculatedSize, calculatedSize]
      });
    }

var CTHValueLayer =                 L.geoJson(CTHValue, { 
            pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: sizeByCTHValue(feature)
            });
        }       
});

CTHValueLayer.addTo(map);

现在，我所有的图标都非常大，不在我的 json 中的 latlng 点上，我不知道如何正确缩放图标。

我的主要问题是以下行： (feature.properties.CTHValue / 3000) * 30; 这些数字旨在表示当 CTH 值为 3000 时，其代表图标将是 30px 宽。这似乎不起作用，因为我的图标远大于 30 像素，尽管我的 CTH 值都没有达到 3000。

另外，我可以用锚将它们集中在正确的点上吗？现在他们都挤在我地图的角落里，当我放大和缩小时它们会四处走动。

有人可以帮我修复我的地图吗:-)

编辑：我的代码现在看起来像这样：

  function addCTHValue() {

                CTHValueLayer = L.geoJSON(CTHValue,  {
                        pointToLayer: function (feature, latlng) {
                            return new L.circleMarker(latlng, {
                            style: function stylebyCTHValue(feature) {
                            }}
                        )}
                });
                CTHValueLayer.addTo(map);
    }

    function styleByCTHValue(feature) {

                return {
                    fillOpacity: 0.5,
                    fillColor: blue,
                    radius: (feature.properties.CTHValue / 1000) * 30
            };
        }

我的圈子现在在地图上，但它们仍然与 json 中的 CTH 值不成比例。有人可以帮忙吗？

标签： jsonleafleticonsmarker