1

我正在使用 MapBox GL API (v0.39.1) 和 RoR 开发地图样式应用程序，但我找不到解决问题的方法。我会尽量解释清楚，提供代码示例。

假设我们有 10.000 个位置。对于每个位置，我想显示一个带有特定图像的自定义标记。当然，我们不能加载包含 10.000 个位置和图像的地图，因为它会滞后并导致浏览器崩溃。

解决方案是仅显示地图视点上可见的位置（基本上仅显示地图边界中可见的位置）。并在地图“移动”或“缩放”时执行 AJAX 调用以获取新位置。

# The code use for the solution
map.on 'load', (e) ->
  # Creat markers visible in the maps view point
  mapbox.setContent()

  # Add 'mooved' event to the map
  map.on('moveend', mapbox.move_event)


mapbox.setContent = ->
  $.ajax
    url: location.protocol + "//" + location.host + "/api/map_data"
    type: "GET"
    # Send map coordinates
    data:
      sw_lng: map.getBounds()._sw.lng,
      ne_lng: map.getBounds()._ne.lng,
      ne_lat: map.getBounds()._ne.lat,
      sw_lat: map.getBounds()._sw.lat
    success: (data) ->
      window.locations_data = data

      for i in data.features
        # Simply adds a new marker to the map with custom image from the GeoJSON
        mapbox.createMarkers(i)

mapbox.move_event = ->
  mapbox.setContent()

因此，每次地图“moveend”时，都会使用地图参数将 AJAX 调用发送到服务器，并获取地图视点中的位置。

# location.rb Location model, each location represents a marker on the map
def self.build_geojson(sw_lng, ne_lng, ne_lat, sw_lat)
  locations = self.where("longitude > ? AND longitude < ? AND latitude < ? AND latitude > ?", sw_lng, ne_lng, ne_lat, sw_lat)

  # Function that builds the GeoJSON from the locations
  return build(locations)

场景如下：

  1. 地图已加载，显示 130 个位置。
  2. 用户移动地图，发送 AJAX，现在应该显示 150 个位置。
  3. 在 150 个位置中，有 90 个已从初始加载 (130) 中显示

我怎样才能只删除 40 (130 - 90) 个标记？因为我不想删除所有最初的 130 个标记。然后添加 150 个标记。我没有找到任何“好”的方法来做到这一点。

我需要非常聪明地处理这个问题，因为 MapBox GL 的代码效率低下正在消耗资源、内存、CPU 等。

请帮忙，谢谢！

4

0 回答 0