alimu
/
formaptile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 'viewport.js'

Browse Source 
修复下载中断机制，以获取慢网速下的更优秀的加载效果
main
alimu 2 years ago
parent 7e6ff9f752
commit cc4bb60a02
1 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File

122
viewport.js
Unescape Escape View File

@ -1,15 +1,16 @@
//help array;
let Caches = new Array(); //cache
let downloadRecord = new Array();
let dm = new Array();//尝试增加下载管理 downloadmanager
//let downloadRecord = new Array();
let dm = new Array(); //尝试增加下载管理 downloadmanager
let alltilecount = 0;
let downtilecount = 0;
function ViewPort(canvasId, options) {
// allow without 'new'
if (!(this instanceof ViewPort)) return new ViewPort(canvasId, options);
this.TILESIZE = 256;//实际的底图大小
this.TILESIZE = 256; //实际的底图大小
//init
this.canvas = document.getElementById(canvasId);
this.canvas.width = this.canvas.clientWidth;
@ -18,12 +19,12 @@ function ViewPort(canvasId, options) {
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.clientWidth;
this.height = this.canvas.clientHeight;
if (!options) options = {};//options could be null or undefine
if (!options) options = {}; //options could be null or undefine
this.minZoomLevel = options.minZoomLevel ?? 0;
this.maxZoomLevel = options.maxZoomLevel ?? 21;
this.zoomLevel = options.zoomLevel ?? 0;
this.dzl = options.dzl ?? 0.25; // zoomlevel offset value
this.rtSize = calTileSize(this.TILESIZE, this.zoomLevel);//named rtSize because real time tile size
this.rtSize = calTileSize(this.TILESIZE, this.zoomLevel); //named rtSize because real time tile size
const defaultCenterX = Math.pow(2, this.zoomLevel) * this.TILESIZE / 2;
const defaultCenterY = Math.pow(2, this.zoomLevel) * this.TILESIZE / 2;
@ -32,8 +33,8 @@ function ViewPort(canvasId, options) {
//如果在options中有指定地图中心点
//options.centerLng && options.centerLat
if (options.centerLat != null && options.centerLng != null
&& !isNaN(options.centerLat) && !isNaN(options.centerLng)) {
if (options.centerLat != null && options.centerLng != null &&
!isNaN(options.centerLat) && !isNaN(options.centerLng)) {
console.log('指定中心点');
try {
({ lat: lat, lng: lng } = this.latlngPreCheck(options.centerLat, options.centerLng));
@ -47,7 +48,7 @@ function ViewPort(canvasId, options) {
}
}
this.needtiles = new Array();//需要加载的底图 实时变化
this.needtiles = new Array(); //需要加载的底图 实时变化
//move
let moveflag = false;
@ -64,7 +65,7 @@ function ViewPort(canvasId, options) {
moveflag = false;
}
this.canvas.onmouseout = () => {
moveflag = false;//从元素范围外移动回来时不会继续移动，必须松开左键，按下左键后再进行移动
moveflag = false; //从元素范围外移动回来时不会继续移动，必须松开左键，按下左键后再进行移动
}
this.canvas.onmousemove = (e) => {
if (moveflag) {
@ -120,7 +121,7 @@ ViewPort.prototype = {
latlngPreCheck(lat, lng) {
//数据超界处理 经度 -180 180
//纬度 < 85.0511287798066 (2*Math.atan(Math.pow(Math.E,Math.PI))-Math.PI/2)/Math.PI*180
const latlimit = 85.0511287798066;//取近似值
const latlimit = 85.0511287798066; //取近似值
const lngp = lng - Math.floor((lng + 180) / 360) * 360;
if (lat < (0 - latlimit) || lat > latlimit) {
throw "OutMapRange";
@ -163,7 +164,7 @@ ViewPort.prototype = {
return { lat: lat, lng: lng }
},
latlng2Viewport(lat, lng) {
({ lat: lat, lng: lng } = this.latlngPreCheck(lat, lng));//尝试使用解构赋值
({ lat: lat, lng: lng } = this.latlngPreCheck(lat, lng)); //尝试使用解构赋值
const my = lat2y(lat, this.zoomLevel) * this.TILESIZE;
const mx = lon2x(lng, this.zoomLevel) * this.TILESIZE;
const vp = this.mplat2Viewport(mx, my);
@ -232,17 +233,32 @@ ViewPort.prototype = {
tails.push({ x: x, y: y });
}
}
this.needtiles = this.tilesFilter(tails);//获取当前视口要渲染的底图
alltilecount += this.needtiles.length;//for debug
this.needtiles = this.tilesFilter(tails); //获取当前视口要渲染的底图
let z = this.zoomLevel; //这里的几行代码的逻辑是用到了5个函数里面，后面可以想一下怎么重构
if (this.zoomLevel != Math.floor(this.zoomLevel)) {
z = Math.floor(this.zoomLevel + 1);
}
//尝试在这里移除不需要继续下载的内容
let indexs = new Array();
dm.forEach(d => {
if (d.z !=z) {
if(this.needtiles.find(e=>e.x==d.x&&e.y==d.y)==undefined){
d.xhr.abort();
console.log('中断请求');
dm.remove(d);
}
}
});
alltilecount += this.needtiles.length; //for debug
//console.log(this.needtiles);
this.needtiles.forEach(et => {
const etsize = calTileSize(this.TILESIZE, this.zoomLevel);
const tilev = this.mplat2Viewport(et.x * etsize, et.y * etsize);
this.drawRect(tilev.x, tilev.y, etsize, etsize);
let z = this.zoomLevel;//这里的几行代码的逻辑是用到了5个函数里面，后面可以想一下怎么重构
if (this.zoomLevel != Math.floor(this.zoomLevel)) {
z = Math.floor(this.zoomLevel + 1);
}
const text = `${z}/${et.x}/${et.y}.png`;
// console.log(text);
this.drawtext(text, tilev.x + etsize / 2, tilev.y + etsize / 2);
@ -287,22 +303,27 @@ function calTileNum(coord, tilesize, zoomLevel) {
function lon2tile(lon, z) {
return (Math.floor((lon + 180) / 360 * Math.pow(2, z)));
}
function lat2tile(lat, z) {
return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) +
1 / Math.cos(lat * Math.PI / 180)) / Math.PI) /
2 * Math.pow(2, z)));
}
function lon2x(lon, z) {
return ((lon + 180) / 360 * Math.pow(2, z));
}
function lat2y(lat, z) {
return ((1 - Math.log(Math.tan(lat * Math.PI / 180) +
1 / Math.cos(lat * Math.PI / 180)) / Math.PI) /
2 * Math.pow(2, z));
}
function tile2long(x, z) {
return (x / Math.pow(2, z) * 360 - 180);
}
function tile2lat(y, z) {
var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
@ -340,25 +361,25 @@ function downloadimg(z, x, y) {
//console.log('downloaded' + z + '/' + x + '/' + y + '.png');
downloadRecord.remove(obj); //下载完成后从记录中移除
dm.remove(dmobj);
Caches.push({ img: img, z: z, x: x, y: y });//下载完成后加入缓存
Caches.push({ img: img, z: z, x: x, y: y }); //下载完成后加入缓存
downtilecount += 1;
resolve(img);
}
img.src = url;
dm.push(dmobj);//尝试添加管理
dm.push(dmobj); //尝试添加管理
});
}
//尝试优化图片下载机制 //采用下载速度比较慢的openstreetmap 测试
function xhrdownloadimg(z, x, y) {
return new Promise((resolve, reject) => {
const url = `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
const url = `https://b.tile.openstreetmap.org/${z}/${x}/${y}.png`;
let imgxhr = new XMLHttpRequest();
imgxhr.open('GET', url, true);
//add downloadcheck
const obj = { z: z, x: x, y: y };
downloadRecord.push(obj); //下载前加入一条记录
//const obj = { z: z, x: x, y: y };
//downloadRecord.push(obj); //下载前加入一条记录
const dmobj = { xhr: imgxhr, z: z, x: x, y: y };
//imgxhr.withCredentials = true;
@ -369,12 +390,14 @@ function xhrdownloadimg(z, x, y) {
let img = createImageBitmap(blob);
Caches.push({ img: img, z: z, x: x, y: y });
downtilecount += 1;
downloadRecord.remove(obj); //下载完成后将记录移除
//downloadRecord.remove(obj); //下载完成后将记录移除
dm.remove(dmobj);
console.log('dm下载完成减少');
resolve(img);
} else {
reject('下载似乎失败了');
dm.remove(dmobj);
console.log('dm下载失败减少');
}
};
dm.push(dmobj); //保存xhr对象 和xyz索引
@ -383,51 +406,32 @@ function xhrdownloadimg(z, x, y) {
}
async function getImg(vp, z, x, y) {
const found = Caches.find(e => (e.z == z && e.x == x && e.y == y));//查找缓存
if (found == undefined) {//缓存中没有
const obj = downloadRecord.find(e => e.z == z && e.x == x && e.y == y);//查找下载记录
if (obj == undefined) {
//如果缓存中没有，并且没有下载记录，需先判断是否继续加载
if (isTileShouldDownload(vp, z, x, y)) {//如果要继续加载
//let p = await downloadimg(z, x, y); //发起下载请求并等待结果
let p = await xhrdownloadimg(z, x, y);
return p;
}
} else {
//如果缓存中没有，但是有下载记录，需先判断是否继续加载
if (isTileShouldDownload(vp, z, x, y)) {//如果要继续加载
return Promise.reject('需要等待下载完成或者重新发起请求');
} else {
//不需要继续加载了，但是下载请求已经发起
//不知道提前卸载掉img会不会让下载终止，不然就只能考虑xmlhttprequest了 其有abort方法可以退出下载
//测试是不行，需转为xmlhttprequest实现
// dm.remove(dm.find(e => (e.z == z && e.x == x && e.y == y)));
// console.log("may something work");
//xhr 中断请求
const dmobj = dm.find(e => (e.z == z && e.x == x && e.y == y));
if (dmobj) {
dmobj.xhr.abort();
dm.remove(dmobj);
console.log("主动中断 ", { z: z, x: x, y: y });
}
}
const found = Caches.find(e => (e.z == z && e.x == x && e.y == y)); //查找缓存
if (found == undefined) { //缓存中没有
console.log('缓存中没有' + z + '/' + x + '/' + y + '.png');
//这里不需要判断是否继续加载，在还未开始下载图片前，这里可以说是立即执行的
console.log(isTileShouldDownload(vp, z, x, y));//always true
const dmobj = dm.find(e => (e.z == z && e.x == x && e.y == y));
if (dmobj == undefined) {
//如果缓存中没有，并且没有下载记录 发起下载请求并等待结果
let p = await xhrdownloadimg(z, x, y);
return p;
}
else {//有下载记录就不用继续下载了
console.log(vp.zoomLevel, vp.xoffset, vp.yoffset);
return Promise.reject('需要等待下载完成');
}
} else {//缓存中有直接返回
//console.log('exist' + z + '/' + x + '/' + y + '.png');
} else { //缓存中有直接返回
console.log('缓存中有' + z + '/' + x + '/' + y + '.png');
return found.img;
}
}
function debug() {
console.log('=============debug=================');
console.log('alltilecount', alltilecount);
console.log('downtilecount', downtilecount);
console.log('cachecount', Caches.length);
console.log('drecord count', downloadRecord.length);
console.log('dm count', dm.length);
console.log('=============debug=================');
}
}
Write Preview
Loading…
Cancel
Save