在工作项目中如果遇到需要实现离线地图的需求，其中百度离线离图的实现是非常简单容易的。

1. 可以实现基于图片瓦片的离线地图

2. 可以实现基于矢量瓦片的3D WebGL离线地图

3. 还可以通过编辑stylejson自定义离线地图。

详细的实现步骤请参相关的文章：http://www.wmksj.com/   在其离线地图版块有对于每种实现的详细介绍



 

此demo为前端页面离线地图，不连外网，不用与后端交互，瓦片下载的全就显示的全；

代码示例下载： 

    链接：https://pan.baidu.com/s/1We86NFDNBCoD9JPz3z_iyw 提取码：lhrn   里面有使用讲解视频

    或者

    https://download.csdn.net/download/bird73/10323603

 

demo中请点击indexGaoDeMy.html 启动离线地图

    --  地图的瓦盘请使用java代码自动下载，下载需要分层级，每个层级有自己的坐标

    --  下载后的瓦片放入examples/img中

    --  地图显示使用leaflet框架显示 https://leafletjs.com/ ， 我只是下载了瓦片，同时将地图路径改为本地的瓦片位置



 

 

x-y-z三个概念



 

 

------------------------------------------------------

工具代码： 

HttpURLConnectionUtil.java 用于链接某网址，下载地图瓦片


package com.dragon.java.downloadpic;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class HttpURLConnectionUtil {
        // 通过get请求得到读取器响应数据的数据流
    public static InputStream getInputStreamByGet(String url) {
        try {
            HttpURLConnection conn = (HttpURLConnection) new URL(url)
                    .openConnection();
            conn.setReadTimeout(5000);
            conn.setConnectTimeout(5000);
            conn.setRequestMethod("GET");

            if (conn.getResponseCode() == HttpURLConnection.HTTP_OK) {
                InputStream inputStream = conn.getInputStream();
                return inputStream;
            }

        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

        // 将服务器响应的数据流存到本地文件
    public static void saveData(InputStream is, File file) {
        try (BufferedInputStream bis = new BufferedInputStream(is);
                BufferedOutputStream bos = new BufferedOutputStream(
                        new FileOutputStream(file));) {
            byte[] buffer = new byte[1024];
            int len = -1;
            while ((len = bis.read(buffer)) != -1) {
                bos.write(buffer, 0, len);
                bos.flush();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

 

Test4.java   此类用于下载x-y-x 三个轴中的所有图片

      main方法中用于拼接路径，区间范围通过zz-xx-yy这三个数组控制， 而这里面的值是打开地图网页，通过F12查询出来的坐标；

      这里就是为了拼接一个路径，并且图片存储的名称也要符合leaflet识别的规则

      拼接路径如：http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=406&y=197&z=9 

 

package com.dragon.java.downloadpic;

import java.io.File;
import java.io.InputStream;

/*
 * 1. 从下面的地址下载图片，并保存在文件中。
 *要求：封装相应的工具类*
 */
public class Test4 {

	static final String bast_path = "D:/url_img_gaode_yewan/";

	public static void main(String[] args) {

		int[] zz = { 4, 4 };
		int[] xx = { 0, 15 };
		int[] yy = { 0, 9 };

		Integer width = 256;
		Integer height = 256;

		for (int z = zz[0]; z <= zz[1]; z++) {// 层
			for (int x = xx[0]; x <= xx[1]; x++) {// 经度
				for (int y = yy[0]; y <= yy[1]; y++) { // 纬度上下
					createImg(z, x, y, width, height);
				}
			}
		}

		// createImg(5, 21, 11, width, height);

	}// http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=406&y=197&z=9

	public static void createImg(Integer z, Integer x, Integer y, Integer width, Integer height) {
		// String img_url =
		// "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
		String img_url = "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1scale=1&style=8&x={x}&y={y}&z={z}";
		// String img_url =
		// "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&amp;size=1&amp;scale=1&amp;style=8&amp;x={x}&amp;y={y}&amp;z={z}";

		File dir = new File(bast_path + z + File.separator + x + File.separator);
		if (!dir.exists()) {
			dir.mkdirs();
		}

		File file = new File(bast_path + z + File.separator + x + File.separator + y + ".png");

		String myurl = img_url.replaceAll("\\{x\\}", String.valueOf(x)).replaceAll("\\{y\\}", String.valueOf(y))
				.replaceAll("\\{z\\}", String.valueOf(z));

		System.out.println(myurl);
		InputStream inputStream = HttpURLConnectionUtil.getInputStreamByGet(myurl);
		HttpURLConnectionUtil.saveData(inputStream, file);

	}
}

 

 

 

 

百度谷歌离线地图解决方案（离线地图下载）
参考文章：
 
（1）百度谷歌离线地图解决方案（离线地图下载）
 
（2）https://www.cnblogs.com/luxiaoxun/p/4454880.html
 
备忘一下。