Creating a complex Feature / Vector in OpenLayers

Question

The closest post I could find to my question is Compound complex feature in OpenLayers. Alas, no one answered it. I am quite proficient in JavaScript but relatively new to OpenLayers and its complex API. I have created complex Controls prior to this. However, this time I am looking to create a complex Feature / Vector. The general idea of it is that the feature has a display icon (like a pin, for example) as the main component. The component is interactive and responds to user actions (select, drag, etc). Upon selection, I desire to render additional vectors that are logically associated with this component (circles, rectangles, etc). These Vectors listen to user interactions as well.

Previously, in case of Controller, I was able to use source of other controllers to make sense of development direction and successfully proceed. Its a little harder with Features / Vectors, imho.

I started by extending OpenLayers.Feature.Vector using OpenLayers.Feature.Vector.CustomClass = OpenLayers.Class( OpenLayers.Feature.Vector, {...}); code. Constructor takes specific parameters to my feature, creates several geometry objects (points, polygon, lines), adds them to the OpenLayers.Geometry.Collection, and invokes OpenLayers.Feature.Vector constructor with collection passed into it.

Unfortunately, I realized that in order to display an icon, I cannot just use a Geometry.Point but need to create a Vector for it. That kind of threw me off because I will create Vectors within my custom Vector object. It is nothing unusual in general but I wonder if this is the way things are done in OpenLayers. Like I have mentioned, I do not find API documentation very useful as it simply states general function headers / brief description.

I would greatly appreciate if someone could point me into the right direction (haven't found many tutorials online beyond the basic "create marker with custom image" types). If the description isn't clear, let me know and I'll try to provide additional information.

Answer 1

I've had to tackle similar problems in the past. The best approach with OpenLayers (or any mapping tool for that matter) is usually to separate your layers into feature classes, each of which represents a collection of points, lines, or polygons. Once you create all of your layers, you can create a select control that listens for events on each of these layers and responds appropriately.

If you need to logically associate subsets of these features together, you could store references to these features externally, or within the parent feature's attributes object.

Answer 2

My solution is to provide a FeatureCollection geojson as the complex/compound type data. In my case the FeatureCollection consists of many Point features, and one LineString feature. Openlayers can consume this geojson:

var features = (new ol.format.GeoJSON()).readFeatures(geojson)

... and provide the collection of features. You can then iterate over those features and provide some unifying attribute/object to each feature. Then, when you define event handlers (hover or select/click), access the unifying attribute to get hold of any other related feature.