Add maps using OPENLAYERS3 the right mouse button menu _javascript tips

Add right menu, first we have to monitor the right mouse click operation, we know the right mouse button event name is ContextMenu, when the mouse on the HTML elements, click the right mouse button, it will trigger ContextMenu events, in ContextMenu The corresponding display menu function can be implemented in the callback function of the event.

So where do we start to add this event to the openlayers in the map? First we need to understand the process of Openlayers initialization page.

Openlayers Initialization page Process

Openlayers is also a front-end library, then it must be inseparable from the use of HTML, for example, we first need to place a display map in the page HTML elements, a DIV element (assuming its id attribute set to "map", hereafter referred to as Map Div), and then when the map initialization Specifying this element, Openlayers first creates a DIV element of class Ol-viewport in this element that remains the same size as the map Div, and then creates a canvas element in the Ol-viewport Div, where the can The map to render the request to in the VAS element, followed by adding a DIV element with class Ol-overlaycontainer to place the overlay; Finally, add a class to Ol-overlaycontainer-stopevent Div elements, mainly to place openlayers controls, the previous article to add a custom extension control has said, here is not the focus, we do not detail.

The resulting HTML DOM structure is shown in the following illustration:

Figure 1 The DOM structure that is formed

We'll think of adding events in this map div element, then right button pop-up menu, the idea is natural, but also can be realized, but we have to think of the things behind, at least a global understanding of things to do, we show the menu, often according to the corresponding map location to carry out certain operations, Then our ContextMenu event object contains the screen coordinates where the clicks occur, but it will be difficult to get the coordinates of the corresponding coordinates in the map according to the screen coordinates.

Where is the difficulty? There are three main points of the following:

First, the event object contains coordinates that are relative to the entire browser's viewport, page, or entire screen;
Secondly, the elements of the display map are often random size and location;
Finally, the frame of the screen and the coordinate system of the map are often completely different, how to convert the coordinates of the relative and map elements into the coordinates of the map coordinate system?

First, we need to get the coordinates of the event coordinates relative to the map div (the elements that contain the maps), and then convert the coordinates relative to the map div to the actual coordinates in the map. In the first step, we can get through the calculation, but the second step must be done through openlayers, because only openlayers the coordinate system of the map most clearly, this also has related function in Openlayers. Fortunately, in openlayers we can do this in one step, only one function: Map.geteventcoordinate (event), in the following implementation, I will elaborate on this function.

Let's look at how to implement it.

The right mouse button menu is implemented specifically

For convenience, the code in the article uses JQuery.

The complete code for the example in the article can be viewed or downloaded in my GitHub, useful to remember to click on Star.

Next we add the right key menu function step-by-Step, we are divided into three steps:

Adding ContextMenu events to HTML elements;

Get the corresponding click coordinates of the map;

Add a menu at the appropriate location on the map.

Add a ContextMenu event to an HTML element

The right mouse button event for an HTML element is named ContextMenu, an event that is supported by all major browsers and does not confuse HTML for the addition of attributes ContextMenu, which is currently only supported by Firefox, and we just use oncontextmenu this event. This event can be bound to any HTML element that contains a map, and openlayers handles the problem of coordinate transformations. as follows, Map.getviewport () returns the DIV element of class Ol-viewport that is created when the openlayers initializes the page, which is the element that directly contains the map. Because the browser has the default right-click menu, so we want to cancel the default menu, just call E.preventdefault (); Can:

$ (Map.getviewport ()). On ("ContextMenu", function (event) {
  e.preventdefault ();
  Write the function after the event is triggered
});

Get the corresponding click coordinates of the map

To get a map of the corresponding click coordinates only need one sentence, such as the following,

var coordinate = map.geteventcoordinate (event);

The function argument is the OnContextMenu event object that contains a call to Map.getcoordinatefrompixel (), and the Map.getcoordinatefrompixel () parameter is Ol.pixel is a coordinate, array format [x, Y], and its implementation calls the OL.VEC.MAT4.MULTVEC2 (), which completes the actual work of dealing with coordinate transformations.

Map to add a menu to the corresponding location

Here we combine overlay to add a menu, before the article introduced overlay, here is no longer specifically launched. First, we add a directory in the HTML page, the specific CSS style can be set up, want to see the full source can go to my GitHub to view or download the complete code:

<div id= "Contextmenu_container" class= "ContextMenu" >
  <ul>
    <li><a href= "#" > Setup Center </a></li>
    <li><a href= "#" > Add landmark </a></li>
    <li><a href= "#" > Distance measurement </a></li>
  </ul>
</div>

Initializes a overlay using this HTML element and adds overlay to the map:

var menu_overlay = new ol. Overlay ({
  element:document.getElementById ("Contextmenu_container"),
  positioning: ' Center-center '
}) ;
Menu_overlay.setmap (map);

Next, we can set the overlay display position in the event callback function of the right mouse menu, depending on the location of the map coordinates obtained:

menu_overlay.setposition (coordinate);

Menu Hide

When we click the right mouse button, the menu appears, but we can't let the menu always appear in the map, then we can add the left mouse button click, the menu disappears function, or when a feature is selected, the menu disappears. This is easier to implement, as long as a sentence can be implemented, placed in the left mouse button event callback function or menu function execution function on the line, as follows:

Menu_overlay.setposition (undefined);

Summarize

In this article, we mainly talk about the process of openlayers initialization of page map elements, and introduce the realization of "right mouse button menu function" and hidden menu in the map. We do not bind events to the items in the menu, because our focus is on implementing the right-click menu, what functionality is bound to the menu's entry, and no common JavaScript event bindings, so there is no expansion.