html中使用canvas实现对在线获取的瓦片地图源数据的的重新拼凑、放大缩小、经纬度定位

共2个文件

html：1个

css：1个

3星 · 超过75%的资源需积分: 3 136 浏览量 2018-01-24 13:56:58 上传评论 3 收藏 2KB ZIP 举报

在HTML5中，Canvas元素提供了一个强大的绘图接口，允许开发者动态绘制图形并进行复杂的图像操作。本话题将深入探讨如何使用Canvas与JavaScript技术来处理在线获取的瓦片地图源数据，实现地图的重新拼凑、放大缩小以及经纬度定位功能。我们需要了解瓦片地图的工作原理。瓦片地图是一种将地球表面分成多个小块（通常256x256像素），每个小块对应一个特定的经纬度范围。这些小块被称为地图瓦片，它们被存储为单独的图像文件，通常为JPEG或PNG格式。当用户在浏览器中查看地图时，地图服务会根据用户的视口位置和缩放级别动态加载相应的瓦片。在HTML中，我们创建一个Canvas元素，并通过JavaScript来控制其绘图行为。我们需要加载地图瓦片图片。这通常涉及到AJAX请求，获取指定经纬度范围的瓦片URL，然后使用`Image`对象加载这些图片。 ```javascript function loadTile(x, y, z) { var img = new Image(); img.onload = function() { drawTile(img, x, y, z); }; img.src = 'https://example.com/tiles/' + z + '/' + x + '/' + y + '.png'; } ``` 接下来，`drawTile`函数将图片绘制到Canvas上，根据瓦片的经纬度坐标和当前缩放级别进行位置计算： ```javascript function drawTile(img, x, y, z) { var ctx = canvas.getContext('2d'); var tileWidth = img.width; var tileHeight = img.height; var pixelRatio = window.devicePixelRatio; var tileX = (x * tileWidth) * pixelRatio; var tileY = (y * tileHeight) * pixelRatio; ctx.drawImage(img, tileX, tileY, tileWidth * pixelRatio, tileHeight * pixelRatio); } ``` 为了实现地图的放大缩小，我们可以调整Canvas的`width`和`height`属性，同时更新绘制瓦片的坐标。每次缩放，瓦片的数量和大小都会发生变化，因此需要重新加载和绘制所有可见的瓦片。对于经纬度定位，我们可以利用地理坐标与像素坐标之间的转换公式。我们需要知道地图投影方式，常见的有Web Mercator（墨卡托投影）。有了经纬度和缩放级别，可以计算出对应像素坐标，然后在Canvas上绘制标记。 ```javascript function定位(lat, lng, zoom) { var mercX = (lng + 180) / 360 * (Math.pow(2, zoom) * 256); var mercY = (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * (Math.pow(2, zoom) * 256); // 在Canvas上绘制定位标记 ctx.beginPath(); ctx.arc(mercX, mercY, 5 * pixelRatio, 0, 2 * Math.PI); ctx.fillStyle = '#ff0000'; ctx.fill(); } ``` 为了响应用户的滚动和缩放操作，需要监听浏览器的`wheel`和`mousemove`事件，实时更新地图的状态并重新绘制。使用HTML5 Canvas和JavaScript，我们可以实现对在线瓦片地图源数据的动态处理，包括地图的重新拼凑、放大缩小以及经纬度定位。通过灵活运用这些技术，开发者可以创建出交互性强、性能优异的地图应用。在实际开发中，还需要考虑性能优化，如缓存已加载的瓦片、预加载相邻瓦片等策略，以提供更流畅的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

map.zip （2个子文件）

map

canvas.html 4KB

map.css 702B

<!DOCTYPE HTML> <html> <head> <meta charset='utf-8'> <link rel="stylesheet" type="text/css" href="map.css"> </head> <body> <canvas id="myCanvas" style="width:100%;height:100%;border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <div class="MapSearch"> <input type="text" placeholder="请输入经度" id="Longtitude" value="114"> <input type="text" placeholder="请输入纬度" id="Latitude" value="38"> <input type="button" id="searchButton" value="确认" onclick="ToCenter()"> <input type="range" min="0" max="17" step="1" value="10" onchange="ToChange()" id="Range"> </div> <script type="text/javascript"> var level=document.getElementById("Range").value; //地图层级 var LngLat={x:114.514864,y:38.04232}; //输入经纬度 var Tile={x:0,y:0}; //经纬度转瓦片编号 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); w = c.width = window.innerWidth; //屏幕宽度 h = c.height = window.innerHeight; //屏幕高度 cxt.fillStyle="white"; cxt.fillRect(0,0,w,h); var centerX=w/2-128; //中心瓦片x轴位置 var centerY=h/2-128; //中心瓦片y轴位置 var totX=2*Math.floor(centerX/256)+1; //计算累计横向瓦片个数 var totY=2*Math.floor(centerY/256)+1; //计算累计纵向瓦片个数 function LngToTile() //经纬度转瓦片行列号 { var n = Math.pow(2, level); Tile.x = Math.floor(((parseFloat(LngLat.x) + 180)/360) * n);//瓦片行号 var temp = Math.log(Math.tan(LngLat.y * Math.PI / 180) + 1 / Math.cos(LngLat.y * Math.PI / 180)); Tile.y = Math.floor((1 / 2 - temp / (2 * Math.PI)) * n);//瓦片列号 return Tile; }; function LoadImageUrl(img,level,x,y) //获取瓦片地图url { img.src="http://a.tile.openstreetmap.org/"+level+"/"+x+"/"+y+".png"; }; function LoadTile(x,y) //获取瓦片地图并绘制在屏幕上 { img=new Image(); LoadImageUrl(img,level,x,y); if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 cxt.drawImage(img,256*(x-Tile.x)+centerX,256*(y-Tile.y)+centerY); return; // 直接返回，不用再处理onload事件 } img.onload = function () { cxt.drawImage(this,256*(x-Tile.x)+centerX,256*(y-Tile.y)+centerY); }; } function ToCenter() { LngLat.x=document.getElementById("Longtitude").value; LngLat.y=document.getElementById("Latitude").value; LngToTile(); //计算经纬度对应的行列号 var TotTileX = Math.pow(2, level); //判断该层级下瓦片能否铺满整个屏幕 if(TotTileX<totX ) { //无法铺满 for (var m = 0; m < TotTileX; m++) { for (var n = 0; n < TotTileX; n++) { LoadTile(m,n); } } } else //可以铺满 { for (var m = -1; m < totX+1; m++) { for (var n = -1; n < totY+1; n++) { LoadTile(Tile.x+(m-Math.floor(centerX/256)),Tile.y+(n-Math.floor(centerY/256))); } } } }; function ToChange() //放大缩小地图 { level=document.getElementById("Range").value; var TotTileX = Math.pow(2, level); //判断该层级下瓦片能否铺满整个屏幕 if (TotTileX<totY||TotTileX<totX )//若不能 { cxt.clearRect(0,0,w,h); //清空画布 } LngToTile(); ToCenter(); } ToCenter(); </script> </body> </html>

评论收藏

内容反馈

铃舟BXVII

2023-08-01

很好的底层代码，比想象的好用很多，楼上感觉是黑子！！！ #注释完整 #全网独家 #内容详尽 #运行顺畅 #完美解决问题
舞者678

2018-05-05

一般吧，和想象的不一样

dailleson_
上传者
2018-11-26

这个是模拟地图加载的底层实现？你想象的是指？