<!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>
