将 Openlayers 2 BBOX 策略迁移到 Openlayers 3答案

【问题标题】：Migrating Openlayers 2 BBOX strategy to Openlayers 3将 Openlayers 2 BBOX 策略迁移到 Openlayers 3
【发布时间】：2016-10-29 22:44:04
【问题描述】：

我正在将地图应用程序从 Openlayers 2 迁移到 ol3，并且有一个 bbox 层，当范围发生变化时，它会向服务器发出请求。我使用刷新策略（使用 force: true），服务器返回我使用自定义格式处理的对象数组。

var refreshStrategy = new OpenLayers.Strategy.Refresh({
  force: true
});

OpenLayers.Format.GTFS = OpenLayers.Class(OpenLayers.Format, {
  read: function(body) {
    var stops = JSON.parse(body), point, features = [];

    for(var i=0,l=stops.length; i<l; i++) {
      point = new OpenLayers.Geometry.Point(stops[i].stop_lon, stops[i].stop_lat);
      features.push(new OpenLayers.Feature.Vector(point, stops[i]));
    }
    return features;
    }
});

var layer = new OpenLayers.Layer.Vector('Stops', {
  projection: new OpenLayers.Projection('EPSG:4326'),
  visibility: true,
  strategies: [
    new OpenLayers.Strategy.BBOX({resFactor: 1.2}),
    refreshStrategy
    ],
  protocol: new OpenLayers.Protocol.HTTP({
    format: new OpenLayers.Format.GTFS(),
    url: '/api/v1/stops.json'
  })
});

refreshStrategy.activate();

看来ol.source.Vector 只支持一种策略。我尝试仅使用 bbox 策略，但每次平移时功能标记都会闪烁并且数据会重新加载

var stopFeatures = new ol.Collection();

var source = new ol.source.Vector({
    features: stopFeatures,
    loader: function(extent, resolution, projection) {
        extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
        var url = '/api/stops.json?bbox=' + extent.join(',');
        $http.get(url).then(function (res) {
            var features = _.map(res.data, function (stop) {
                var stopFeature = new ol.Feature(stop);
                stopFeature.setGeometry(new ol.geom.Point(ol.proj.transform([stop.stop_lon,stop.stop_lat],
                    'EPSG:4326', 'EPSG:3857')));
                return stopFeature;
            });
            stopFeatures.clear();
            stopFeatures.extend(features);
        });
    },
    projection: 'EPSG:4326',
    strategy: ol.loadingstrategy.bbox,
});

功能集合的清除和重置感觉就像我做错了什么，刷新似乎变慢了。

map.on('moveend',... 是在 ol3 上实现这个的方法吗？

【问题讨论】：

实际上 OpenLayers 3.x 中的 ol.loadingstrategy.bbox 与 OpenLayers 2 中的 OpenLayers.Strategy.BBOX 完全相同。是什么让你认为它是一个“不同的怪物”？
@ahocevar 我阅读了代码并理解您的意思。对我来说模糊的是 ol2 如何在后台合并来自后续请求的数据，现在我不得不使用功能集合。我正在清除可能会重新插入的功能，我认为这可能会导致它变慢。无论如何感谢您的关注，我已经添加了更多详细信息。

标签： openlayers openlayers-3

【解决方案1】：

你是对的 - 你不应该在功能集合上调用 clear() 和 extend()。相反，您应该为 JSON 中的每个功能都有一个唯一的 id。如果你不这样做，你可以使用从纬度和经度创建的散列。获得 id 后，使用 stopFeature.setId(id) 设置功能的 id。然后只需致电source.addFeatures(features)。该策略将在内部将特征 ID 与现有特征的 ID 进行比较，并且仅插入那些 ID 已不在源中的特征。

【讨论】：

设置 id 看起来更好。端口缺少的部分是 刷新策略 部分。在旧地图上，放大会触发请求并实际加载更多特征，因为服务器检索的数量有限，而较小的 bbox 意味着出现新的。 ol3 有一个单数 strategy 属性，而 ol2 有一个数组参数。