weixin_33734785 2019-05-01 14:52 采纳率: 0%
浏览 31

将AJAX实施到传单中

I am trying to get data from json with Leaflet. I am using Leaflet Data visualization framework. I want to use ajax, because in future I want to generate random numbers in my data properties (something like Math.random() in time intervals)

What I have already tried

I downloaded Leaflet-ajax plugin, included it in header. When i use something like that: new L.geoJSON.ajax I can't see any of my markers on map. I do not get any errors in this case.

Data, stored in data.js (this file is included in header):

var geojsonred = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "name": "1",
        "value": 20         //I want to replace this with Math.random()
      },
      "geometry": {
        "type": "Point",
        "coordinates": [315, -360]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "2",
        "value": 50      //I want to replace this with Math.random()

      },
      "geometry": {
        "type": "Point",
        "coordinates": [360, -360]
      }
    }
  ]
}

This is how my script looks like:

var minHue = 120;
var maxHue = 0;

//var marker = new L.RadialMeterMarker(new L.LatLng(-360, 320), meterMarkerOptions);

var marker = new L.geoJSON(geojsonred, {
  pointToLayer: function(feature, latlng) {
    return new L.RadialMeterMarker(latlng, {
      data: {
        'Speed': feature.properties.value
    },
      chartOptions: {
        'Speed': {
          displayName: 'Speed',
          displayText: function (value) {
            return value.toFixed(1);
          },
          color: 'hsl(240,100%,55%)',
          fillColor: 'hsl(240,80%,55%)',
          maxValue: 200,
          minValue: 0
        }
      },
      displayOptions: {
        'Speed': {
          color: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '25%'}),
          fillColor: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '50%'})
        }
      },
      fillOpacity: 0.8,
      opacity: 1,
      weight: 0.5,
      radius: 20,
      barThickness: 15,
      maxDegrees: 360,
      rotation: 0,
      numSegments: 10
    });
  },
});
marker.addTo(map);

Do someone have any idea?

  • 写回答

0条回答 默认 最新

    报告相同问题?