A scheme for local annotation of custom Internet map in Webgis

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.