A module that simplifies working with OpenLayers and monitoring systems
Hi, Habr!
After a short time of developing satellite monitoring systems based on OpenLayers, I came to the conclusion: “I’m tired of constantly creating the necessary objects, which are also a bunch of objects. Store it all in different variables and a lot more then. ". Therefore, I decided to write a lightweight module that will simplify a bit the development of this kind of systems.
Namely, it simplifies working with such things as managing markers on a map, building tracks, saving geometries in WKT for later saving to a database, etc. things.
')
The article will be short. Briefly describe what was happening and why.
There were only 6 classes implemented and one class that provides a single interface to access them. The whole thing was compressed by Grunt into one minified file.
Consider some examples of working with this module.
The module constructor initializes the map, adds a map layer and all the classes described above. In a word, by calling the constructor, we already have a working card in our hands:
Adding controls to the map. Each control is stored in an array and you can access these elements later if necessary. You can also pass a set of parameters to each element separately. The function parameter is an object in which we list all the necessary controls and their parameters:
To add your map or your layer, then everything is simple :) In the addMap function in the object we specify the name of the map that will be displayed in the map selector and the type of the map itself. To add your own layer, pass in the layer name in the selector and the layer attributes. The style of displaying a layer is obligatory:
To add your vehicle, pass the name of the layer to which you want to add the vehicle, the coordinates of the vehicle and the attributes of the element:
To build your own track, we similarly specify the name of the layer to which we add the track, an array of objects with coordinates (in the format [{coord_1}, {coord_2}, ..., {coord_n}]) and the attributes of this element (track):
An example of work can be found here . Documentation on all functions can be found here . The sources are here .
PS Developed this module "purely for myself" in order to save precious time. I decided to post it here, maybe someone will come in handy.
PPS In cases where new features are needed, it is planned to add an implementation to the same module. Plans to make routing when building tracks.
I want to make a small remark and thank you for sending the invite. More mistakes of this kind on my part will not happen again.
After a short time of developing satellite monitoring systems based on OpenLayers, I came to the conclusion: “I’m tired of constantly creating the necessary objects, which are also a bunch of objects. Store it all in different variables and a lot more then. ". Therefore, I decided to write a lightweight module that will simplify a bit the development of this kind of systems.
Namely, it simplifies working with such things as managing markers on a map, building tracks, saving geometries in WKT for later saving to a database, etc. things.
')
The article will be short. Briefly describe what was happening and why.
There were only 6 classes implemented and one class that provides a single interface to access them. The whole thing was compressed by Grunt into one minified file.
- BaseFunc - needed for basic functions, such as expanding an object with another object, transferring geometry to WKT or vice versa, centering a map, etc .;
- Console is a simple class in which I described the functions of writing different types of messages and a group of messages to the console;
- Control - here we store all the controls that were created in OpenLayers and the function to add these same elements;
- Layer - work with layers. It is here that describes the methods of adding maps (supported by Google, Bing, OSM with different types), adding their own layers, getters to layers or elements of a layer;
- Track - track manager. Here we build tracks, delete them, hide them. When a track is built, protection against incorrect data and protection against point duplication are implemented (for optimization purposes);
- Vehicle is a similar vehicle manager. Add, move, hide, delete.
Consider some examples of working with this module.
The module constructor initializes the map, adds a map layer and all the classes described above. In a word, by calling the constructor, we already have a working card in our hands:
this.Objects.OpenLayersTools = new OpenLayersTools(); Adding controls to the map. Each control is stored in an array and you can access these elements later if necessary. You can also pass a set of parameters to each element separately. The function parameter is an object in which we list all the necessary controls and their parameters:
this.Objects.OpenLayersTools.Control.addControls({ LayerSwitcher: { controlType: 'LayerSwitcher', roundedCorner: true }, MousePosition: { controlType: 'MousePosition' }, PanZoomBar: { controlType: 'PanZoomBar' }, Navigation: { controlType: 'Navigation' }, ArgParser: { controlType: 'ArgParser' }, Attribution: { controlType: 'Attribution' } }); To add your map or your layer, then everything is simple :) In the addMap function in the object we specify the name of the map that will be displayed in the map selector and the type of the map itself. To add your own layer, pass in the layer name in the selector and the layer attributes. The style of displaying a layer is obligatory:
this.Objects.OpenLayersTools.Layer.addMap({ 'Google Maps': 'Google Streets' }); this.Objects.OpenLayersTools.Layer.addVectorLayer(' ', { styleMap: { default: { display: '${display}', label: '${label}', externalGraphic: '${externalGraphic}', graphicWidth: 32, graphicHeight: 32, graphicYOffset: -50 } } }); this.Objects.OpenLayersTools.Layer.addVectorLayer('', { styleMap: { default: { display: '${display}', label: '${label}', strokeWidth: 2 } } }) To add your vehicle, pass the name of the layer to which you want to add the vehicle, the coordinates of the vehicle and the attributes of the element:
Core.Objects.OpenLayersTools.Vehicle.addVehicle(' ', { longitude: longitude, latitude: latitude }, { id: id, label: 'Testing Vehicle ' + id, display: '', externalGraphic: './images/car.png' }); To build your own track, we similarly specify the name of the layer to which we add the track, an array of objects with coordinates (in the format [{coord_1}, {coord_2}, ..., {coord_n}]) and the attributes of this element (track):
Core.Objects.OpenLayersTools.Track.buildTrack('', points, { id: id, label: 'Testing Track ' + id, display: '', maxInterval: 5, minInterval: 0.0001, projection: 'EPSG:4326' }); An example of work can be found here . Documentation on all functions can be found here . The sources are here .
PS Developed this module "purely for myself" in order to save precious time. I decided to post it here, maybe someone will come in handy.
PPS In cases where new features are needed, it is planned to add an implementation to the same module. Plans to make routing when building tracks.
I want to make a small remark and thank you for sending the invite. More mistakes of this kind on my part will not happen again.
Source: https://habr.com/ru/post/181840/
All Articles