Переключить слой GeoJSON на боковой панели листовки - PullRequest
Новая
       69

Переключить слой GeoJSON на боковой панели листовки

0 голосов
/ 19 октября 2019

Как я могу переключать слои GeoJSON на моей листовой карте так же, как слои L.marker?

https://jsfiddle.net/mawr35vj/

Прошу прощения, если это простой вопрос, яЯ все еще новичок в листовке и потратил на это целый день.

Вот GeoJSON, который я хотел бы включить в боковую панель. 

fetch('https://data.cityofnewyork.us/resource/ek5y-zcyf.geojson?$where=latitude is not null')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  })
  .then(function (data2) {
    // Create the Leaflet layer for the data 
    var complaintLayer = L.geoJson(data2, {

      // We make the points circles instead of markers so we can style them
      pointToLayer: function (geoJsonPoint, latlng) {
        return L.circleMarker(latlng);
      },

      // Then we can style them as we would other features
      style: function (geoJsonFeature) {
        return {
          fillColor: '#0000ff',
          radius: 6,
          fillOpacity: 0.7,
          stroke: false
        };
      }
    });
  });


-Я попытался присвоить ему "var "
-Я попытался добавить" слой жалобы "в оверлеи, как я сделал с L.marker
-И многие другие вещи, которые я не могу вспомнить, но, очевидно, не работает ...

Обновление:

Я пытаюсь загрузить GeoJSON и назначить ему переменную, но возникают трудности. Я смотрю на эту и связанные с ней темы: Как я могу назначить содержимое файла geojson переменной в Javascript?

Я получу его, если просто скопировать и вставитьGeoJSON в сценарий, но возникают трудности, если я хочу загрузить его из локального файла или API.

Ответы [ 2 ]

1 голос
/ 29 октября 2019

По предложению peeebeee я исправил проблему, загрузив данные и поместив их в «обещание».

ниже показан рабочий пример: https://jsfiddle.net/4x3sk1va/

Пример обещания ниже (взят из https://glitch.com/@ebrelsford)

// Fetch collisions data from our Glitch project
var collisionsFetch = fetch('https://cdn.glitch.com/03830164-a70e-47de-a9a1-ad757904d618%2Fpratt-collisions.geojson?1538625759015')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });

// Fetch lanes data from our Glitch project
var lanesFetch = fetch('https://cdn.glitch.com/fcedf615-7fef-4396-aa74-2e03fc324d71%2Fpratt-bike-routes.geojson?1538628711035')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });

// Once both have loaded, do some work with them
Promise.all([collisionsFetch, lanesFetch])
  .then(function (fetchedData) {
    console.log('Both datasets have loaded');

    // Unpack the data from the Promise
    var collisionsData = fetchedData[0];
    var laneData = fetchedData[1];

    // Add data in the order you want--first goes on the bottom
    L.geoJson(collisionsData).addTo(map);
    L.geoJson(laneData).addTo(map);
  });
1 голос
/ 20 октября 2019

Вы можете поместить complaintLayer в массив для элемента управления маркером, но переменная должна находиться в правильной области видимости - из опубликованного вами кода она выглядит как локальная по отношению к функции, в которой она заполняется, поэтому она выиграла 'быть видимым снаружи.

...