重庆网页设计培训学校,利于优化的网站模板,做信公众号首图的网站,做视频网站需要什么证书概述
随着数据经度的提升#xff0c;18级的切片有些场景已经不够用了#xff0c;但是大部分在线的栅格切片最大级别还是18级#xff0c;如果地图继续放大#xff0c;有的框架#xff08;leaflet会#xff0c;openlayers和mapboxGL不会#xff09;会存在没有底图的情况。…概述
随着数据经度的提升18级的切片有些场景已经不够用了但是大部分在线的栅格切片最大级别还是18级如果地图继续放大有的框架leaflet会openlayers和mapboxGL不会会存在没有底图的情况。为处理这种情况本文通过node实现在级别大于18级的时候将18级的切片进行裁切解决没有底图的问题。
实现效果 实现代码
获取切片图片如果z大于18则取18级的切片进行切割否则直接返回。
getTileData(z, x, y) {return new Promise(resolve {let url , extent [], xy18 []if(z 18 ) {extent this.getTileExtent(z, x, y)const [minX, minY, maxX, maxY] extent// 获取18级对应的索引xy18 this.getTileIndexByCoords((minX maxX) / 2, (minY maxY) / 2)const [x18, y18] xy18url https://webrd01.is.autonavi.com/appmaptile?style8langzh_cnsize1scale1x${x18}y${y18}z18} else {url https://webrd01.is.autonavi.com/appmaptile?style8langzh_cnsize1scale1x${x}y${y}z${z}}loadImage(url).then(image {this.ctx.clearRect(0, 0, this.TILE_SIZE, this.TILE_SIZE)if(z 18) {const [minX, minY, maxX, maxY] extentconst [x18, y18] xy18const [minX18, minY18, maxX18, maxY18] this.getTileExtent(18, x18, y18)const [srcx18, srcy18] this.toScreen(minX18, maxY18)const [srcxmin, srcymin] this.toScreen(minX, maxY)const [srcxmax, srcymax] this.toScreen(maxX, minY)const scrx Math.round(srcxmin - srcx18), scry Math.round(srcymin - srcy18)const width Math.round(srcxmax - srcx18 - scrx), height Math.round(srcymax - srcy18 - scry)this.ctx.drawImage(image, scrx, scry, width, height, 0, 0, this.TILE_SIZE, this.TILE_SIZE)} else {this.ctx.drawImage(image, 0, 0, this.TILE_SIZE, this.TILE_SIZE)}resolve(this.canvas.toBuffer(image/png))})})
}getTileExtent为根据切片索引获取切片范围其实现如下
getResolution(z) {return (this.TILE_ORIGIN * 2) / (Math.pow(2, z) * this.TILE_SIZE)
}
/*** 获取切片范围* param {number} z * param {number} x * param {number} y * returns {number}*/
getTileExtent(z, x, y) {const res this.getResolution(z)const minX x * this.TILE_SIZE * res - this.TILE_ORIGINconst maxX (x 1) * this.TILE_SIZE * res - this.TILE_ORIGINconst minY this.TILE_ORIGIN - (y 1) * this.TILE_SIZE * resconst maxY this.TILE_ORIGIN - y * this.TILE_SIZE * resreturn [minX, minY, maxX, maxY]
}其中
TILE_SIZE切片大小值为256TILE_ORIGIN切片原点值为20037508.34 getTileIndexByCoords为根据坐标获取切片索引实现代码如下
getTileIndexByCoords(x, y) {const res18 this.getResolution(18) * this.TILE_SIZEreturn [Math.floor((x this.TILE_ORIGIN) / res18),Math.floor((this.TILE_ORIGIN - y) / res18)]
}toScreen实现将地理坐标转换为屏幕坐标。
toScreen(x, y) {const res18 this.getResolution(18)return [(x this.TILE_ORIGIN) / res18,(this.TILE_ORIGIN - y) / res18]
}完整代码如下
import { createCanvas, loadImage } from canvas
import express from expressconsole.time(app)const app express()// 自定义跨域中间件
const allowCors function (req, res, next) {res.header(Access-Control-Allow-Origin, req.headers.origin);res.header(Access-Control-Allow-Methods, GET,PUT,POST,DELETE,OPTIONS);res.header(Access-Control-Allow-Headers, Content-Type);res.header(Access-Control-Allow-Credentials, true);next();
};
app.use(allowCors);// 使用跨域中间件app.use(express.static(public))class TileUtil {constructor() { this.TILE_ORIGIN 20037508.34 // 切片原点this.TILE_SIZE 256; // 切片大小this.canvas createCanvas(this.TILE_SIZE, this.TILE_SIZE)this.ctx this.canvas.getContext(2d)}/*** 计算分辨率* param {number} z - 缩放级别* returns {number}*/getResolution(z) {return (this.TILE_ORIGIN * 2) / (Math.pow(2, z) * this.TILE_SIZE)}/*** 获取切片范围* param {number} z * param {number} x * param {number} y * returns {number}*/getTileExtent(z, x, y) {const res this.getResolution(z)const minX x * this.TILE_SIZE * res - this.TILE_ORIGINconst maxX (x 1) * this.TILE_SIZE * res - this.TILE_ORIGINconst minY this.TILE_ORIGIN - (y 1) * this.TILE_SIZE * resconst maxY this.TILE_ORIGIN - y * this.TILE_SIZE * resreturn [minX, minY, maxX, maxY]}/*** 将地理坐标转换为屏幕坐标* param {number} x * param {number} y * returns {number}*/toScreen(x, y) {const res18 this.getResolution(18)return [(x this.TILE_ORIGIN) / res18,(this.TILE_ORIGIN - y) / res18]}/*** 获取切片图片如果z大于18则取18级的切片进行切割否则直接返回* param {number} z * param {number} x * param {number} y * returns {BufferImage}*/getTileData(z, x, y) {return new Promise(resolve {let url , extent [], xy18 []if(z 18 ) {extent this.getTileExtent(z, x, y)const [minX, minY, maxX, maxY] extent// 获取18级对应的索引xy18 this.getTileIndexByCoords((minX maxX) / 2, (minY maxY) / 2)const [x18, y18] xy18url https://webrd01.is.autonavi.com/appmaptile?style8langzh_cnsize1scale1x${x18}y${y18}z18} else {url https://webrd01.is.autonavi.com/appmaptile?style8langzh_cnsize1scale1x${x}y${y}z${z}}loadImage(url).then(image {this.ctx.clearRect(0, 0, this.TILE_SIZE, this.TILE_SIZE)if(z 18) {const [minX, minY, maxX, maxY] extentconst [x18, y18] xy18const [minX18, minY18, maxX18, maxY18] this.getTileExtent(18, x18, y18)const [srcx18, srcy18] this.toScreen(minX18, maxY18)const [srcxmin, srcymin] this.toScreen(minX, maxY)const [srcxmax, srcymax] this.toScreen(maxX, minY)const scrx Math.round(srcxmin - srcx18), scry Math.round(srcymin - srcy18)const width Math.round(srcxmax - srcx18 - scrx), height Math.round(srcymax - srcy18 - scry)this.ctx.drawImage(image, scrx, scry, width, height, 0, 0, this.TILE_SIZE, this.TILE_SIZE)} else {this.ctx.drawImage(image, 0, 0, this.TILE_SIZE, this.TILE_SIZE)}resolve(this.canvas.toBuffer(image/png))})})}/*** 根据坐标获取切片索引* param {number} x * param {number} y * returns {[number, number]}*/getTileIndexByCoords(x, y) {const res18 this.getResolution(18) * this.TILE_SIZEreturn [Math.floor((x this.TILE_ORIGIN) / res18),Math.floor((this.TILE_ORIGIN - y) / res18)]}
}const util new TileUtil()app.get(/tile/:z/:x/:y, (req, res) {const { z, x, y } req.paramsutil.getTileData(Number(z), Number(x), Number(y)).then(data {res.setHeader(Expires, new Date(Date.now() 30 * 1000).toUTCString())res.writeHead(200, {Content-Type: image/png,});res.end(data);})
})app.get(/tile-bbox/:z/:x/:y, (req, res) {const { z, x, y } req.paramsconst TILE_SIZE 256;const canvas createCanvas(TILE_SIZE, TILE_SIZE)const ctx canvas.getContext(2d)ctx.fillStyle #f00ctx.strokeStyle #f00ctx.lineWidth 2ctx.textAlign center;ctx.textBaseline middlectx.font bold 18px 微软雅黑;ctx.strokeRect(0, 0, TILE_SIZE, TILE_SIZE)ctx.fillText(${z}-${x}-${y}, TILE_SIZE / 2, TILE_SIZE / 2)res.setHeader(Expires, new Date(Date.now() 30 * 1000).toUTCString())res.writeHead(200, {Content-Type: image/png,});res.end(canvas.toBuffer(image/png));
})app.listen(18089, () {console.timeEnd(app)console.log(express server running at http://127.0.0.1:18089)
})
