javascript - 如何设置 Openlayers 以使用 backbone.js？

Question

我正在尝试构建一个基于 Openlayers 和 backbone.js 的应用程序。我应该让每一层成为一个 View 吗？到目前为止，我有一个 map View 、标记 View ，并且正在考虑让每一层也成为一个 View 。我有一个标记模型和 map 模型。谁能帮我设置一下？

Answer 1

与@Gagan 过去的回答类似地做了之后，这是我下次的做法:

将 OpenLayers map 视为特殊的渲染表面 - 不同于 DOM，类似于您对待 <canvas> 的方式.认识到 Backbone 围绕您的 View 在 DOM 中呈现的想法做出了一些(轻微的)假设:

1. View 与其对应的 DOM 节点之间存在特殊关系(view.el 和 view.$el 魔法)。

2. events哈希会自动转换为在 DOM 节点上触发的事件的处理程序。

我们将要为我们的 OpenLayers View 重新创建这些概念。一些想法:

1. 在 Backbone 中， View 是模型和 DOM 片段之间的中介。在 OpenLayers 中，我们有 OpenLayers Feature、Vector、Marker、Popup 等，而不是 DOM 的一部分。我们可以重新创建 View 与其 OpenLayers 对象之间的这种特殊关系。监听模型变化和更新 OpenLayers 对象的 View 自然而然地出现了。如何监听和响应 OpenLayers 对象上的事件？

这是 OpenLayers 的粘性部分之一。假设您有一个 SelectControl .可以在layer层级监听事件，引用event.feature .但是您如何将该功能映射回您的 View 以保持良好的职责分离？选择你的毒药。在我下面的示例中，我将直接在 View 已经具有句柄的功能上(重新)触发事件。然后 View 将不得不监听功能上的那些事件。请注意，OL 功能没有内置事件。我们将使用 _.extend(object, Backbone.Events); 将 Backbone 事件混入其中.

1. 您可以创建一个 featureEvents 散列，但这可能是过度设计的。 View 已经接收到模型对象并显式绑定(bind)到它的事件。在下面的示例中，我将对我的 View 创建的 OL 功能执行相同的操作。

现在构建您的 View 。我倾向于想到 OpenLayers Layer作为一个项目集合。假设您要渲染一组要素。您可能会创建一个 FeatureCollectionView用 Map 初始化的类目的。然后它会创建一个 Layer用于收藏。

FeatureCollectionView = Backbone.View.extend({
    initialize: function(options) {
        // requires options.map, an OpenLayers Map object.
        // requires options.collection, a FeatureCollection object.
        options = options || {};

        this.map = options.map;

        this.initLayer();
        this.initSelectControl();

        this.collection.on('add', this.addFeatureModel, this);
        this.collection.on('remove', this.removeFeatureModel, this);
        this.collection.each(this.addFeatureModel, this);

        // ...
    },

    initLayer: function() {
        this.layer = new OpenLayers.Layer.Vector('a collection of features', {/* options */});
        this.map.addLayers([this.layer]);
    },

    initSelectControl: function() {
        this.selectControl = new OpenLayers.Control.SelectFeature(this.layer, {
            hover: true,
            multiple: false,
            highlightOnly: true
        });

        this.map.addControl(this.selectControl);
        this.selectControl.activate();
        this.layer.events.on({
            featurehighlighted: function(event) {
                // requires that you've extended your view features with Backbone.Events
                if (event.feature.trigger) {
                    event.feature.trigger('featurehighlighted', event);
                }
            },
            featureunhighlighted: function(event) {
                // requires that you've extended your view features with Backbone.Events
                if (event.feature.trigger) {
                    event.feature.trigger('featureunhighlighted', event);
                }
            },
            scope: this
        });
    },

    addFeatureModel: function(model) {
        if (!this.views) this.views = {};

        this.views[model.cid] = new FeatureItemView({
            layer: this.layer,
            model: model
        });
    },

    removeFeatureModel: function(model) {
        this.views && this.views[model.cid] && this.views[model.cid].remove();
    },

    // ...

});

然后我们需要一个FeatureItemView用 OL Layer 初始化的呈现自己。

MyFeatureView = Backbone.View.extend({
    initialize: function(options) {
        // requires options.layer, an OpenLayers Layer that is already added to your map.
        options = options || {};

        this.layer = options.layer;
        this.initSelectControl();

        // ...

        this.render();

        _(this.feature).extend(Backbone.Events);
        this.feature.on('featurehighlighted', this.showPopup, this);
        this.feature.on('featureunhighlighted', this.hidePopup, this);
    },

    render: function() {
        this.feature = // ...

        this.layer.addFeatures([this.feature]);

        // ...
    },

    remove: function() {
        this.layer.removeFeatures([this.feature]);
    },

    // ...

});

---

我通过搜索与“backbone and canvas”相关的讨论发现了一些其他有趣的解决方案，因为它有一些相似的方面。