OpenLayers 3: Right-click a map and choose menu

OpenLayers 3: Right-click a map and choose menu

To add a right-click menu, first we need to listen to the right-click operation. We know that the right-click event name iscontextmenu, When you right-click the html element, it will triggercontextmenuEvent, incontextmenuThe corresponding display menu function can be implemented in the Event Callback Function.

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 class in this elementol-viewportThe size of the div element is the same as that of the map divol-viewportCreate a canvas element in the div to render the requested map in the canvas element. Second, a classol-overlaycontainerTo place overlay. Finally, add a classol-overlaycontainer-stopeventThe div element is mainly used to place the openlayers controls. The previous article introduced the custom extension control. This is not the focus. We will not detail it.

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, at least we 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.contextmenuThe event object contains the screen coordinates of the click, but 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 entire browser's view, page, or screen. Second, the map elements are usually random sizes and positions. 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, only one function is required:map.getEventCoordinate(event)In the following implementation, I will discuss this function in detail.

Let's take a look at the specific implementation.

Right-click the menu to facilitate the implementation, the code in the 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 html elements contextmenuEvent, get the coordinates of the map, and add the menu at the corresponding location of the map. Add html elements contextmenuEvent

Right-click the html element and the event name iscontextmenuAll mainstream browsers support this event. Do not confuse the contextmenu attribute added in html. Currently, this attribute is only supported by firefox. We only useoncontextmenuThis event. You can bind this event to any html element that contains the map. openlayers handles the coordinate conversion issues. As follows,map.getViewport()The class created on the openlayers initialization page is returned.ol-viewportThe div element, that is, the element that directly contains the map. Because the browser has a default right-click menu, you only need to calle.preventDefault();You can:

$ (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 isoncontextmenuCorresponding event object. This function containsmap.getCoordinateFromPixel(),map.getCoordinateFromPixel()The parameter isol.pixelIs a coordinate, array format [x, y], and its implementation callsol.vec.Mat4.multVec2().

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:

    
  
  
 
   
Configuration Center
 
   
Add landmark
 
   
Distance Measurement
 
  

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.

Okay. Write it here. If you have any questions, leave a message below the article or send me an email.

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.