Question

我正在使用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调用都会使用maps参数发送到服务器，并获取地图视图点中的位置。

# 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)

方案如下：

已加载地图，显示130个地点。
用户移动地图，发送AJAX，现在应该显示150个位置。
在150个地点中，已经从初始负载（130）显示了90个

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

我需要非常聪明才能解决这个问题，因为代码效率低下的MapBox GL会占用资源，内存，CPU等。

请帮忙谢谢！

MapBox GL在'移动'事件上动态加载标记

0 个答案: