Как добавить URL-адрес для данных в поле карты GL JS

У меня есть приложение rails, которое использует Mapbox js для добавления маркеров на карту. Он отлично работает с Mapbox JS. Однако я не могу понять, как заставить его работать с Mapbox GL JS. Вот мое действие индекса контроллера:

def index
   @locations = Location.all

   @geojson = Array.new

   @locations.each do |location|
     @geojson << {
       type: 'Feature',
       geometry: {
         type: 'Point',
         coordinates: [location.longitude, location.latitude]
       },
       properties: {
         title: location.name,
         description: [location.elevation, location.locatable_type ],
         :'marker-color' => "#3ca0d3",
         :'marker-symbol' => "rocket",
         :'marker-size' => 'medium'
       }
     }
  end

  respond_to do |format|
    format.html
    format.json { render json: @geojson }   
  end

end

На мой взгляд, я использую этот скрипт для получения точек на карте с помощью Mapbox JS:

  L.mapbox.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([13.770391, -88.866245], 8);
  map.scrollWheelZoom.disable();    

  var featureLayer = L.mapbox.featureLayer()
  .loadURL('/maps/index.json')
  .addTo(map);

Мой вопрос: как мне это сделать с помощью Mapbox GL JS? Вот код, который я использую для получения карты на странице.

   mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

   var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
   center: [-88.866245, 13.770391], // starting position
   zoom: 7.2 // starting zoom
   });

Я пробовал много разных способов передать свой URL-адрес для «данных», как указано в документации Mapbox GL JS. Например, я пытался

 mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
    center: [-88.866245, 13.770391], // starting position
    zoom: 7.2 // starting zoom
  });

  var url = '/maps/index.json';
    var source = new mapboxgl.GeoJSONSource({
    data: url
  });

  map.on('load', function () {
    map.addSource('location', source);
    map.addLayer({
        "id": "location",
        "type": "symbol",
        "source": "location",
        "layout": {
          "icon-image": "rocket-15",
        }
    });
  });

Я получаю эту ошибку в моей консоли:

map.js:929 Error: Input data is not a valid GeoJSON
object.util.extend.onError        @ map.js:929
Evented.fire                      @ evented.js:90
util.extend._forwardSourceEvent   @ map.js:943
Evented.fire                      @ evented.js:90
util.inherit._forwardSourceEvent  @ style.js:680
Evented.fire                      @ evented.js:90
(anonymous function)              @ geojson_source.js:162
Actor.receive                     @ actor.js:31

Когда я перехожу к maps/index.json, вывод json на странице выглядит так:

[
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.12312324,
        13.686886
      ]
    },
    "properties": {
      "title": "Random Location",
      "description": [
        "700.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -88.231293812398,
        13.087893
      ]
    },
    "properties": {
      "title": "Some Place",
      "description": [
        "50.0",
        "Organization"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.224564,
        13.700985
      ]
    },
    "properties": {
      "title": "San Salvador",
      "description": [
        "550.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [
        -89.0,
        13.0
      ]
    },
    "properties": {
      "title": "Set Location Test",
      "description": [
        "100.0",
        "Individual"
      ],
      "marker-color": "#3ca0d3",
      "marker-symbol": "rocket",
      "marker-size": "medium"
    }
  }
]

mapbox mapbox-gl-js ruby-on-rails-4
person don_Bigote    schedule 27.05.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы видите сообщение об ошибке в своей консоли, в котором говорится: «Входные данные не являются допустимым GeoJSON». Вы проверили, чтобы убедиться, что ваши входные данные действительны GeoJSON?

GeoJSON — это подмножество JSON. JSON не поддерживает комментарии //.

person Lucas Wojciechowski    schedule 27.05.2016
comment
Нет, проблема не в этом. Извините, я использовал одно из тех расширений браузера в Chrome, которое добавляет это. фактический необработанный вывод не имеет // 20160527114134 или // localhost:3000/maps/index.json - person don_Bigote; 27.05.2016

arrow_upward
1
arrow_downward

Я смог решить проблему.

Проблема заключается в json, который генерировало мое действие index в моем контроллере. Я использовал подсказку geojson инструмента Mapbox https://www.mapbox.com/geojsonhint/ для отладки моего json . Оказывается, что:

[в начале и] в конце были проблемы

и я пропал без вести

"type": "FeatureCollection",
  "features": [

с начала.

Таким образом, вместо использования контроллера для генерации json. Я использовал JBuilder.

изменил мое действие индекса контроллера, чтобы оно выглядело так

def index
  @locations.Location.all
end

Я создал представление с расширением .json.jbuilder и добавил

json.type "FeatureCollection"
json.features @locations do |location|
  json.type "Feature"
  json.geometry do 
    json.type "Point"
    json.coordinates [location.longitude.to_f,location.latitude.to_f]
  end
  json.properties do
    json.title location.name
  end
end

Полученный json

 {
 "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Random Location"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -88,
          13
        ]
      },
      "properties": {
        "title": "Some Place"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Fantacy Club Bar"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Set Location Test"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          14
        ]
      },
      "properties": {
        "title": "Some place else"
      }
    }
  ]
}

Обратите внимание на to_f в коде jbuilder. Это гарантирует, что вы получите поплавок. Важно, чтобы данные были на карте.

person don_Bigote    schedule 27.05.2016