Внедрить AJAX в буклет - PullRequest
0 голосов
/ 01 мая 2019

Я пытаюсь получить данные от json с помощью Leaflet. Я использую систему визуализации Leaflet Data. Я хочу использовать ajax, потому что в будущем я хочу генерировать случайные числа в своих свойствах данных (что-то вроде Math.random () во временных интервалах)

Что я уже пробовал

Я скачал плагин Leaflet-ajax, включил его в шапку. Когда я использую что-то подобное: новый L.geoJSON.ajax Я не вижу ни одного из своих маркеров на карте. Я не получаю никаких ошибок в этом случае.

Данные, хранящиеся в data.js (этот файл включен в заголовок):

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]
      }
    }
  ]
}

Вот так выглядит мой скрипт:

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);

У кого-нибудь есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...