思路解析

一、准备好webstorm，将以下内容复制进去

// An highlighted block
var Bagpipe = require('bagpipe')
var fs = require("fs");
var request = require("request");
var bou = [121.648978, 40.867574, 131.325647,46.311072];//下载范围

var Minlevel = 2;//最小层级
var Maxlevel = 14;//最大层级
var token = '901339dbb203e65286a9b9702278dbd8';//天地图key(如果失效去天地图官网申请)
var zpath = './text'; // 瓦片目录
var speed = 100;//并发数
var mapstyle = 'vec_w';//地图类型(img_w:影像底图 cia_w:影像标注 vec_w:街道底图 cva_w街道标注,备注，自己再api找相对于的)

var all = [];
var user_agent_list_2 = [
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36 OPR/26.0.1656.60",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0",
    "Mozilla/5.0 (X11; U; Linux x86_64; zh-CN; rv:1.9.2.10) Gecko/20100922 Ubuntu/10.10 (maverick) Firefox/3.6.10",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11",
    "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.133 Safari/534.16",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 TaoBrowser/2.0 Safari/536.11",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.71 Safari/537.1 LBBROWSER",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E; LBBROWSER)",
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; QQBrowser/7.0.3698.400)",
    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; QQDownload 732; .NET4.0C; .NET4.0E)",
    "Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.84 Safari/535.11 SE 2.X MetaSr 1.0",
    "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SV1; QQDownload 732; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/4.4.3.4000 Chrome/30.0.1599.101 Safari/537.36",
    "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 UBrowser/4.0.3214.0 Safari/537.36"
]


/**
 * 计算经纬度转换成瓦片坐标
 * @param {Number} lng 经度 
 * @param {Number} lat 纬度
 * @param {Number} level 层级 
 */
function calcXY(lng, lat, level) {
    let x = (lng + 180) / 360
    let title_X = Math.floor(x * Math.pow(2, level))
    let lat_rad = lat * Math.PI / 180
    let y = (1 - Math.log(Math.tan(lat_rad) + 1 / Math.cos(lat_rad)) / Math.PI) / 2
    let title_Y = Math.floor(y * Math.pow(2, level))
    return { title_X, title_Y }
}
/**
 * 计算每个层级的瓦片坐标
 * @param {Arr} bounding 范围
 * @param {Number} Minlevel 最小层级
 * @param {Number} Maxlevel 最大层级
 */
function mainnAllXY(bounding, Minlevel, Maxlevel) {
    for (i = Minlevel; i <= Maxlevel; i++) {
        alli = {}
        let p1 = calcXY(bounding[2], bounding[3], i);
        let p2 = calcXY(bounding[0], bounding[1], i);
        alli.t = i // 层级
        alli.x = [p2.title_X, p1.title_X] // 瓦片横坐标范围（左至右）
        alli.y = [p1.title_Y, p2.title_Y] // 瓦片纵坐标范围（下至上）
        all.push(alli)
    }

    createDir()
}
mainnAllXY(bou, Minlevel, Maxlevel)

function createDir() {
    fs.access(zpath, fs.constants.F_OK, err => {
        // 创建tiles文件夹
        if (err) fs.mkdir(zpath, err => { })
        for (let z = 0; z <= all.length - 1; z++) {
            fs.access(`${zpath}/${all[z].t}`, fs.constants.F_OK, err => {
                // 创建tiles/Z文件夹 ,Z是层级
                if (err) fs.mkdir(`${zpath}/${all[z].t}`, err => { })
                for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {
                    fs.access(`${zpath}/${all[z].t}/${x}`, fs.constants.F_OK, err => {
                        // 创建tiles/Z/X文件夹 ,X是瓦片横坐标
                        if (err) fs.mkdir(`${zpath}/${all[z].t}/${x}`, err => { })
                    })
                }
            })
        }
        // 文件夹可能较多，等待2s开始下载
        setTimeout(() => {
            task()
        }, 2000)
    })
}

/**
 * 创建下载队列
 */

var sum = 0;
var bag = new Bagpipe(speed, { timeout: 1000 })
function task() {
    for (let z = 0; z <= all.length - 1; z++) {
        for (let x = all[z].x[0]; x <= all[z].x[1]; x++) {
            for (let y = all[z].y[0]; y <= all[z].y[1]; y++) {
                // 将下载任务推入队列
                ++sum
                bag.push(download, x, y, all[z].t)
            }
        }
    }
}



/**
 * 下载图片方法
 * @param {Number} x 
 * @param {Number} y 
 * @param {Number} z 
 */
function download(x, y, z) {
    var ts = Math.floor(Math.random() * 8)//随机生成0-7台服务器
    let imgurl = `http://t${ts}.tianditu.gov.cn/DataServer?T=${mapstyle}&x=${x}&y=${y}&l=${z}&tk=${token}`;
    var ip = Math.floor(Math.random() * 256)//随机生成IP迷惑服务器
        + "." + Math.floor(Math.random() * 256)
        + "." + Math.floor(Math.random() * 256)
        + "." + Math.floor(Math.random() * 256)
    var v = Math.floor(Math.random() * 9)
    var options = {
        method: 'GET',
        url: imgurl,
        headers: {
            'User-Agent': user_agent_list_2[v],
            'X-Forwarded-For': ip,
            "Connection": 'keep-alive'
        },
        timeout: 5000,
        forever: true
    };

    request(options, (err, res, body) => {
        if (err) {
            bag.push(download, x, y, z)
            console.log("request错误", err)
        }
    }).pipe(fs.createWriteStream(`${zpath}/${z}/${x}/${y}.png`).on('finish', () => {
        console.log(`图片下载成功,第${z}层`)
        console.log(--sum)
    }).on('error', (err) => {
        console.log('发生异常:', err);
    }));
}

配置package.json直接复制即可

// An highlighted block
{
  "name": "mapdownload",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "bagpipe": "^0.3.5",
    "request": "^2.88.0",
    "tile-lnglat-transform": "^1.3.2"
  },
  "scripts": {
    "start": "node ./src/index"
  }
}

强调文本 强调文本

安装依赖后运行

openleary中加载

 let vm = this;
                vm.tianditulayer = new TileLayer({ //天地图线画图
                    // source: new XYZ({
                    //     url:
                    //         "http://t0.tianditu.gov.cn/vec_c/wmts?tk=901339dbb203e65286a9b9702278dbd8" + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
                    //     projection: 'EPSG:4326',
                    // })
                    source: new XYZ({
                        tileUrlFunction: function (coordinate) {
                            console.log(coordinate[0], coordinate[1], coordinate[2]);
                            var z = coordinate[0];
                            var x = coordinate[1];
                            var y = Math.pow(2, z - 1) + coordinate[2];
                            return "http://www.localhost/MapDownload-master/text/" + z + "/" + x + "/" + y + ".png";
                        },
                        // url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=901339dbb203e65286a9b9702278dbd8" + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
                        projection: 'EPSG:4326',
                    })
                });
                vm.tianditulabel = new TileLayer({ //天地图注记图
                    source: new XYZ({
                        tileUrlFunction: function (coordinate) {
                            console.log(coordinate[0], coordinate[1], coordinate[2]);
                            var z = coordinate[0];
                            var x = coordinate[1];
                            var y = Math.pow(2, z - 1) + coordinate[2];
                            return "http://www.localhost/MapDownload-master/tiles/" + z + "/" + x + "/" + y + ".png";
                        },
                        // url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=bb3927811976d4d451ed2159271b76ba" + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
                        projection: 'EPSG:4326'
                    })
                    // source: new XYZ({
                    //     url:
                    //         "http://t0.tianditu.gov.cn/cva_c/wmts?tk=bb3927811976d4d451ed2159271b76ba" + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
                    //     projection: 'EPSG:4326'
                    // })
                });

注意：有些不识别本地盘符地址，请用本地电脑发布服务，或者用服务器发布

最近准备使用Cesium+WPF来进行项目开发，学习了一下Cesium,由于项目需要离线所以先研究一下如何离线使用吧。

首先展示一下效果图：

离线高德影像瓦片地图的加载方法：

1.我使用的是太乐地图下载器，下载高德的卫星图或者天地图的卫星图都行，导出为“瓦片：谷歌”，jpeg格式。下载好的内容如下图。全球我下到了5级，中国区域6-8级，北京市9-14级。这样地图数据比较小。

2.Cesium加载瓦片图的方式，下面只是一种方式：

var viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
      url:'gaoDeMap/{z}/{x}/{y}.jpg',
      fileExtension:"jpg"
    }),
    baseLayerPicker:false,
	geocoder: false,
  });

离线DEM高程图的加载

1.DEM高程图的下载，我是在地理空间数据云 (gscloud.cn)这个地方下载的，是免费的，可以下载30M和90M的高程数据。具体方式是进入“高级检索”，选择图源类型，需要下载的区域名称等，最后点击“检索”即可出现图源列表供我们下载。

不过下载的文件是.tif格式，无法直接给cesium使用，我们需要转换为.terrian格式，转换我使用的是cesiumlab2，这个软件是免费的，使用方法是登录后，点击“数据处理”->"地形切片"->"添加"->选择你下载的tif文件->选择“散列文件”->选择“输出文件”路径->“确认”。

2.Cesium加载高程图的方式，如下图所示，其中url:'aASTGTM'，是指放高程图的路径。

var terrain = new Cesium.CesiumTerrainProvider({
    url: 'aASTGTM',
});
viewer.terrainProvider=terrain;

运行方法

在项目的根目录开启一个http静态文件服务，然后就可以使用浏览器进行浏览了。我使用的是python3自带的httpServer，方法是在项目根目录下运行python -m http.server，然后在浏览器输入地址http://localhost:8000/index.html即可。

这里离线地图的开发不再赘述，有需要的小伙伴可以参考我另一篇博客：离线地图教程

一、为什么要将瓦片地图放进nginx

图片太大，放在本地运行太慢，甚至直接挂了

二、瓦片做nginx代理

1、如果你已经有一个nginx代理，那么先到conf文件夹查看nginx.conf配置，根目录在什么地方，如下示例根目录在nginx下www文件夹中；
如果还没有用过nginx代理，先下载nginx，在conf文件夹同级新建www文件夹，进入conf文件夹，将nginx.conf配置修改如下：

location / {
    root   www;
}

2、把地图文件夹tiles放进www中

3、如果是参照我上一篇离线地图的博客，接下来在map_load.js中修改瓦片地图路径tiles_dir如下：

var bmapcfg={
    'imgext':'.png',//瓦片图的后缀  根据需要修改  一般.jpg  .png
    'tiles_dir':'/tiles',//普通瓦片图的地址，为空默认在tiles/目录
};

4、启动nginx，启动vue项目，即可看到地图。
打印区也可以看到地图路径，如下：

注意：如果你足够熟悉nginx和打包机制，你会发现项目中public下所有文件都是被直接放进dist里的，不会进行编译压缩，因此，你完全可以在nginx下你的根目录中建static文件夹（我这里示例是，在www下建static文件夹，）把tiles放进去就可以，不需要进行任何多余配置操作。

如果你想按照自己的其他路径进行配置，这里提示map_load.js中tiles_dir进入到了www文件夹下，接下来路径根据你tiles文件夹的所在位置进行配置即可。