Mobile H5 Map vector shp GRID-splitting package scheme

Article copyright by the author Xiaohui Li is and the blog park, if reproduced please clearly indicate the source: http://www.cnblogs.com/naaoveGIS/

1. Background

As with the offline tiling scheme, it is also designed to address mobile speed and traffic issues, but not just this. The traditional presentation of vector data is generally divided into two scenarios:

• Dynamically capture vector data images from the WMS (vector data is returned from background processing as a picture), overlaid on the front end.
  Advantages-rendering pressure at the back end, no pressure on the front. The background makes it easier to cache the picture (the front-end divides the map into grids, and the WMS requests a mock WMTS request).
  Cons-When the current side needs to interact, you must dynamically query the geographic server (I query) based on the coordinates. The response is slightly slower and the pressure on the back end is high.
• The WFS service gets the vector data text (Geojson, PBF, etc.) in the range, and the front-end parsing returns the dynamic rendering of the data.
  Advantages-because it is a front-end rendering display, easy to interact with, and can only control the style in the previous paragraph.
  Disadvantage-the backend and front end have pressure on the data and presentation data, and when the amount of data is particularly large, front-end rendering consumes performance easily.

In this scheme, when we put shp vector data into a text file with certain algorithm, we can avoid the pressure of dynamically acquiring data on the service side, and also have the advantages of style making and interactive convenience when rendering data in real-time in front of the WFS scheme.
The overall benefits of the program are summarized as:

• Avoid the problem of mobile phone speed
• Avoid mobile phone traffic problems
• Reduced service-side pressure
• Front-end feature presentation styles can be customized
• Quick response to feature interactions

2. Two off-line algorithms, two kinds of offline vector data processing scheme comparison 2.1 scheme one (hierarchical vector slicing scheme) scenario description

The vector tiling scheme is described in my previous article: Project perspective on the application of vector slicing and geoserver processing of custom specification vector slicing scheme and the preliminary study of Vector transduction in Webgis. The brief description is:

• The vector data as a tile processing, according to the transduction origin, tile size, the level of resolution, first at different levels of SHP simplification, and then the level of SHP cut into corresponding vector data block, and then processed into text format.
• Upload vector tiles to the mobile side, H5 map request to get local vector tiles, parse rendering.

Scenario Analysis

• Advantages: All levels of data thinning slices, so that all levels of data load can be controlled, the front-end rendering number is also in a controllable state.
• Disadvantage: Vector slicing is time-consuming and has a large amount of graph data because it is needed to cut data at different levels. Not conducive to rapid implementation.

2.2 Scenario two (fixed grid slicing scheme) scenario description

• The SHP data slices are processed into text in a fixed geometry-sized grid.
• The front-end real-time according to the visual range at this time, based on the pre-fabricated grid tile size, the corresponding slices in this range, request loading, parsing rendering.

Scenario Analysis

• Advantage: Only one cut of vector data is generated according to the prefabricated grid size, and the efficiency is higher.
• Disadvantage: When the map level is very small, the number of tiles loaded causes the front-end rendering pressure to be very high when the full image is displayed.

2.3 Scheme Selection

• Scenario two is better than the solution one of the biggest place lies in the implementation faster.
• The biggest disadvantage of scenario two is that the data overload problem is displayed at low map level, which can be circumvented by two means.
  Control the display hierarchy-that is, the vector data is loaded only when the map is scaled to a certain level.
  Control the number of displays-the grid data is further packaged in a responsible grid, and the fixed person only shows the data within the fixed-responsibility grid range.

3. Vector Data Grid segmentation packaging tool Implementation 3.1SHP data grid Segmentation detailed description

• Gets the geometry range of the layer, based on the transduction origin, grid size, calculates the number of meshes (Colnums, rownums) for that layer, and the row and column numbers (Startcolnum, startrownum) for the starting slice of the grid.
• Use Colnums and rownums as two loops to traverse the end point, and then slice the features in the layer into a text file.
  Code Description:

//计算格网行列号int colNums = 0, rowNums = 0;colNums = Convert.ToInt32(Math.Ceiling((_maxX - _minX) / inputGridSize));rowNums = Convert.ToInt32(Math.Ceiling((_maxY - _minY) / inputGridSize));

3.2 Description of the existing slice packaging based on the cell grid

Select the cell grid layer for packaging, the main reason is that the cell grid is the smallest partition grid, the change is relatively small, reduce the number of implementation. With the grid, the existing slices are then packaged together to further control the number of vector data at the front-end display.

• Iterate to get the grid features in the grid layer and get the geometric extent of each feature.
• The number of tiles included in the range is calculated based on the geometry range, grid size, and transduction origin.
• Copy these tiles to a folder named (Feature encoding \ part type number).
• After all copies of the data have been processed, the overall file compression is done.

Attention:
The packaging path specification for tiles is:

The tool interface is:

4.H5 Map Front End Display Implementation 4.1 detailed description

The algorithm used for front-end presentation is the same as the algorithm used to package the mesh. JS's method of acquiring local data is the same as the way I read local tiles on the mobile side of the H5 map offline tiling scheme. Do not make a statement, the core code is as follows:

var originx=Parsefloat (gridclipparams[0]);var originy=Parsefloat (gridclipparams[1]);var size=Parsefloat (gridclipparams[2]);var Vectorsource =New Vectorsource ({format:format,url:functionExtent) {var temurl=geosservice.querycontent (url,servicelayerid,where,extent);if (Usemobilecache) {var col=Math.floor (Math.Abs ((extent[0]-originx))/size);var row=Math.floor (Math.Abs ((extent[1]-originy))/size);Local Test URLTemurl= "http://192.168.32.135:8080/gis/tilemap/11010100100907/" +subtypeid+ "/" +row+ "/" +col+ ". JSON"; Temurl = self.offlineurl+encodeURIComponent (Temurl) +"&row=" +row+"&col=" + col+"&layername=" +subtypeid;}Return Temurl;},strategy:functionExtent,resolution) {var minx=extent[0]-size;var miny=extent[1]-size;var maxx=extent[2]+size;var maxy=extent[3]+size;var m=Math.ceil ((Maxx-minx)/size);var n=Math.ceil ((maxy-miny)/size);  var extentarr=new Array ();  for (var i=0;i<m;i++) {for(var j=0;j<n;j++) {var temextent=[];  var temminx=minx+i*size; var temminy=miny+j*size; var temmaxx=minx+ (i+1) *size;  var temmaxy=miny+ (j+1) *size;temextent=[temminx,temminy,temmaxx,temmaxy];extentarr.push (temextent);}} return Extentarr;}});                 

4.2 Results show

Since parts are packaged in a 1000-metre grid and then packaged, some parts that are not in the cell grid zoning are also shown on the map. So the size of the mesh slice is a parameter that must be adjusted according to the item.

5. Mobile Packaging Upload Detailed description

I'll describe the package upload separately because this piece of consolidation requires extra attention to how files are merged.

• The mobile server gets the correspondence between the responsible grid and the cell grid.
• Merges the files under the grid of all the cells that correspond to the responsibility grid. The consolidation rule is the method of capping. The merged folder name is named for the responsible grid.

Responsibility Grid Packaging Folder path Description: \ Responsibility grid code \ Part Small class \ line number \ column number. JSON

-----Welcome reprint, but retain the copyright, please indicate the source in obvious place: http://www.cnblogs.com/naaoveGIS/

If you feel that this article does help you, you can sweep, for a small reward and encouragement, thank you ^_^

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Mobile H5 Map vector shp GRID-splitting package scheme