-
2019-12-04 22:55:34
https://www.cnblogs.com/mazhenyu/p/8494094.html
更多相关内容 -
openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)
2018-09-15 17:35:57利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可 -
百度地图3.0离线js api模板(demo)+ 地图瓦片下载器
2019-07-17 13:38:29百度地图3.0离线js api模板(demo)+ 地图瓦片下载器; 解压后使用 demo.html 来查看demo ; 地图资源文件存存放位置为 tiles 文件夹; 使用压缩包里面的 【全能电子地图下载器】 进行地图瓦片下载,下载完之后放到 ... -
记录天地图使用vue+node实现离线瓦片下载
2020-11-26 15:33:59记录天地图使用vue+node实现离线瓦片下载思路解析配置package.json直接复制即可openleary中加载 思路解析 一、准备好webstorm,将以下内容复制进去 // An highlighted block var Bagpipe = require('bagpipe') var ...记录天地图使用vue+node实现离线瓦片下载
思路解析
一、准备好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离线加载瓦片影像图和DEM高程图
2021-05-27 08:52:03离线高德影像瓦片地图的加载方法: 1.我使用的是太乐地图下载器,下载高德的卫星图或者天地图的卫星图都行,导出为“瓦片:谷歌”,jpeg格式。下载好的内容如下图。全球我下到了5级,中国区域6-8级,北京市9-14级。...最近准备使用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即可。
-
vue使用百度离线地图时解决瓦片过大放入nginx的问题
2021-09-27 18:31:08这里离线地图的开发不再赘述,有需要的小伙伴可以参考我另一篇博客:离线地图教程 一、为什么要将瓦片地图放进nginx 图片太大,放在本地运行太慢,甚至直接挂了 二、瓦片做nginx代理 1、先下载nginx,进入conf文件夹...这里离线地图的开发不再赘述,有需要的小伙伴可以参考我另一篇博客:离线地图教程
一、为什么要将瓦片地图放进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文件夹的所在位置进行配置即可。 -
leaflet讲解:vue中使用leaflet加载wmts瓦片地图(1)
2020-07-07 10:04:07前几天做了一个基于leaflet加载wmts瓦片离线地图的项目。发现由于VUE最近的兴起leafle并没有根据vue中如何使用它的教程。这对于我们这些小白很不友好所以我准备在这里分几个步骤为大家讲解。 今天我们就来先尝试... -
天地图使用vue+node实现离线瓦片下载
2021-07-09 11:44:23记录天地图使用vue+node实现离线瓦片下载 思路解析 配置package.json直接复制即可 openleary中加载 思路解析 一、准备好webstorm,将以下内容复制进去 // An highlighted block var Bagpipe = require('bagpipe') ... -
vue/cli3整合Cesium,加载离线arcgis 切片
2019-12-18 20:43:20最開始使用webpack進行cesium ...首选创建一个测试项目 vue create test-cli3-cesium 然后直接cd 到项目目录 ,使用npm 直接拉取cesium $ npm install cesium --save 安装成功后会在 node_modules 下 看见一个... -
使用openlayers加载本地离线地图瓦片的一个最简单地例子
2020-03-30 22:54:12上一篇文章写了 leaflet,本篇说一下openlayers。 第一步,下载: ... 解压后,我们只需要其中两个文件ol.css,ol.js 第二步,下载瓦片,参考上篇文章,https://blog.csdn.net/netying... -
学习 Cesium (五):加载离线高程数据
2021-03-19 21:51:11目录学习 Cesium (五):加载离线高程数据前言获取高程数据高程数据处理安装 Python 2.7注册 Python 2.7安装 PIL安装 GDAL安装 numpy安装 GDAL py2.7版生成 .terrain 数据集成到Cesium 学习 Cesium (五):加载离线... -
openlayer4 加载arcgis rest 服务(遥感影像)
2020-11-18 15:19:33openlayer4 加载arcgis rest 服务(遥感影像)。本文件适用于离线环境和有网络的在线环境。包括离线open layer,ol.css和ol.js文件和代码。代码很简单,老铁替换服务地址就可以使用代码。关键是质量保证,项目验证。... -
最新openlayers6加载百度影像图及解决空白瓦片办法
2021-11-16 15:57:40首先是百度的影像图直接加载可能会存在很大偏移,按照如下方法可以做到基本贴合。 然后是部分贴图在请求时可能会存在失败,失败后导致瓦片图可能会有部分空白,使用了onloaderror解决了这一问题。 调试了挺久才... -
leaflet 加载天地图瓦片,经纬度偏移问题
2021-06-08 16:20:55<p style="text-align:center">...用leaflet加载在线天地图瓦片,然后就出现了如图这种神奇的问题,有多个中国,而且同一个地方的坐标值,完全不一样。 问这个怎么解决? </p> -
Cesium离线地图极简教程
2021-03-14 08:26:33发现cesium挺好玩的,不过地图就是要在线加载,想要整一个离线部署的。上网找了好多资料,都对于非GIS开发出身的小朋友(比如我)很不友好,一开始,不知道怎么整离线地图,傻fufu的整了个geoserver,通过geoserver... -
cesium加载arcgis切片
2021-05-13 17:28:58cesium 加载arcmap切片 jpg // z 是缩放级别 x是从左到右 y是从上到下 ...//影像数据 var viewer = new Cesium.Viewer("cesiumContainer", { imageryProvider:new Cesium.WebMapServiceImageryProvider({ url: ima -
Openlayers + Vue实现GIS地图的一些常见问题(整理)
2021-12-13 16:22:29本文是博主在开发过程中遇到的一些问题的整理。 学习教程为:《WebGIS之Openlayers全面解析(第二版)》一书。 Openlayers实现离线地图的实现方案 前端: Openlayers 后端: GeoServer -
Cesium地图不加载或者加载有问题怎么办
2021-02-26 16:41:15地球影像图层出错了是必然了,我们人眼都可以看出来。解决办法去创建一个属于自己的token,放到项目里面去 影像图层错了,cesium ion token过期啦 注册秘钥https://cesium.com/ion/signin 点击箭头所指方向进行... -
cesium加载arcgis server地图服务
2021-04-05 09:46:191、制作arcgis server服务 从bigmap中下载了全球1-8级 arcgis 瓦片,配置arcgis地图服务,并发布服务 http://www.bigemap.com/helps/doc2018011781.html cesium中调用arcgis 地图服务 ... 2、cesium加载失败 ... -
Cesium加载天地图在线卫星切片,中文标注,防止视角钻入底下,加载超图在线地形服务
2018-11-16 16:13:12本代码展示加载天地图服务卫星和中文标志 加载超图地形服务 解决视角钻入底下的问题 代码如下 <!DOCTYPE html> ...超图加载在线地形数据stk</title> <link rel="styl -
cesium 页面多 viewer 地图加载过缓解决方案
2020-12-28 17:43:04cesium 页面多 viewer 地图加载过缓问题解决方案 小小吐槽一下 自从开始搞 cesium 相关的东西,各种疑难杂症就开始接踵而至,层出不穷。 更让人“气愤”的是,有些问题,就连 StackOverflow、Google 这种传统的解决... -
让GIS三维可视化变得简单-Cesium地球初始化
2020-09-02 16:07:01前言开发中我们通常会需要一个干净的三维地球实例,本文将介绍 Cesium 如何初始化一个地球,包括地图控件的显示隐藏以及一些常用影像和标注的加载预览Demo[1]Cesium 是一款面向... -
Cesium|xt3d 兼容西部世界模型压平效果
2021-10-10 21:51:35// 1.1.2 场景配置 earth.sceneTree.root = { "children": [{ "czmObject": { "name": "默认离线影像", "xbsjType": "Imagery", "xbsjImageryProvider": { "createTileMapServiceImageryProvider": { "url": '... -
go技术文章梳理(2018)
2021-03-02 09:00:14https://github.com/bytewatch/dolphinbeat 5. Go实现的数据压缩 https://github.com/flanglet/kanzi-go gocn_news_2018-12-26 1. go-runtime/debug分析 https://www.jianshu.com/p/0b3d11f7af57 2. 一次读锁重入... -
openlayers基础用例
2019-05-23 19:11:00http://weilin.me/ol3-primer/ch03/03-01.html#http://weilin.me/ol3-primer/ //地址...vue安装自定义坐标系npm install proj4 import * as proj4 from "proj4"; or// import proj4 f... -
2021-06-25leaflet地图加载arcgis服务(ESRI-LEAFLET,PROJ4插件)
2021-06-25 11:27:34 -
3.(leaflet篇)leaflet加载接入高德、openstreetmap、google地图
2022-04-11 08:56:01地图之家总目录(订阅之前请先查看该博客) 地图之家:cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: 下面献上...