谷歌地图瓦片相关操作(js,google Maps v3)

前段时间,由于工作原因,研究了谷歌地图的瓦片相关操作。已知一个点的经纬度和地图级别,获取该点所在的瓦片的url;已知一个瓦片的url,计算该瓦片左上角经纬度;已知一个点经纬度和地图级别,计算这个点在世界地图上的像素值。

1、已知一个点的经纬度和地图级别,获取该点所在的瓦片的url

参考了两篇博客:这个博客(http://blog.csdn.net/lijun_xiao2009/article/details/8178578)中的原理,但是使用到的公式太难算了,就结合了另一篇博客(http://blog.csdn.net/zhaobmox/article/details/1253005)里面的运算。

//管理瓦片路径
function CalculationUrl(Val_lat,Val_lng)
{
	Val_lng = parseFloat(Val_lng);
	Val_lat = parseFloat(Val_lat);

	var Val_zoom = MapAttr.CUTZOOM;//地图级别,设置为了全局变量
	var zoomN = Math.pow(2,Val_zoom);

	var x = CalculationLng(Val_lng);
	var y = CalculationLat(Val_lat);
	//UrlDiv
	var url_x = x*zoomN;
	var url_y = y*zoomN;

	return [Math.floor(url_x),Math.floor(url_y)];

}

//根据经度计算瓦片x值
function CalculationLng(lng)
{
	var x = (180.0 + parseFloat(lng)) / 360.0;
	return x;
}

//根据纬度计算瓦片y值
function CalculationLat(lat)
{
	var PI = Math.PI;//3.1415926535897;
	var y = -parseFloat(lat) * PI / 180;
	y = 0.5 * Math.log((1+Math.sin(y)) / (1 - Math.sin(y)));
	y *= 1.0/(2 * PI);
	y += 0.5;
	return y;
}

将得到的数据拼成“.../‘+zoom+‘/‘+x+‘/‘+y+‘.png‘”,zoom是地图级别,xy是刚才计算出来的数据。

2、已知一个瓦片的url,计算该瓦片左上角经纬度

参考了博客:http://www.cnblogs.com/Tangf/archive/2012/04/07/2435545.html

function CalculationLatlng(x,y)
{
	var PI = Math.PI;
	var zoomN = Math.pow(2,MapAttr.CUTZOOM);//地图级别,设置为全局变量

	var lng = x/zoomN*360.0-180.0;
	var a = PI*(1-2*y/zoomN);
	var e = Math.E;
	var rad = (Math.pow(e,a)-Math.pow(e,-a))*0.5
	var latrad = Math.atan(rad);
	var lat = latrad*180.0/PI;
	return {"lat":lat,"lng":lng};
}

3、已知一个点经纬度和地图级别,计算这个点在世界地图上的像素值

参考了百度文库:http://wenku.baidu.com/link?url=LG31kM26TJHtYTmBkWMQ92lNEu7P-aUKEowFrEj62Rbsgrc7SiVe9vk2RQ64Sk0dlMvfs1zeiDMx44skLxVZYcT_nJw2guhJQyXksXBvmaK

//计算一个点的在世界地图上的像素值
function CalculationPixelDistance(lat,lng)
{
	var zoom = MapAttr.CUTZOOM;<span style="font-family: Arial, Helvetica, sans-serif;">//地图级别,设置为全局变量</span>

	//该坐标相对世界地图的第一片瓦片的像素
	var X = lngToPixel_x(lng,zoom);
	var Y = latToPixel_y(lat,zoom);

	return {x:Math.floor(X),y:Math.floor(Y)};
}

//根据经度计算x像素值
function lngToPixel_x(lng,zoom)
{
	return (lng+180)*(256<<zoom)/360;
}

//根据纬度计算y像素值
function latToPixel_y(lat,zoom)
{
	var siny = Math.sin(lat*Math.PI/180);
	var y = Math.log((1+siny)/(1-siny))
	return (128<<zoom)*(1-y/(2*Math.PI));
}
时间: 2024-10-24 14:14:49

谷歌地图瓦片相关操作(js,google Maps v3)的相关文章

百度与谷歌地图瓦片组织方式对比

转自http://www.cnblogs.com/janehlp/archive/2012/08/27/2658106.html 百度是从中心点经纬度(0,0)度开始计算瓦片,在第1级时百度将世界地图分为4块. 中心点右上部分(中国地区)占1块. 谷歌是从左上角经纬度(-180,90)度开始计算瓦片,在第1级时谷歌将世界地图分为1块. 在第2级时,百度地图(中心点右上部分)分为2块, 这是因为在这级百度的地图分辨率为65536米/像素,分辨率=math.pow(2,(18 - n)). WGS8

谷歌地图瓦片转百度地图瓦片

//4个数组为从1-18级逐级对应,如发现转换对应不上可以逐级自己修改对应的X,Y编号,此套编码对应四川甘孜州地区. package com.ly.baidu.tools; import java.io.File; public class GoogleToBaidu { static int[] baiduX = { 0, 0, 1, 3, 6, 12, 24, 49, 98, 197, 395, 790, 1581, 3163, 6327, 12654, 25308, 50617 }; st

谷歌地图根据条件画轨迹

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script s

谷歌地图

谷歌地图的api: https://developers.google.com/maps/documentation/javascript/ init () { let _this = this _this.center.LATITUDE = parseFloat(_this.center.LATITUDE) _this.center.LONGITUDE = parseFloat(_this.center.LONGITUDE) this.map = new google.maps.Map(doc

google maps js v3 api教程(1) -- 创建一个地图

原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前,我们进入 Google Developers Console创建一个key,用于我们开发地图的身份验证(当然,没有key也可以进行接下来的教程) 创建一个简单的地图: <!DOCTYPE html> <html> <head> <title>Simple Ma

google maps js v3 api教程(2) -- 在地图上添加标记

原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图之后,怎么往地图上添加标记呢? google为我们提供了google.maps.Marker这个构造函数,来创建标记. 这个函数有一个object类型的可选参数,常用的成员有: { position: new google.maps.LatLng(lat,lng), //标记的经纬度 map:map

谷歌地图,国内使用Google Maps JavaScript API,国外业务

目前还是得墙 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple markers</title> <style> html, body

Google Map Api 谷歌地图接口整理

一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. 2.API 密钥只对网站目录或者域有效.对不同域的网页,需要用这些域分别注册不同的密钥 2.页面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcde

MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储.详情请参考:MBTiles移动存储简介.       在WEB地图介绍中我们看到,瓦片是参照了他们的z/x/y 形式坐标,在磁盘存储上,他们通常存储在以z.x为名字上的目录中,这样就有一个瓦片文件路径是0/0/0.png. 同样用谷歌或百度地图JS API很方便调用.但是有个缺点就是文件多了,暂用磁