Use OpenLayers3 to add a map, right-click the map, and choose openlayers3 map.

Use OpenLayers3 to add a map, right-click the map, and choose openlayers3 map.

To add a right-click menu, first we need to listen to the right-click operation. We know that the right-click event name is contextmenu. When you place the cursor over the html element, right-click the event to trigger the contextmenu event, you can implement the corresponding display menu function in the callback function of the contextmenu event.

In openlayers, where can we start by adding this event to the map? First, we need to understand the page initialization process of openlayers.

Openlayers page initialization process

Openlayers is also a front-end library, so it must be inseparable from the use of html. For example, we first need to place an html element that displays a map on the page, A div element (assuming its id attribute is set to "map", which is hereinafter referred to as "map div"), and then specifies this element during map initialization, openlayers will first create a div element whose class is ol-viewport in this element. Its size remains the same as that of map div, and then create a canvas element in ol-viewport div, the requested map is rendered in the canvas element. Secondly, a div element of the class ol-overlaycontainer is added for overlay. Finally, add a div element whose class is ol-overlaycontainer-stopevent. It is mainly used to place the openlayers control. The article on custom extended controls is introduced at the beginning. This is not the focus and we will not detail it here.

The final html dom structure is as follows:

Figure 1 DOM Structure

We will think of adding events to the map div element and then right-clicking the pop-up menu. This idea is natural and can be implemented. However, we need to think about the following things, we should at least have a global understanding of things before starting. After we display the menu, we usually need to perform operations based on the location of the corresponding map, in this case, the contextmenu event object contains the screen coordinates when a click occurs. However, it is difficult to obtain the coordinates in the corresponding coordinate system of the map based on the screen coordinates.

Where are the difficulties? There are three main points:

First, the coordinates contained in the event object are relative to the view, page, or screen of the entire browser;
Secondly, map elements are usually displayed in random sizes and locations;
Finally, the screen coordinate system and the map coordinate system are often completely different. How can we convert the coordinates of the relative and map elements into the coordinates under the map coordinate system?

First, we need to obtain the coordinates of the event coordinates relative to the map div (element containing the map), and then convert the coordinates of the map div to the actual coordinates in the map. In the first step, we can obtain it through computation, but the second step must be done through openlayers, because only openlayers knows the coordinate system of the map, which also has related functions in openlayers. Fortunately, in openlayers, we can complete the above operations step by step. We only need a function: map. getEventCoordinate (event). In the following implementation, I will detail this function.

Let's take a look at the specific implementation.

Right-click menu implementation

For convenience, the code in this article uses JQuery.

The complete instance code in this article can be viewed or downloaded in my GitHub. If it is useful, don't forget to click star.

Next, we will add the right-click menu function step by step, which is divided into three steps:

Add a contextmenu event to the html element;

Obtain the click coordinates of the map;

Add a menu for the corresponding map location.

Add a contextmenu event to an html Element

Right-click the html element. The event name is contextmenu, which is supported by all mainstream browsers. Do not confuse the newly added attribute contextmenu in html. Currently, this attribute is only supported by firefox. We only use the oncontextmenu event. You can bind this event to any html element that contains the map. openlayers handles the coordinate conversion issues. As shown in the following figure, map. getViewport () returns the div element created on the openlayers initialization page with the class ol-viewport, that is, the element directly containing the map. Because the browser has a default right-click menu, you only need to call e. preventDefault (); to cancel the default menu:

$ (Map. getViewport (). on ("contextmenu", function (event) {e. preventDefault (); // function after event WRITING });

Obtain click coordinates of a map

To obtain the coordinates of a map, you only need one sentence, as shown below,

var coordinate = map.getEventCoordinate(event);

The function parameter is the event object corresponding to oncontextmenu. This function contains. call getCoordinateFromPixel (), map. the getCoordinateFromPixel () parameter is ol. pixel is a coordinate, array format [x, y], and ol is called in its implementation. vec. mat4.multVec2 (), which completes the actual work of processing the coordinate transformation.

Add menu for corresponding map location

Here we use the overlay function to add a menu. We have introduced overlay in the previous article, so it will not be detailed here. First, we add a directory on the html page. You can set the specific css style. If you want to see the complete source code, you can go to my GitHub to view or download the complete code:

<Div id = "contextmenu_container" class = "contextmenu"> <ul> <li> <a href = "#"> setting center </a> </li> <li> <a href = "#"> Add a landmark </a> </li> <a href = "#"> Distance Measurement </a> </li> </ul> </div>

Use this html element to initialize an overlay and add it to the map:

var menu_overlay = new ol.Overlay({  element: document.getElementById("contextmenu_container"),  positioning: 'center-center'});menu_overlay.setMap(map);

Next, we can right-click the Event Callback Function in the menu and set the overlay display position based on the obtained map coordinate position:

menu_overlay.setPosition(coordinate);

Menu hiding

When we right-click the menu, but we cannot make the menu always show in the map, we can add the left mouse click, the menu disappears function, or when you select a function, menu disappears. This is easy to implement and can be implemented with just one sentence. Just put it in the callback function of the left mouse button event or the menu function execution function, as shown below:

menu_overlay.setPosition(undefined);

Summary

This article mainly describes how openlayers initializes PAGE map elements, implements the "right-click menu" function on the map, and hides menus. We didn't bind events to the entries in the menu, because our focus is on Implementing the Right-click menu, and what functions should be bound to menu entries, which is no different from the common javascript events, so it is not expanded.

Articles you may be interested in:

• Js capture the paste event implementation code in the right-click menu
• In-depth exploration of JavaScript and JQuery web page shielding right-click menu and prohibit select copy
• Summary of how to disable right-click menu and drag
• Javascript implements a completely custom webpage shortcut menu with multilevel Directories
• Javascript shortcut menu