Webmap DIY (custom network map, recommended by gmapimagecutter)

Source: Internet
Author: User

Since the last release of the Google Maps API offline Development Kit, someone asked me why the map cannot be displayed offline and whether my DIY map can be displayed. Strictly speaking, this is two problems. Why can't a map be displayed? Because Google's map image itself is not local, it cannot be displayed offline, however, it is not important to have map images under punctuation and other actions, but whether or not to display your own DIY map is actually carried by the Gmaps API itself, goverlay/gtilelayer and other functions are able to add their own images, but I don't like to add only one image to GMAP. I think it is of little significance, but I have not found a good tile cutting tool, so I have never tried this function. Today, I recommend gmapimagecutter, a tool that can cut images into tile and generate HTML files for you to browse.

In fact, this tool was first seen on it168, And I downloaded it, but it has never been installed in the Java environment, so it has never been used.ArticleI did not know much about it, but I have a general idea about what it is. I installed the Java environment today, so I can try it out. It feels very good to use it. So I packed it up and shared it with you. In addition to tools, I also brought my Google Maps API offline Development Kit and demo of two maps of Beijing Normal University and Beijing Zoo, these two demos can be deployed on IIS or Apache, even offline.

OK. Let's talk about the use of this tool. Gmapimagecutter. JarProgramBy using the command line: javaw-xms512m-xmx1024m-jar gmapimagecutter. jar. Of course, you only need to run gmapimagecutter. BAT (the first thing to ensure here is that you have a Java environment and install j2se ). After running, you can see the interface shown in (here I have opened the picture of Beijing Zoo ):

This tool automatically determines the image size and then selects a zoom level. Of course, you can also adjust the zoom level by yourself. However, if you increase the zoom level for the image, your image will be pulled up, this will blur the image. Depending on your needs, you can also make the image very large and then adjust the zoom level to very high. According to this theory, you can even generate all images of Google map and all images of 17 levels. Oh, of course, this is a joke. Although the tool can be adjusted to 17 levels, first, you can't make such a large image. Second, you don't know how long it will take, even if you make a cut. Third, the cut-out file will be very large, and storage is a problem. OK. That's more. Click the create button to start cutting. After the cut is completed, an HTML file and an image directory are generated under the same directory of the image, adjust the Google map key in HTML to your own key, and then you can release your own map. Simply put, a DIY webmap is born.

I just adjustedCodeSo that it runs on my offline development kit, and the results can be displayed without any problems, so that you can even leave the online Gmaps API, use my offline Development Kit to publish your own map on your own server. Everything is yours, and it is important that you can use the Gmaps API for development, for example, you can add a marker point to the BNE demo map, and you can do everything you want to do later, it is like a powerful WebGIS of its own (the powerful feature is to support Gmaps API development, haha ).

Description of files in the compressed package:
Gmapimagecutter1.4: gmapimagecutter Tool
Demopicture: Example image, Beijing Normal University plan and Beijing Zoo plan
GMAP: Google Maps API offline development kit, which contains the Beijing Normal University and Beijing Zoo map demo.

Preview effect:
Copy the GMAP directory to the main directory of IIS, and enter:
Http: // 127.0.0.1/GMAP/bnumap.html
Http: // 127.0.0.1/GMAP/beijingzoo.html
You can view the demo map of Beijing Normal University and Beijing Zoo.
Here, the demo map of Beijing Normal University was modified to cancel the adaptive length and width of the map, and a marker was added.
If you do not want to use the Google Maps API offline Development Kit, you only need to replace the maps_my.js called in the HTML file with the address of the Google Maps API you applied.

You can also use gmapimagecutter to cut two sample images and try the results.

Of course, this tool also has some drawbacks, or you need to consider improvements.

First, there is a level that refers to the original size of the image, while a level smaller than this level is a scale-down of the image. A level greater than this level is a scale-up of the image, in this case, apart from the original image size to ensure the best image quality, other layers may blur or even obscure the image. How can we ensure that the image is clear at each layer, this requires further consideration. We will not make images of different scales before cutting them. Maybe this is also a method.

Secondly, the images start at the minimum level of Google map. That is to say, the coordinates of the images are from the south pole to the North Pole in latitude, and the longitude is from the east longitude to the west longitude, if the image itself is a longitude and latitude range, for example, 30-31/120-121, if you map the image to the latitude and longitude range, this is the most perfect and most people need it. How to solve this problem may require further consideration.

In general, gmapimagecutter is indeed a very good tile generation tool.

: Http://files.cnblogs.com/Tangf/GMapImageCutter_WebMapDemo.rar (gmapimagecutter tool + sample image + demo map + Google Maps API offline Development Kit)

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.