Openlayers 3 Add Map grid

Preface

render a layer similar on the map In the longitude grid layer, more conducive to accurate determination of the region, in the WGS84 coordinate system, in degrees, minutes, seconds as a unit, called "Jingwei Network", its grid is divided by longitude. " ol. Graticule ". In this article, I combined with examples, explaining "ol." Graticule "Use and concrete implementation.

Example

Initializes a grid layer and then sets its associated map object to map (pre-defined), and the grid layer renders on the associated map. Initialize the grid layer can be passed the parameters and methods are described below, the example is as follows (the complete example can be viewed on my GitHub):

        var graticulelayer = new ol. Graticule ({            //Map:map,            strokestyle:new ol.style.Stroke ({                color: ' Rgba (+, +, 0.8) ',                width:0.6< c10/>}),            targetsize:100        });        Graticulelayer.setmap (map);

Execution results such as:

Use
Parameters

Initialize "ol." Gracule "Adjustable parameters are four (Map,maxlines,strokestyle and Targetsize), as follows:

• The map parameter specifies the mapping object that the grid layer is associated with, or you can use its setmap () function without setting the parameter;
• The maxLines specifies the maximum number of left and right meridians and parallels in the center of the map, with the default value of 100, which indicates that 200 meridians and parallels will be drawn . It is important to note that the rendering speed will decrease as the maxlines becomes larger;
• Strokestyle The style of the specified line, the value is a " Ol.style.Stroke "Object, if the parameter is not specified, its default style is Rgba (0,0,0,0.2);
• TARGETSIZE Specifies the size of the area covered by each mesh, in pixels, by default, 100, which is 10 pixels x10 pixels.

API

"Ol. Gracule "Open API also has four, as follows:

• Getmap, obtains the map object associated with the grid;
• Setmap, sets the map object associated with the grid, which is rendered on top of the associated map;
• Getmeridians, gets an array of all meridians, each drawing of the warp is "ol.geom.LineString" object;
• Getparallels, the array of all parallels is obtained, and each drawn dimension is also an "ol.geom.LineString" Object .

Implement configurable parameters api Are relatively limited, can do things are relatively limited, next we look at its implementation principle, convenient for us to customize it to rewrite. in order to understand the concrete implementation of a class, we first analyze its structure, its public and private variables and member functions, sum up its internal call relations and clarify the context. "Ol. The context of Graticule "is as follows:

The class constructs in OL3 all use the constructor pattern and the prototype pattern, in the constructor, in addition to assigning some parameters, finally called "Setmap", Setmap the Map object "Postcompose" event binding "Handlepostcompose_" listener function, " Handlepostcompose_ "Did all the work of initializing and rendering the grid. Among them, "Creategraticule_" do rendering work, "Addmeridian" and "Addparallel" do the actual rendering of meridians and parallels work.

Setmap

Setmap is defined as follows:

<span style= "Font-family:times New Roman;" >/** * Set The map for this graticule.  The graticule is rendered on the * provided map. * @param {ol. Map} map map. * @api */ol. Graticule.prototype.setMap = function (map) {  if (THIS.MAP_) {    this.map_.un (Ol.render.EventType.POSTCOMPOSE,        This.handlepostcompose_, this);    This.map_.render ();  }  if (map) {    Map.on (Ol.render.EventType.POSTCOMPOSE,        this.handlepostcompose_, this);    Map.render ();  }  THIS.MAP_ = map;}; </span>

Setmapfirst, determine if the "MAP_" parameter is specified at initialization , and if specified, first unbind the listener function for the "Postcompose" event of the Map object " Handlepostcompose_ " , If you specify a new map object , the binding 'postcompose' Event listener function "Handlepostcompose_" , and call the Map object's Render method, and finally assign a value to "THIS.MAP_". From the above-mentioned schematic view, the "Handlepostcompose_" function is to initialize the mesh and render it on the map, and with the map zoom and other operations triggered by the "Postcompose" event, according to the actual situation to re-render.

Addmeridian_&addparallel_The actual rendering work is done by "Addmeridian_" and "Addparallel_", we choose one to explain, "Addmeridian_" will add the warp from "Getmeridian_" to " This.meridians_ "Array," Addmeridian_ "function will determine whether the meridians in the map viewport, if it is not added," Handlepostcompose_ "will" This.meridians_ " The Warp Objects (lineString) in the array are rendered above the map: vectorcontext.drawlinestring (line, null), "Getmeridian" is implemented as follows:

/** * @param {number} lon longitude. * @param {number} Minlat Minimal latitude. * @param {number} Maxlat maximal latitude. * @param {number} squaredtolerance squared tolerance. * @return {ol.geom.LineString} the meridian line string. * @param {Number} index index. * @private */ol. Graticule.prototype.getMeridian_ = function (lon, Minlat, Maxlat, Squaredtole  Rance, index) {goog.asserts.assert (Lon >= This.minlon_, ' Lon should is larger than or equal to This.minlon_ ');  Goog.asserts.assert (Lon <= This.maxlon_, ' Lon should is smaller than or equal to This.maxlon_ ');  var flatcoordinates = Ol.geom.flat.geodesic.meridian (Lon, Minlat, Maxlat, This.projection_, squaredtolerance);  Goog.asserts.assert (flatcoordinates.length > 0, ' flatcoordinates cannot be empty ');      var lineString = This.meridians_[index]!== undefined?  This.meridians_[index]: New ol.geom.LineString (NULL); Linestring.setflatcoordinates (Ol.geom.GeomEtrylayout.xy, flatcoordinates); return lineString;};

The Ol.geom.flatgeodesic.meridian method returns a collection of coordinates for the warp. The Linestring.setflatcoordinates method sets the lineString coordinates to Flatcoordinates, which completes the initialization of a warp.

Summary
This article summarizes the "ol. Graticule "The use and specific implementation of OPENLAYERS3 in the grid support is not very perfect, if you need more functions, to expand and implement themselves.
The examples in this article can be downloaded to my github,OK, just write here, what's the problem, you can leave a message under the article or send me an e-mail.

Openlayers 3 Add Map grid