|
|
//help array;
|
|
|
let Caches = new Array(); //cache
|
|
|
//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; //实际的底图大小
|
|
|
//init
|
|
|
this.canvas = document.getElementById(canvasId);
|
|
|
this.canvas.width = this.canvas.clientWidth;
|
|
|
this.canvas.height = this.canvas.clientHeight;
|
|
|
|
|
|
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
|
|
|
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
|
|
|
|
|
|
const defaultCenterX = Math.pow(2, this.zoomLevel) * this.TILESIZE / 2;
|
|
|
const defaultCenterY = Math.pow(2, this.zoomLevel) * this.TILESIZE / 2;
|
|
|
this.xoffset = this.width / 2 - defaultCenterX;
|
|
|
this.yoffset = this.height / 2 - defaultCenterY;
|
|
|
|
|
|
//如果在options中有指定地图中心点
|
|
|
//options.centerLng && options.centerLat
|
|
|
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));
|
|
|
const my = lat2y(lat, this.zoomLevel) * this.TILESIZE;
|
|
|
const mx = lon2x(lng, this.zoomLevel) * this.TILESIZE;
|
|
|
this.xoffset = this.width / 2 - mx;
|
|
|
this.yoffset = this.height / 2 - my;
|
|
|
//console.log('check ', this.viewport2Latlng(this.width / 2, this.height / 2));
|
|
|
} catch (error) {
|
|
|
console.log('使用默认中心点');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.needtiles = new Array(); //需要加载的底图 实时变化
|
|
|
|
|
|
//move
|
|
|
let moveflag = false;
|
|
|
let downpoing = { x: 0, y: 0 };
|
|
|
this.canvas.onmousedown = (e) => {
|
|
|
moveflag = true;
|
|
|
[downpoing.x, downpoing.y] = [e.offsetX, e.offsetY];
|
|
|
//坐标转换 debug
|
|
|
//console.log(this.zoomLevel, e.offsetX, e.offsetY);
|
|
|
const wgs84 = this.viewport2Latlng(e.offsetX, e.offsetY);
|
|
|
console.log('clicked', wgs84);
|
|
|
}
|
|
|
this.canvas.onmouseup = (e) => {
|
|
|
moveflag = false;
|
|
|
}
|
|
|
this.canvas.onmouseout = () => {
|
|
|
moveflag = false; //从元素范围外移动回来时不会继续移动，必须松开左键，按下左键后再进行移动
|
|
|
}
|
|
|
this.canvas.onmousemove = (e) => {
|
|
|
if (moveflag) {
|
|
|
const movex = downpoing.x - e.offsetX;
|
|
|
const movey = downpoing.y - e.offsetY;
|
|
|
//实现移动逻辑
|
|
|
this.xoffset -= movex;
|
|
|
this.yoffset -= movey;
|
|
|
|
|
|
this.drawTiles();
|
|
|
downpoing.x = e.offsetX;
|
|
|
downpoing.y = e.offsetY;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//scale
|
|
|
this.canvas.onwheel = (e) => {
|
|
|
const dzl = this.dzl;
|
|
|
const zoomleveloffset = (e.deltaY > 0) ? 1 * dzl : -1 * dzl;
|
|
|
const oldz = this.zoomLevel;
|
|
|
this.zoomLevel = this.zoomLevel - zoomleveloffset;
|
|
|
if (this.zoomLevel < this.minZoomLevel) {
|
|
|
this.zoomLevel = this.minZoomLevel;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (this.zoomLevel > this.maxZoomLevel) {
|
|
|
this.zoomLevel = this.maxZoomLevel;
|
|
|
return;
|
|
|
}
|
|
|
//console.log(this.zoomLevel, e.offsetX, e.offsetY);
|
|
|
this.updateViewport(e.offsetX, e.offsetY, oldz, this.zoomLevel);
|
|
|
this.drawTiles();
|
|
|
}
|
|
|
|
|
|
this.drawTiles();
|
|
|
|
|
|
// setInterval(() => {
|
|
|
// debug();
|
|
|
// }, 1000);
|
|
|
}
|
|
|
|
|
|
//扩展一下Array 用以辅助进行加载底图
|
|
|
Array.prototype.remove = function (val) {
|
|
|
const index = this.indexOf(val);
|
|
|
if (index > -1) {
|
|
|
return this.splice(index, 1);
|
|
|
}
|
|
|
return this;
|
|
|
}
|
|
|
|
|
|
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 lngp = lng - Math.floor((lng + 180) / 360) * 360;
|
|
|
if (lat < (0 - latlimit) || lat > latlimit) {
|
|
|
throw "OutMapRange";
|
|
|
}
|
|
|
return { lat: lat, lng: lngp };
|
|
|
},
|
|
|
|
|
|
mplatPreCheck(mx, my) {
|
|
|
//数据超界处理, 这里是对应缩放等级的地图的大小,底图大小*底图块数 注意底图块数始终为整数level时的底图块数
|
|
|
//实际只改变的底图大小，没有改变块数
|
|
|
let limit = calTileSize(this.TILESIZE, this.zoomLevel) * Math.pow(2, this.zoomLevel);
|
|
|
if (this.zoomLevel != Math.floor(this.zoomLevel)) {
|
|
|
limit = calTileSize(this.TILESIZE, this.zoomLevel) * Math.pow(2, Math.floor(this.zoomLevel + 1));
|
|
|
}
|
|
|
if (mx <= 0 || my <= 0 || mx >= limit || my >= limit) {
|
|
|
throw "OutMapRange";
|
|
|
}
|
|
|
return { x: mx, y: my };
|
|
|
},
|
|
|
|
|
|
//-------------------------------------
|
|
|
//这几个函数是坐标转换函数
|
|
|
mplat2Viewport(mx, my) {
|
|
|
const vx = mx + this.xoffset;
|
|
|
const vy = my + this.yoffset;
|
|
|
return { x: vx, y: vy };
|
|
|
},
|
|
|
|
|
|
viewport2Mplat(vx, vy) {
|
|
|
const mx = vx - this.xoffset;
|
|
|
const my = vy - this.yoffset;
|
|
|
return { x: mx, y: my };
|
|
|
},
|
|
|
|
|
|
viewport2Latlng(vx, vy) {
|
|
|
let mplatc = this.viewport2Mplat(vx, vy); //mplat coordinates
|
|
|
mplatc = this.mplatPreCheck(mplatc.x, mplatc.y);
|
|
|
const lat = tile2lat(mplatc.y / this.TILESIZE, this.zoomLevel);
|
|
|
const lng = tile2long(mplatc.x / this.TILESIZE, this.zoomLevel);
|
|
|
return { lat: lat, lng: lng }
|
|
|
},
|
|
|
latlng2Viewport(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);
|
|
|
return { x: vp.x, y: vp.y };
|
|
|
},
|
|
|
//----------------------------------------
|
|
|
|
|
|
//更新偏移值
|
|
|
updateViewport(scrollx, scrolly, oldz, newz) {
|
|
|
//计算出缩放后坐标系的偏移值
|
|
|
// xv = xm + offset ; offset = xv - xm
|
|
|
const scrollm = this.viewport2Mplat(scrollx, scrolly);
|
|
|
const basescale = Math.pow(2, newz - oldz);
|
|
|
const newscrollm = { x: scrollm.x * basescale, y: scrollm.y * basescale };
|
|
|
this.xoffset = scrollx - newscrollm.x;
|
|
|
this.yoffset = scrolly - newscrollm.y;
|
|
|
},
|
|
|
|
|
|
//过滤需要加载的底图
|
|
|
tilesFilter(tails) {
|
|
|
let news = new Array();
|
|
|
let max = Math.pow(2, this.zoomLevel);
|
|
|
if (this.zoomLevel != Math.floor(this.zoomLevel)) {
|
|
|
max = Math.pow(2, Math.floor(this.zoomLevel + 1));
|
|
|
}
|
|
|
for (let i = 0; i < tails.length; i++) {
|
|
|
const e = tails[i];
|
|
|
if (e.x >= 0 && e.y >= 0 && e.x < max && e.y < max) {
|
|
|
news.push(e);
|
|
|
}
|
|
|
}
|
|
|
return news;
|
|
|
},
|
|
|
|
|
|
|
|
|
//一些绘制函数
|
|
|
clearCanvas() {
|
|
|
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
|
},
|
|
|
drawRect(x, y, width, height) {
|
|
|
this.ctx.strokeStyle = "white"
|
|
|
this.ctx.strokeRect(x, y, width, height);
|
|
|
},
|
|
|
drawtext(text, x, y) {
|
|
|
this.ctx.fillStyle = "white"
|
|
|
this.ctx.font = "18px serif";
|
|
|
this.ctx.textAlign = "center";
|
|
|
this.ctx.textBaseline = "middle";
|
|
|
this.ctx.fillText(text, x, y);
|
|
|
},
|
|
|
drawTiles() {
|
|
|
this.clearCanvas();
|
|
|
const viewport_left_top = this.viewport2Mplat(0, 0);
|
|
|
const viewport_right_bottom = this.viewport2Mplat(this.width, this.height);
|
|
|
const mixnum = calTileNum(viewport_left_top.x, this.TILESIZE, this.zoomLevel);
|
|
|
const miynum = calTileNum(viewport_left_top.y, this.TILESIZE, this.zoomLevel);
|
|
|
const maxnum = calTileNum(viewport_right_bottom.x, this.TILESIZE, this.zoomLevel);
|
|
|
const maynum = calTileNum(viewport_right_bottom.y, this.TILESIZE, this.zoomLevel);
|
|
|
const horicount = maxnum - mixnum + 1;
|
|
|
const verticount = maynum - miynum + 1;
|
|
|
let tails = new Array();
|
|
|
for (let i = 0; i < horicount; i++) {
|
|
|
for (let j = 0; j < verticount; j++) {
|
|
|
const x = mixnum + i;
|
|
|
const y = miynum + j;
|
|
|
tails.push({ x: x, y: y });
|
|
|
}
|
|
|
}
|
|
|
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);
|
|
|
const text = `${z}/${et.x}/${et.y}.png`;
|
|
|
// console.log(text);
|
|
|
this.drawtext(text, tilev.x + etsize / 2, tilev.y + etsize / 2);
|
|
|
this.drawTileImg(z, et.x, et.y);
|
|
|
});
|
|
|
//debug();
|
|
|
},
|
|
|
drawTileImg(z, x, y) {
|
|
|
|
|
|
const img = getImg(this, z, x, y);
|
|
|
img.then((e) => {
|
|
|
if (isTileShouldDownload(this, z, x, y)) {
|
|
|
//对e添加判断，似乎不是每一个e都是一个图片
|
|
|
if (e instanceof ImageBitmap) {
|
|
|
const etsize = calTileSize(this.TILESIZE, this.zoomLevel);
|
|
|
const tilev = this.mplat2Viewport(x * etsize, y * etsize);
|
|
|
this.ctx.drawImage(e, tilev.x, tilev.y, etsize, etsize);
|
|
|
}
|
|
|
}
|
|
|
}).catch((e) => {
|
|
|
console.log(e);
|
|
|
});
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
//计算实时底图大小
|
|
|
function calTileSize(tilesize, zoomLevel) {
|
|
|
let rtSize = tilesize;
|
|
|
if (zoomLevel != Math.floor(zoomLevel)) {
|
|
|
rtSize = tilesize * Math.pow(2, zoomLevel - Math.floor(zoomLevel + 1));
|
|
|
}
|
|
|
return rtSize;
|
|
|
}
|
|
|
|
|
|
//计算当前坐标值所在的底图编号
|
|
|
function calTileNum(coord, tilesize, zoomLevel) {
|
|
|
return Math.floor(coord / calTileSize(tilesize, zoomLevel));
|
|
|
}
|
|
|
|
|
|
//=====coord about 地理坐标与墨卡托投影的相关转换方法=====
|
|
|
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))));
|
|
|
}
|
|
|
|
|
|
//=========下载图片相关==================
|
|
|
//将其和viewpoint分离,方便后续修复问题和增加新的下载方式或者底图源
|
|
|
|
|
|
//判断一张底图需不需要继续下载，这里采用保守一点的下载策略，必须是先判定为需要加载的底图才开始下载
|
|
|
//传入vp以获取相关参数
|
|
|
function isTileShouldDownload(vp, z, x, y) {
|
|
|
let fz = vp.zoomLevel;
|
|
|
if (vp.zoomLevel != Math.floor(vp.zoomLevel)) {
|
|
|
fz = Math.floor(vp.zoomLevel + 1);
|
|
|
}
|
|
|
if (vp.needtiles.find(t => z == fz && t.x == x && t.y == y)) {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
//add autonavi
|
|
|
function downloadimg(z, x, y) {
|
|
|
return new Promise((resolve) => {
|
|
|
//const url = `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
|
|
|
const url = 'http://webrd01.is.autonavi.com/' +
|
|
|
'appmaptile?lang=zh_cn&size=1&scale=1&style=8' +
|
|
|
`&x=${x}&y=${y}&z=${z}`;
|
|
|
//add downloadcheck
|
|
|
const obj = { z: z, x: x, y: y };
|
|
|
downloadRecord.push(obj); //下载前加入记录
|
|
|
let img = new Image();
|
|
|
const dmobj = { img: img, z: z, x: x, y: y };
|
|
|
img.onload = () => {
|
|
|
//console.log('downloaded' + z + '/' + x + '/' + y + '.png');
|
|
|
downloadRecord.remove(obj); //下载完成后从记录中移除
|
|
|
dm.remove(dmobj);
|
|
|
Caches.push({ img: img, z: z, x: x, y: y }); //下载完成后加入缓存
|
|
|
downtilecount += 1;
|
|
|
resolve(img);
|
|
|
}
|
|
|
img.src = url;
|
|
|
dm.push(dmobj); //尝试添加管理
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//尝试优化图片下载机制 //采用下载速度比较慢的openstreetmap 测试
|
|
|
function xhrdownloadimg(z, x, y) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
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 dmobj = { xhr: imgxhr, z: z, x: x, y: y };
|
|
|
|
|
|
//imgxhr.withCredentials = true;
|
|
|
imgxhr.responseType = 'blob';
|
|
|
imgxhr.onload = function (e) {
|
|
|
if (this.status === 200 && imgxhr.response) {
|
|
|
let blob = new Blob([imgxhr.response], { type: 'image/png' });
|
|
|
let img = createImageBitmap(blob);
|
|
|
Caches.push({ img: img, z: z, x: x, y: y });
|
|
|
downtilecount += 1;
|
|
|
//downloadRecord.remove(obj); //下载完成后将记录移除
|
|
|
dm.remove(dmobj);
|
|
|
console.log('dm下载完成减少');
|
|
|
resolve(img);
|
|
|
} else {
|
|
|
reject('下载似乎失败了');
|
|
|
dm.remove(dmobj);
|
|
|
console.log('dm下载失败减少');
|
|
|
}
|
|
|
};
|
|
|
dm.push(dmobj); //保存xhr对象 和xyz索引
|
|
|
imgxhr.send(null);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
async function getImg(vp, z, x, 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('缓存中有' + 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('dm count', dm.length);
|
|
|
console.log('=============debug=================');
|
|
|
} |