Openlayers 3 Map view

One of the three essential elements of initializing a map is the view, which controls the interaction of the map with people, such as zooming, adjusting the resolution, and rotating the map. This means that each Map object contains a View object part that controls the interaction with the user.

It mainly introduces the function and usage of view and analyzes the related functions in the commercial map application. The specific implementation of the feature and how it is customized and optimized is beyond the scope of this article.

The definition of the view class can be seen here in GitHub's Openlayers project, and I will not post a large code, just paste the core code for a specific point, need to see the full source to the above link to see. First, the View property

The parameters required for the view's constructor are a olx. Viewoptions object, this object is described as follows:

/**
 * Object literal with config options for the view.
 * @typedef {center: (ol. coordinate|undefined),
 *     constrainrotation: (boolean|number|undefined),
 *     enablerotation: ( boolean|undefined),
 *     extent: (OL. extent|undefined),
 *     minresolution: (number|undefined),
 *     maxresolution: (number|undefined),
 *     minzoom: (number|undefined),
 *     maxzoom: (number|undefined),
 *     projection: Ol.proj.ProjectionLike,
 *     Resolution: (number|undefined),
 *     resolutions: (Array.<number >|undefined),
 *     rotation: (number|undefined),
 *     zoom: (number|undefined),
 *     Zoomfactor: (number|undefined)}}
 * @api */
 

The more important properties are as follows: center is a coordinate [x, Y], which represents the central location of the map view; extent is an array object –[left, bottom, right, top], representing the initial range of the map view; projection is the projection coordinate system of the map; Resolution represents the resolution of the map, which is not a normal unit area of pixels, but a unit of pixels representing the distance units, such as meters/pixels; rotation represents the rotation angle of the map; Zoom represents the initial zoom level of the map.

The state of these properties directly affects the appearance of the map and the user's interaction, which is used to initialize the properties of the view. View contains a business woman. Viewproperty array:

Ol. Viewproperty = {
  Center: ' Center ',
  RESOLUTION: ' RESOLUTION ',
  ROTATION: ' ROTATION '
};

In addition to initializing ol. Attributes in Viewproperty, view properties, and Projection_ properties represent projection information, some restriction properties maxresolution_, Minresolution_, minzoom_, etc. The main limitation is to limit the map's maximum and minimum resolution (scale) and minimum zoom levels (zoom level).

The method of defining the view class is to mix the constructor pattern with the prototype pattern, the constructor pattern part (as defined by the constructor above), the main definition of the class's private properties and private functions, so the above definition for each object-specific properties, the content of each object is different; The prototype schema primarily defines the public methods of the class. Each instantiated object holds a pointer to the prototype, so there is only one instance of the method and property defined by the prototype schema, and each object references the instance.

Here we describe the common public methods, roles, and usages of each of the view objects that it instantiates. second, view method

The method of the view class is mainly for the get and set methods of the properties of the view, its basic method is many, we will use the common method to classify: Rotate,ifdef fitextent,fitgeometry getcenter,getprojection, Getresolution,getrotation,getzoom Setcenter,setresolution,setrotation,setzoom

The following describes the roles and usages of these methods, followed by examples, to give you a clearer understanding of how these methods perform.

Rotate (rotation, opt_anchor), accepts two parameters, rotates the number of angles (rotation) and rotates the center (opt_anchor, optional), and rotates the map around opt_anchor with rotation angles;

ISDEF, check whether the center and resolution of the map has been set, all set to return True, otherwise return false;

Fitextent (extent, size), accepts two parameters: extent and size,extent type is ol. Extent–[left, Bottom, right, top],size is obtained by Map.getsize (), which is similar to the zoom to layer feature of ArcGIS, zooming the map view to the appropriate scale visible in the Extent area;

Fitgeometry (geometry, size, opt_options), parameters are geographic features, map dimensions and optional parameters, and the view is scaled to fit the geographic feature display, based on a given geographic feature;

Get, Getcenter () Gets the center of the map and returns the coordinates of a map center; Getresolution () Gets the resolution of the map, which is the scale bar, and returns a value representing the scale bar, getprojection () Gets the projection coordinate system used by the map, such as Epsg:4326;getrotation () gets the "rotation angle" of the map; Getzoom () Gets the zoom level of the map, returns a numeric value that represents the zoom level, and none of the above functions require any parameters;

Set, SetCenter (center), the parameter is ol. Coordinate type –[x, y], which acts as the central coordinate of the set map, setresolution (number) sets the resolution (scale bar) of the map, setrotation, the value of the angle corresponding to the rotation of the parameter, not the degree, such as Math.PI, not 180 degrees, the role is to rotate the map corresponding point angle, clockwise is positive; setzoom (number) sets the zoom level of the map.

In these methods, both the Fit class method and the Set class method can see the effect, and the other is to calculate or get the corresponding value that already exists. Let's take a look at the effects of these methods using examples. third, the view class application example

We add a button to the HTML page, then bind a click event and click on the trigger feature. First add a button to the last side of the HTML:

<input id= "Setviewtrigger" type= "button" value= "Trigger" ></input>

Then perform the function binding:

var trigger = document.getElementById ("Setviewtrigger");
Trigger.addeventlistener ("click", Function () {
     //Get the map's view
     var view = Map.getview ();
     Here write the action of the corresponding execution ...
},false);

Map of the initial situation as follows, each function call, only paste a effect picture, it is not affixed to the original image:

1, rotate (rotation, opt_anchor)

Rotate method The first parameter is the angle, which is the value, the unit is not the degree, 180 degrees corresponds to the value PI, that is 3.1415926, and the positive number means clockwise rotation, if you want to rotate 60 degrees clockwise, then incoming MATH.PI/3.

In the Click event, add the following call:

View.rotate (MATH.PI/3);

Effect graph after calling function:

2, Fitextent (extent, size)

As long as the coordinate operation is involved in the coordinate transformation, the map's default coordinate system is epsg:3857, if the use of epsg:4326 to pay attention to coordinate conversion, Coordinates are converted using Ol.proj.transformExtent (convert extent) and ol.proj.transform (conversion coordinates).

In the event function, add the following sentence:

where [76,18,140,56] is China's outsourcing rectangular coordinates, the results should be suitable for displaying the full map of China scale.

Effect graph after function call:

3, Fitgeometry (geometry, size, opt_options)

To zoom to the feature level, first get the corresponding feature, here I choose the map representing "Nepal", and then pass in the parameter, zoom. Add the following code to the event function:

    var feature = Vectorlayer.getsource (). Getfeatures () [+];
    var polygon = Feature.getgeometry ();
    

The effect should be to zoom "Nepal" to the most appropriate level of visibility. After the call effect as shown:

4. Get

None of the get functions require arguments, just get the view object of the map and call it on the View object. 4.1 getzoom ()

var zoom = View.getzoom ();
alert (zoom);

The scale value of the initial state:

The initial state has a scale value of 2, which is consistent with the initial setting:

We then zoomed the map two times and then checked the zoom value:

Visible zoom value becomes 4, visible zoom is the zoom level of the map. Baidu maps or Google Maps and other side of the sidebar shows the state, province, city level value is related to this. 4.2 getcenter ()

The result of the function execution is to return the center coordinate of the map, type OL. Coordinate. Add the following code:

var center = view.getcenter ();
alert (center);

Execution Result:

4.3 getprojection ()

The result of the function execution is to return a Ol.proj.Projection object that represents the projected coordinate system of the map, which has a method GetCode (), which returns the ESPG code of the projection. For example, add the following code:

var projection = View.getprojection (). GetCode ();
alert (projection);

The results of the operation are as follows:

4.4 getresolution ()

The function returns a numeric value that represents the current resolution (scale bar) of the map, for example, by adding the following code:

var resolution = View.getresolution ();
alert (resolution);

The results of the operation are as follows:

Zoom to the map of China and see if the value of its resolution changes:

4.5 getrotation ()

The function returns a numeric value that represents the angle of rotation. Under normal circumstances, it is 0. We try to rotate MATH.PI/3, which is 60 degrees, and then call the function fetch, the result is as follows:

The result is 1.0471975511965976, which is MATH.PI/3. 5. Set 5.1 setcenter (center)

Accept a parameter: the center coordinate, the type is ol. Coordinate, no return value. We take the central coordinates of Nepal: [82.66363, 29.64666], then set the incoming coordinates to the center of the map:

View.setcenter (Ol.proj.transform ([82.66363, 29.64666], ' epsg:4326 ', ' epsg:3857 '));

First we pan the map to the sea, then execute it, and the map will shift to Nepal. The function does not change the zoom level (zoom) and resolution (resolution) of the map, but sets the coordinates of the map to the center of the mapping.

After setting up the new center:

5.2 Setresolution (resolution)

Accept a parameter, a numeric value representing the resolution (scale bar), no return value, and the result of the operation is to set the map's resolution (scale bar) to the value passed in. Like SetCenter, this function is not responsible for other functions, it will only be in place, the map resolution is set to the corresponding value, the map center will not change.

View.setresolution (100);

The resolution (scale bar) represents the ratio of the actual figures to the size of the figures on the graph, so the larger the resolution value, the smaller the map will appear, the smaller the value, the larger the map, and the clearer it becomes.

With the default resolution of 39135.75848201024, we set the resolution to 100000, and the map should theoretically shrink. Call the function effect as shown below:

5.3 setzoom (zoom)

Accept a numeric parameter to set the zoom level of the map to the zoom level represented by the corresponding number, and the same map center will not be affected.

Zoom levels (zoom level) are divided into multilevel, the smaller the value, the smaller the map will show, the larger the value, the larger the map, the clearer the rule is the opposite of the value of the resolution.

The initial zoom level of the map is 2, and we set it to 10, with the following effect:

View.setzoom (10);

Execution Result:

Like Baidu Map, there is a scale bar on the left, divided into national, provincial, city, county and other zoom levels, but also the use of this feature. When a change in the value of the zoom level is detected, move the ruler's scale to the corresponding position.

5.4 setrotation (rotation)

Set the rotation angle of the map, accept the angle of rotation, and the result is to rotate the map around the current center of the map, rotating the corresponding angle. This function is very similar to the rotate (rotation, opt_anchor) method, and can be used to refer directly to the Rotate method.

View.setrotation (MATH.PI/2);

After calling the function, the map rotates 90 degrees clockwise:

Iv. Summary

OK, so far, all of the basic view features are covered. In summary, view controls the most basic interaction of the map with the user, and each map object must contain a View object, meaning that each map must support basic interactions such as zooming, panning, and so on.

In this way, the openlayers layer (Layers) of the previous article is explained in detail, and I will build three elements needed for a map: Layers, view, and Target, which are two of the most important, and one target, the ID value of the HTML element that holds the map. , without saying the necessary, it was skipped.