Openlayers 3 Extension Custom Controls--to toggle layer controls as an example

A control in Openlayers is a visible DOM element that is pinned to a location on the page, which may contain operable buttons or simply display information, where their position and style are determined by their associated CSS style. By default, they are all in an element of a CSS Class (class) ol.overlaycontainer-stopevent , and you can use other custom DOM container elements, of course.

In the openlayers structure, there are many controls, such as the zoom control in the upper-left corner, the property control in the lower-right corner, which inherit a base class ol.control.Control , which essentially provides a uniform "block event propagation mechanism" for its subclasses, and ol.control.Control inherits ol.Object the And the control is placed in a uniform container ol.Collection , so if you inherit the ol.control.Control base class, the custom control can benefit not only from its "block event propagation mechanism", but also to ol.Object ol.Collection the methods and events that are used.

Ol.control.Control Introduction

ol.control.Controlis the Openlayers control base class, our custom control can inherit the base class (we also spoke about the benefits of inheriting the base class above), use JavaScript to dynamically create DOM elements in the class, specify the CSS style class (class) corresponding to the DOM element, and bind the corresponding event to the DOM element to complete the custom control. OPENLAYERS3 uses Google's closure library for development, using closure syntax for inheritance, such as when we define our toggle layer Control class ol. control.LayerSwitcher , the following statements are inherited using the closure implementation:

ol.inherits(ol.control.LayerSwitcher, ol.control.Control);

It is also important to note that we want to call the constructor of the base class in the ' constructor ' of the control class (the quotation mark is because the concept of the JavaScript constructor is not obvious), and we can use the Invoke or Apply method (because the class of JavaScript is essentially a function simulation). or directly using: new ol.control.Control({element: myElement}) .

Of course, we can completely not inherit ol.control.Control , but it is best not to do so, first of all, inheriting the base class helps to keep the organizational structure of openlayers clear, and secondly, we can use ol.control.Control the ' block event propagation mechanism ', and ol.control.Control inherit ol.Object , So we can also use its method.

Specific implementation – Take the project in GitHub as an example

Originally in Openlayers 2, the layer switch control is "standard", and in Openlayers 3, the default does not have this control, then we can proceed to extend the implementation of one. In GitHub there is a ready-made project, the project address is: Https://github.com/walkermatt/ol3-layerswitcher, interested can see, in our understanding of the specific ideas and implementation of ideas, is the specific code implementation, And in practice, testing, continuous correction, but compared to the use of existing open source projects through these processes, we do not apply the existing ' wheel '? Of course the premise is that we understand its implementation, can be targeted to improve its own needs, of course, it follows the open source agreement to allow us to do so.

To do one thing, you have to clear the purpose and specific needs, and design for the needs, do not rush to achieve, followed by the search for the implementation of the method, so first clear our functional requirements:

1. A visible toggle layer DOM element on the map that expands all the layers as a list when the mouse hovers over the elements;
2. Each layer has a check box in front of it, and when checked, the layer is displayed, and when unchecked, hides the layer;
3. A layer declared as a basemap, which loads a radio box (radio) before the list item, cannot be deselected.

After a rough demand analysis, we started to implement. We first use the 构造函数模式 definition of our base class properties and events, and then define the external methods.

Defining a base class

Ol.control.LayerSwitcher = function(opt_options) {    varOptions = Opt_options | | {};varTiplabel = Options.tiplabel? Options.tiplabel:' Legend '; This. maplisteners = []; This. Hiddenclassname =' ol-unselectable ol-control layer-switcher '; This. Shownclassname = This. Hiddenclassname +' shown ';varelement = Document.createelement (' div '); Element.classname = This. hiddenclassname;varbutton = Document.createelement (' button '); Button.setattribute (' title ', Tiplabel); Element.appendchild (button); This. Panel = document.createelement (' div '); This. Panel.classname =' Panel '; Element.appendchild ( This. Panel);varThis_ = This; Element.onmouseover = function(e) {This_.showpanel ();    }; Button.onclick = function(e) {This_.showpanel ();    E.preventdefault ();    }; Element.onmouseout = function(e) {E = e | | window.event;if(!element.contains (e.toelement))        {This_.hidepanel ();    }    }; Ol.control.Control.call ( This, {element:element, target:options.target});};o L.inherits (Ol.control.LayerSwitcher, Ol.control.Control);

As you can see from the code, starting with line sixth, you define two CSS classes, one for the control to shrink and expand, and then start to define DOM elements, a button, two div elements, and ask the container Div and panel (panel, where the content is displayed) Div, Then the button is bound to the mouse click, hover and leave the event processing. Finally, the constructor of the base class is called, and the base class is inherited using the closure syntax ol.control.Control .

In the defined event-handling mechanism, we see and the methods, showPanel hidePanel which are defined in the prototype chain, are defined in the following ways.

Define methods for external

The main idea is to define the interaction between the user and the control, that is, the setting of the visibility of each layer of the map, including the map and layers, and, of course, the DOM elements that are defined. Because the implementation of these methods is not related to the idea of implementing custom controls in this article, here is a list of the main functions of knowledge:

Common Methods
-Hidepanel, hide the panel div that shows the list of layers;
-Showpanel, a panel div showing the list of layers;
-Renderpanel, redraw the panel div;
-Setmap, sets the map object associated with it.

Private Methods
-Ensuretopvisiblebaselayershown_, when multiple layers are visible (tick), make sure that only the topmost layer is visible;
-Setvisible_, sets the visibility of the layer;
-Renderlayer_, renders all the layers contained in a layergroup;
-Renderlayers_,

And a static method: The ol.control.LayerSwitcher.forEachRecursive function is to invoke a callback function for each layer in a layergroup.

Summarize

This paper mainly introduces the principle of extending the switch layer control on the basis of openlayers and the problems needing attention, to write the extension yourself, first of all, you must understand the knowledge of the Web front end to a higher degree, but also to the openlayers have a better understanding of the object-oriented thinking in JavaScript implementation, but also to understand, in order to write high-quality extensions.

OK, just write here, what's the problem, you can leave a message under the article or send me an e-mail.

Openlayers 3 Extension Custom Controls--to toggle layer controls as an example