如何将图片切割成瓦片图？

目标：知道图片经纬度的前提下，将一张图片切割成瓦片图，并以地图底图的格式生成及保存。

技术：leaflet.js+nw.js

下载地址：https://download.csdn.net/download/striveye/11010965

总结：该方法用于单独快速将图片切割成瓦片图，并生成地图格式的图片，可用于leaflet地图、mapbox地图等。

PS：项目必须依赖leaflet.js，nw.js用于快速生成及保存瓦片图（不是必须依赖项，可自行编写保存图片的方法代替）

（目标图片）

（结果图片）

项目文件：

代码实现：

<body style="overflow:scroll">
<div style="background-color: black;text-align:center;overflow:auto;"><canvas id="canvas1" style="border:1px solid blue;">Your browser dosen't support canvas.</canvas>
</div>
<script type="text/javascript" src="./leaflet.js"></script>
<script type="text/javascript">var fs = require('fs');var path = require('path');//参数设置：//lat1-lng1：右上角经纬度，lat2-lng2：左下角经纬度//z0:最小级别，z1：最大级别var cfg = {lat1: 32.2871,lng1: 106.6113,lat2: 18.0623,lng2: 117.2460,z0: 0,z1: 8}var IMG_H = 'data:image/png;base64,';console.log('start')var spath = "./SouceData/";var files = fs.readdirSync(spath);var idx = 0, cnt = files.length;next();function next(){if (idx < cnt){var imagefile = spath + files[idx];console.log(((idx+1)+'/'+cnt)+' : '+imagefile)SplitImageToMap(cfg, imagefile, function(){idx++;next();});} else {console.log('end');}}function SplitImageToMap(cfg, imagefile, callback) {var c1 = document.getElementById('canvas1');var ctx1 = c1.getContext('2d');var img = new Image();var c2 = document.createElement('canvas')var ctx2 = c2.getContext('2d');var name = imagefile.substr(imagefile.lastIndexOf('/')+1);var listname = name.split('.')[0].split('_');img.src =  imagefile;img.onload = function () {var size = 256;//瓦片图的尺寸for (var z = cfg.z0; z <= cfg.z0 + (cfg.z1 - cfg.z0); z++) {var point1 = L.CRS.EPSG3857.latLngToPoint(L.latLng(cfg.lat1, cfg.lng1), z);var point2 = L.CRS.EPSG3857.latLngToPoint(L.latLng(cfg.lat2, cfg.lng2), z);var x1 = parseInt(point1.x / size);var y1 = parseInt(point1.y / size);var x2 = parseInt(point2.x / size);var y2 = parseInt(point2.y / size);var cw = size * (x2 - x1 + 1), ch = size * (y2 - y1 + 1);c1.width = cw;c1.height = ch;ctx1.drawImage(img, point1.x % size, point1.y % size, point2.x - point1.x, point2.y - point1.y);var xNum = parseInt(cw / size), yNum = parseInt(ch / size);//计算x,y方向有多少个瓦片for (var y = 0; y < yNum; y++) {for (var x = 0; x < xNum; x++) {var targetImageData = ctx1.getImageData(x * size, y * size, size, size);c2.width = size;c2.height = size;ctx2.putImageData(targetImageData, 0, 0, 0, 0, size, size);var filepath = 'TodoData/' + listname + '/' + z + '/' + (y + y1);mkdirsSync(filepath);var filename = filepath + '/' + z + '_' + (y + y1) + '_' + (x + x1) + '.png';fs.writeFileSync(filename, c2.toDataURL('image/png').substr(IMG_H.length), 'base64');}}}if (callback && typeof callback == 'function') callback();}img.onerror = function(){if (callback && typeof callback == 'function') callback();}}// 递归创建目录 同步方法function mkdirsSync(dirname) {if (fs.existsSync(dirname)) {return true;} else {if (mkdirsSync(path.dirname(dirname))) {fs.mkdirSync(dirname);return true;}}}</script>
</body>

运行操作：

把demo文件夹拉扯到nw.exe运行即可

demo\SouceData:源图片

demo\TodoData:瓦片图

运行效果：

如何将图片切割成瓦片图？相关推荐

java tif切割成瓦片_将图片切割成瓦片图-（算法+实现）
[实例简介] 介绍:https://blog.csdn.net/STRIVEYe/article/details/88388072 [实例截图] [核心代码] 919ed105-5c0c-4f11-a ...
地图裁剪器，可以将图片裁剪成瓦片数据，主要用途是将高清卫星图像裁剪成瓦片图，可以做离线地图的开发，基于墨卡托坐标
废话不多说,直接上代码地图裁剪器,可以将图片裁剪成瓦片数据,主要用途是将高清卫星图像裁剪成瓦片图,可以做离线地图的开发,基于墨卡托坐标地图裁剪 package com.wwp.utils.map; ...
OprenCV学习之路一：将彩色图片转换成灰度图
//将一张彩色图片转成灰度图:#include<cv.h> #include<cvaux.h> #include<highgui.h> #include<ml ...
Android中将一个图片切割成多个图片[转]
有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...
android图片分割点击,Android中图片切割成多个图片的实现方法
系统手机总是有很多不是很完美的时候,比如逐帧播放图片的时候产生的效果,今天爱站技术频道小编为大家整理了Android中图片切割成多个图片的实现方法,大家一起来了解一下吧! 以下是封装好的两个类,可以实 ...
如何将夜晚图片转化为白天图片 matlab,教你简单几步将白天图片转换成夜景图_资源库...
摘要:教你简单几步将白天图片转换成夜景图_资源库摘要:今天分享一个有趣的教程,教大家利用滤镜和调整图层,简单几步将白天图片变成夜景图,特别实用,还能学到一个鲜为人知的调色功能,看看赶紧练练吧. 原图 ...
精雕软件怎么把图片转成灰度图_怎么把普通的照片变成浮雕用的灰度图精雕图灰度图浮雕图之间怎么能联系起来使用...
怎么把普通的照片变成浮雕用的灰度图用PS啊,里面有这种效果的,若需要帮忙的话,可以加发给我一份啊,尽量帮你哈,呵呵用 photoshop 把照片变成灰度图,用PS做有很多方法,介绍两种: 方法1: ...
基于Qt的jpg、png图片批处理成svg图工具
项目中有一个功能只能识别svg图,但是我们的原始数据都是jpg或者png图片,这就需要将jpg或者png转成svg了.我们有好几G的原始图片需要转成svg,经过考虑,最终决定用Qt来开发这个小工具,简 ...
python　将图片切割成固定大小的图片脚本
将像素很大的图片切割成固定大小的多张图片,代码如下: import numpy as np import matplotlib import os from PIL import Imagedef i ...

如何将图片切割成瓦片图？

如何将图片切割成瓦片图？相关推荐

最新文章

热门文章