Question

我对此并不陌生，所以很抱歉，这很简单，但是我正在尝试按照本教程使用Leaflet和JQuery制作比例符号映射：https://neiugis.github.io/lab7/

基本上，我将json保存为本地文件，并且我的getJSON请求如下所示： $ .getJSON（“ CTHValue.geojson”）

但我遇到了CORS错误，因此我决定将json上传到在线主机。这里是链接：https://api.myjson.com/bins/nh71g。但是，我的代码似乎仍然无法正常工作，这些符号未显示在地图上，但是在控制台中没有出现错误。我需要一些帮助！我的代码如下：

    function addCTHValue() {

    $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
    });

    function processCTHValueData(data) {

    var min = Infinity;
    var max = -Infinity; 

    for (var feature in data.features) {
        var properties = data.features[feature].properties;

      for (var attribute in properties) {
          if ( attribute = 'CTH Value' )

          {
              if (properties[attribute] < min) {
                  min = properties[attribute];
              }
              if (properties[attribute] > max) {
                  max = properties[attribute];
              }
          }
      }
  }
  return {
      min : min,
      max : max
  }
}           
    function CTHValueSymbols(data) {

      CTHValueCountries = L.geoJson(data, {

          pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, { 
                  fillColor: "#501e65", 
                  color: '#501e65',      
                  weight: 2,             
                  fillOpacity: 0.5       
              }).on({
                    mouseover: function(e) {
                        this.openPopup();
                        this.setStyle({fillColor: 'green'});
                    },
                    mouseout: function(e) {
                        this.closePopup();
                        this.setStyle({fillColor: '#501e65'});
                    }
            });
          }
      }).addTo(map);
    }

    function calcCTHValueRadius(attributeValue) {

      var scaleFactor = 0.01; 
      var area = attributeValue * scaleFactor;

      return Math.sqrt(area/Math.PI);
    }

            $.getJSON('https://api.myjson.com/bins/nh71g')
    .done(function(data) {
        var info = processCTHValueData(data);
        calcCTHValueRadius(info.data);
    });
}

我是否需要执行XMLHttpRequest或引用链接就足够了？我写了下面的XMLHttpRequest，但是我不知道我应该如何处理这个请求，例如，它在我的代码中去了哪里？我应该替换$ .getJSON请求中的链接吗？我用什么代替它？我是否需要为json创建变量，然后可以在$ .getJSON请求中引用？

    let requestURL = 'https://api.myjson.com/bins/nh71g';

    let request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

如果任何人都能发现问题所在，我将非常感激。如果是引起我问题的原因，也请让我知道有关XML请求的信息，bc idk。

Answer 1

您忘了调用该函数将数据添加到地图中。

$.getJSON('https://api.myjson.com/bins/nh71g').done(function(data) {
        var info = processCTHValueData(data); 
        CTHValueSymbols(data) //<---------
    });

与此同时，您可以获得不同的尺寸：

pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng, { 
                  fillColor: "#501e65", 
                  color: '#501e65',      
                  weight: 2,             
                  fillOpacity: 0.5,
                  radius: feature.properties["CTH Value"]/100 //<-------
              }).on({
                    mouseover: function(e) {
                        this.openPopup();
                        this.setStyle({fillColor: 'green'});
                    },
                    mouseout: function(e) {
                        this.closePopup();
                        this.setStyle({fillColor: '#501e65'});
                    }
            });

https://jsfiddle.net/falkedesign/zrbLhwcp/

使用Leaflet和jQuery的比例符号映射不起作用

1 个答案: