Question

我有一个使用Mapbox js在地图上添加标记的rails应用程序。它与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
   });

我已经尝试了很多不同的方法来传递我的网址以获取＆＃34;数据＆＃34;就像它在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"
    }
  }
]

Answer 1

您在控制台中看到一条错误消息，指出“输入数据不是有效的GeoJSON”。您是否检查过您的输入数据是否有效GeoJSON？

GeoJSON是JSON的子集。 JSON不支持//条评论。

Answer 2

我能够解决问题。

问题是我的控制器中的索引操作正在生成的json。我使用Mapbox的工具geojson提示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"
      }
    }
  ]
}

注意jbuilder代码中的to_f。这可以确保你获得一个浮动。重要的是数据在地图上。

如何在Map box GL JS

2 个答案: