Question

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

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

这是我的代码：

function addCTHValue（）{

memset

} 现在，我所有的图标都绝对巨大，没有集中在json的latlng点上，而且我不知道如何正确缩放图标。

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

我还可以用锚点将它们定位在正确的点上吗？现在，他们都拥挤在我地图的角落，在我放大和缩小时四处移动。

有人可以帮我修复地图吗：-）

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

        // 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中的CTH值不成比例。有人可以协助吗？

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

0 个答案: