A scheme for local annotation of custom Internet map in Webgis

1. Preface

In actual projects we often encounter a scenario in which the map basemap may be an Internet map (Baidu, Gold, heaven and earth) and so on, and we have a separate set of POI data for a particular area, we need to mask the original POI data in this area of the Internet map and display only our own POI data.

The first thing we think about is whether we can use only basemap tiles that don't include annotation, and then overlay our POI data. In fact, there is a point in the actual need to consider that we have only part of the POI data, but no other area of POI data.

So the real core of this requirement is that, in addition to the designated area of the irregular polygon, the map is an internet map plus an internet annotation, and the core area needs to be an Internet map with its own annotation.

2. Program Ideas

A. The Internet Basemap and Internet annotation charts are still superimposed as basemaps throughout the map area.

B. Overlay the Internet basemap on the area again, which you can view as a mask to mask the annotation layers in that range.

C. Overlay the custom POI layer cut-off image as the topmost layer in the map.

The map layer order is as follows:

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175227561-198181457. PNG "style=" margin:0px;padding:0px;border:0px; "/>

3. Difficulties to be solved

A. Tile splicing technology: You need to attach the downloaded tiles of the specified area to a whole, then the area PS out.

B. Image segmentation Technique: The area map after PS is segmented according to tile size.

C. Tile renaming: The split tiles need to be re-assigned to the corresponding column number.

4. Implement

The specific code implementation process by my good friend Tu tu tu not bitter realization, thanks, continue to work hard.

4.1 Tile Download

Using the self-developed tile download tool to download the Internet Basemap for the specified area, it is possible to refer to my previous blog: The online map (http://www.cnblogs.com/naaoveGIS/p/3905523.html) that uses the Webgis to convert the URLs of various tiles.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175249514-1276447226. PNG "width=" 635 "height=" 275 "style=" margin:0px;padding:0px;border:0px; "/>

4.2 Tile splicing and PS4.2.1 splicing principle

The tiles on the same level are stitched together into an entire graph according to the row number.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175316920-184088322. PNG "style=" margin:0px;padding:0px;border:0px; "/>

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175326279-148209404. PNG "style=" margin:0px;padding:0px;border:0px; "/>

4.2.2 using PS to pull together a good whole image for keying

It is important to note that each level of the graph needs to be stitched together into a corresponding level of the whole picture, PS also need to be keyed for each level of the entire graph.

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175346795-2112050300. PNG "style=" margin:0px;padding:0px;border:0px; "/>

4.3 Picture split and assign a row number

A. Read the original tiled tile folder and get the name of the row number of the original tile.

B. Divide the entire drawing after the cutout according to the size of the tile.

C. Assign the split graph to the name of the original tile row number.

5. Effect display

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/656746/201703/656746-20170310175405592-525399575. PNG "style=" margin:0px;padding:0px;border:0px; "/>

A scheme for local annotation of custom Internet map in Webgis