如何在 Mapbox GL JS 中为数据添加 url

Question

我有一个 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 传递给 "data"，就像 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

您在控制台中看到一条错误消息，上面写着 "Input data is not a valid GeoJSON." 您是否检查过您的输入数据是否有效 GeoJSON？

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

Answer 2

我能够解决问题。

问题是我在控制器中生成的索引操作 json。我使用 Mapbox 的工具 geojson hint 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。这确保你得到一个浮动。重要的是数据在地图上

如何在 Mapbox GL JS 中为数据添加 url

How to add a url for data in Map box GL JS

mapbox

ruby-on-rails-4

mapbox-gl-js