[英]How can I set up Openlayers to use backbone.js?
I am trying to build an app based on Openlayers and backbone.js. 我正在尝试构建一个基于Openlayers和backbone.js的应用程序。 Should i make each layer a view?
我应该让每一层都成为一个视图吗? So far i have a Map View, marker view and was thinking about making each layer a view as well.
到目前为止,我有一个地图视图,标记视图,并考虑使每个图层也成为一个视图。 I have a markers model and map model.
我有一个标记模型和地图模型。 Can anyone help me out with setting this up?
任何人都可以帮我解决这个问题吗?
After doing it similarly to @Gagan's answer in the past, here's how I would do it next time: 在做了类似于@Gagan过去的回答之后,下面我将如何做到这一点:
Treat the OpenLayers Map as a special rendering surface - different from the DOM, similar to how you would treat a <canvas>
. 将OpenLayers Map视为一个特殊的渲染表面 - 与DOM不同,类似于处理
<canvas>
。 Recognize that Backbone makes some (light) assumptions around the idea that your views are rendered in the DOM: 认识到Backbone围绕您在DOM中呈现视图的想法做出了一些(轻松的)假设:
There is a special relationship between Views and their corresponding DOM node ( view.el
and view.$el
magic). 视图与其对应的DOM节点之间存在特殊关系(
view.el
和view.$el
magic)。
The events
hash is automatically translated into handlers for events triggered on the DOM node. events
哈希自动转换为DOM节点上触发的事件的处理程序。
We will want to recreate these concepts for our OpenLayers views. 我们希望为OpenLayers视图重新创建这些概念。 Some ideas:
一些想法:
This is one of the sticky parts of OpenLayers. 这是OpenLayers的一个棘手部分。 Let's say you have a
SelectControl
. 假设你有一个
SelectControl
。 You can listen to events at the layer level, which will give you a reference to event.feature
. 您可以在图层级别收听事件,这将为您提供对
event.feature
的引用。 But how do you map that feature back to your view to keep good separation of responsibilities? 但是,如何将该功能映射到您的视图以保持良好的职责分离? Pick your poison.
选择你的毒药。 In my examples below, I will (re)trigger the event directly on the feature, which the view already has a handle to.
在下面的示例中,我将(重新)直接在该功能上触发事件,该视图已经具有该句柄。 Then the view will have to listen to those events on the feature.
然后视图将必须在该功能上收听这些事件。 Note that OL features don't have events built into them.
请注意,OL功能没有内置事件。 We will mix Backbone events into them using
_.extend(object, Backbone.Events);
我们将使用
_.extend(object, Backbone.Events);
将Backbone事件混合到它们中_.extend(object, Backbone.Events);
. 。
Now for structuring your Views. 现在构建你的视图。 I tend to think of an OpenLayers
Layer
as a collection of items . 我倾向于将OpenLayers
Layer
视为一组项目 。 Let's say you want to render a collection of features. 假设您要渲染一组要素。 You might create a
FeatureCollectionView
class that is initialized with a Map
object. 您可以创建使用
Map
对象初始化的FeatureCollectionView
类。 It would then create a Layer
for its collection. 然后它将为其集合创建一个
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();
},
// ...
});
Then we need a FeatureItemView
that is initialized with an OL Layer
to render itself on. 然后我们需要一个使用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]);
},
// ...
});
I found some other interesting solutions by searching for discussions related to "backbone and canvas" since it has some similar aspects. 我通过搜索与“骨干和画布”相关的讨论找到了一些其他有趣的解决方案,因为它有一些类似的方面。
This gist may help you. 这个要点可以帮到你。 For understanding Backbone with OpenLayers its quite useful.
要了解Backbone与OpenLayers,它非常有用。 https://gist.github.com/bwreilly/2052314
https://gist.github.com/bwreilly/2052314
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.