如何設置Openlayers以使用backbone.js？

Question

我正在嘗試構建一個基於Openlayers和backbone.js的應用程序。 我應該讓每一層都成為一個視圖嗎？ 到目前為止，我有一個地圖視圖，標記視圖，並考慮使每個圖層也成為一個視圖。 我有一個標記模型和地圖模型。 任何人都可以幫我解決這個問題嗎？

Answer 1

在做了類似於@Gagan過去的回答之后，下面我將如何做到這一點：

將OpenLayers Map視為一個特殊的渲染表面 - 與DOM不同，類似於處理<canvas> 。 認識到Backbone圍繞您在DOM中呈現視圖的想法做出了一些（輕松的）假設：

1. 視圖與其對應的DOM節點之間存在特殊關系（ view.el和view.$el magic）。

2. events哈希自動轉換為DOM節點上觸發的事件的處理程序。

我們希望為OpenLayers視圖重新創建這些概念。 一些想法：

1. 在Backbone中，View是模型和DOM的一部分之間的中介。 在OpenLayers中，我們有一個OpenLayers功能，Vector，Marker，Popup等，而不是一塊DOM。 我們可以在View及其OpenLayers對象之間重新創建這種特殊關系。 聽取模型更改和更新OpenLayers對象的視圖很自然。 如何監聽和響應OpenLayers對象上的事件？

這是OpenLayers的一個棘手部分。 假設你有一個SelectControl 。 您可以在圖層級別收聽事件，這將為您提供對event.feature的引用。 但是，如何將該功能映射到您的視圖以保持良好的職責分離？ 選擇你的毒葯。 在下面的示例中，我將（重新）直接在該功能上觸發事件，該視圖已經具有該句柄。 然后視圖將必須在該功能上收聽這些事件。 請注意，OL功能沒有內置事件。 我們將使用_.extend(object, Backbone.Events);將Backbone事件混合到它們中_.extend(object, Backbone.Events); 。

1. 您可以創建一個featureEvents哈希，但這可能是過度工程。 視圖已經接收到模型對象並顯式綁定到其事件。 在下面的示例中，我將對我的視圖創建的OL功能執行相同的操作。

現在構建你的視圖。 我傾向於將OpenLayers Layer視為一組項目 。 假設您要渲染一組要素。 您可以創建使用Map對象初始化的FeatureCollectionView類。 然后它將為其集合創建一個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();
    },

    // ...

});

然后我們需要一個使用OL Layer初始化的FeatureItemView來自我渲染。

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]);
    },

    // ...

});

---

我通過搜索與“骨干和畫布”相關的討論找到了一些其他有趣的解決方案，因為它有一些類似的方面。

Answer 2

這個要點可以幫到你。 要了解Backbone與OpenLayers，它非常有用。 https://gist.github.com/bwreilly/2052314