Use OpenLayers3 to add a map right-click menu _ javascript skills

This article describes how to use OpenLayers3 to add the right-click menu of a map. For more information, see add right-click menu, 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 p element (assuming its id attribute is set to "map", which is referred to as "map p"), and then specifies this element during map initialization, openlayers will first create a p element whose class is ol-viewport in this element. Its size remains the same as map p, and then create a canvas element in ol-viewport p, the requested map is rendered in the canvas element. Secondly, a p element of the class ol-overlaycontainer is added for overlay. Finally, add a p element whose class is ol-overlaycontainer-stopevent. It is mainly used to place the openlayers control. The first article to add a custom extension control begins As mentioned above, this is not the focus and we will not detail it in detail.

The final html dom structure is as follows:

DOM Structure

We will think of adding events to the map p 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 event coordinates relative to map p (the element containing the map), and then convert the coordinates of map p 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 () will return the p element of class ol-viewport created on the openlayers initialization page, that is, the element that directly contains 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:

  
 
 
    
  
  
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.