通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片
2024-05-11 06:52:05
直接复制代码放到本地运行即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>根据经纬度坐标获取对应的切片算法</title>
</head>
<script>function getPoints2() {var topTileFromX = -180;var topTileFromY = 90;var tdtScale = {18: 5.36441802978515E-06,17: 1.07288360595703E-05,16: 2.1457672119140625E-05,15: 4.29153442382814E-05,14: 8.58306884765629E-05,13: 0.000171661376953125,12: 0.00034332275390625,11: 0.0006866455078125,10: 0.001373291015625,9: 0.00274658203125,8: 0.0054931640625,7: 0.010986328125,6: 0.02197265625,5: 0.0439453125,4: 0.087890625,3: 0.17578125,2: 0.3515625,1: 0.703125};var strList = document.getElementById("content").value;var oStringList = strList.split(',');var level = oStringList[0];var lon = oStringList[1];var lat = oStringList[2];var coef = tdtScale[level] * 256;var x_num = Math.round((lon - topTileFromX) / coef);var y_num = Math.round((topTileFromY - lat) / coef);// var dir = "http://t7.tianditu.com/DataServer?T=vec_c&";// var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num);var dir = "http://t1.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&";var server = "TILEMATRIX=" + String(level) + "&" + "TILEROW=" + String(y_num) + "&" + "TILECOL=" + String(x_num) + "&FORMAT=tiles";var imageDir = dir + server;// alert(imageDir);var imgDiv = document.getElementById("map");imgDiv.style.backgroundImage = "url(" + imageDir + ")";}function lon2Mercator(px) {var x = px * 20037508.3427892 / 180;return x;}function lat2Mercator(py) {var y;y = Math.log(Math.tan((90 + py) * Math.PI / 360)) / (Math.PI / 180);y = y * 20037508.3427892 / 180;return y;}function getPoints3() {var topTileFromX = -20037508.3427892;var topTileFromY = 20037508.3427892;var tdtScale = {18: 0.597164283559817,17: 1.19432856685505,16: 2.38865713397468,15: 4.77731426794937,14: 9.55462853563415,13: 19.1092570712683,12: 38.2185141425366,11: 76.4370282850732,10: 152.8740565704,9: 305.7481128,8: 611.49622628138,7: 1222.99245256249,6: 2445.98490512499,5: 4891.96981024998,4: 9783.93962049996,3: 19567.8792409999,2: 39135.7584820001,1: 78271.5169639999};var strList = document.getElementById("content").value;var oStringList = strList.split(',');var level = oStringList[0];var lon = oStringList[1];var lat = oStringList[2];lon = lon2Mercator(parseFloat(lon));lat = lat2Mercator(parseFloat(lat));var coef = tdtScale[level] * 256;var x_num = Math.round((lon - topTileFromX) / coef);var y_num = Math.round((topTileFromY - lat) / coef);// var dir = "http://t7.tianditu.com/DataServer?T=vec_c&";// var server = "l="+String(level)+"&"+"x="+String(x_num)+"&"+"y="+String(y_num);//var dir = "http://t0.tianditu.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&STYLE=default&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=c&";// var server = "TILEMATRIX="+String(level)+"&"+"TILEROW="+String(y_num)+"&"+"TILECOL="+String(x_num)+"&FORMAT=tiles";var dir = "http://t0.tianditu.com/DataServer?T=vec_w&";var server = "l=" + String(level) + "&" + "x=" + String(x_num) + "&" + "y=" + String(y_num);var imageDir = dir + server;var imgDiv = document.getElementById("map");imgDiv.style.backgroundImage = "url(" + imageDir + ")";}function getPoints4() {var topTileFromX = -20037508.3427892;var topTileFromY = 20037508.3427892;var tdtScale = {18: 0.597164283559817,17: 1.19432856685505,16: 2.38865713397468,15: 4.77731426794937,14: 9.55462853563415,13: 19.1092570712683,12: 38.2185141425366,11: 76.4370282850732,10: 152.8740565704,9: 305.7481128,8: 611.49622628138,7: 1222.99245256249,6: 2445.98490512499,5: 4891.96981024998,4: 9783.93962049996,3: 19567.8792409999,2: 39135.7584820001,1: 78271.5169639999};var strList = document.getElementById("content").value;var oStringList = strList.split(',');var level = oStringList[0];var lon = oStringList[1];var lat = oStringList[2];lon = lon2Mercator(parseFloat(lon));lat = lat2Mercator(parseFloat(lat));var coef = tdtScale[level] * 256;var x_num = Math.round((lon - topTileFromX) / coef);var y_num = Math.round((topTileFromY - lat) / coef);var dir = "http://a.tile.openstreetmap.org/";var server = String(level) + "/" + String(x_num) + "/" + String(y_num) + ".png";var imageDir = dir + server;var imgDiv = document.getElementById("map");imgDiv.style.backgroundImage = "url(" + imageDir + ")";}function getPoints5() {var topTileFromX = -20037508.3427892;var topTileFromY = 20037508.3427892;var tdtScale = {18: 0.597164283559817,17: 1.19432856685505,16: 2.38865713397468,15: 4.77731426794937,14: 9.55462853563415,13: 19.1092570712683,12: 38.2185141425366,11: 76.4370282850732,10: 152.8740565704,9: 305.7481128,8: 611.49622628138,7: 1222.99245256249,6: 2445.98490512499,5: 4891.96981024998,4: 9783.93962049996,3: 19567.8792409999,2: 39135.7584820001,1: 78271.5169639999};var strList = document.getElementById("content").value;var oStringList = strList.split(',');var level = oStringList[0];var lon = oStringList[1];var lat = oStringList[2];lon = lon2Mercator(parseFloat(lon));lat = lat2Mercator(parseFloat(lat));var coef = tdtScale[level] * 256;var x_num = Math.round((lon - topTileFromX) / coef);var y_num = Math.round((topTileFromY - lat) / coef);var dir = "http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&";var server = "x=" + String(x_num) + "&" + "y=" + String(y_num) + "&" + "z=" + String(level) + "&s=Galil";var imageDir = dir + server;var imgDiv = document.getElementById("map");imgDiv.style.backgroundImage = "url(" + imageDir + ")";document.getElementById('map-text').value = imageDir;}function getPoints6() {var topTileFromX = -20037508.3427892;var topTileFromY = 20037508.3427892;var tdtScale = {18: 0.597164283559817,17: 1.19432856685505,16: 2.38865713397468,15: 4.77731426794937,14: 9.55462853563415,13: 19.1092570712683,12: 38.2185141425366,11: 76.4370282850732,10: 152.8740565704,9: 305.7481128,8: 611.49622628138,7: 1222.99245256249,6: 2445.98490512499,5: 4891.96981024998,4: 9783.93962049996,3: 19567.8792409999,2: 39135.7584820001,1: 78271.5169639999};var strList = document.getElementById("content").value;var oStringList = strList.split(',');var level = oStringList[0];var lon = oStringList[1];var lat = oStringList[2];lon = lon2Mercator(parseFloat(lon));lat = lat2Mercator(parseFloat(lat));var coef = tdtScale[level] * 256;var x_num = Math.round((lon - topTileFromX) / coef);var y_num = Math.round((topTileFromY - lat) / coef);var dir = "https://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=8<ype=11&";var server = "x=" + String(x_num) + "&" + "y=" + String(y_num) + "&" + "z=" + String(level) + "&s=Galil";var imageDir = dir + server;var imgDiv = document.getElementById("map");imgDiv.style.backgroundImage = "url(" + imageDir + ")";document.getElementById('map-text').value = imageDir;}
</script>
<body>
<input id="content" type="text" autocomplete="on" maxlength="100" size="35">
<!--<input type="button" value="获取天地图经纬度" onClick="getPoints2();"/>
<input type="button" value="获取天地图墨卡托" onClick="getPoints3();"/>-->
<input type="button" value="获取OpenstreetMap" onClick="getPoints4();"/>
<input type="button" value="获取谷歌地图" onClick="getPoints5();"/>
<input type="button" value="获取高德地图" onClick="getPoints6();"/>
<div id="map" style="width:256px; height: 256px;"></div>
<input type="text" id="map-text" style=" width: 1000px;">
<script type="text/javascript">document.getElementById("content").value = "13,113.6,34.8";</script>
</body>
</html>
通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片相关推荐
- android java 经纬度（国标WGS84／gps84／硬件/谷歌地球卫星，Gcj02／腾讯地图/高德地图，Bd09／百度地图）之间互换
android java 经纬度(国标WGS84/gps84/硬件/谷歌地球卫星,Gcj02/腾讯地图/高德地图,Bd09/百度地图)之间互换 前言: 由于项目需要,很多时候都需要地图经纬度直接的转换 ...
- ios html调起高德地图,iOS 调用百度地图, 高德地图,苹果自带的地图
在你项目的info.plist添加 LSApplicationQueriesSchemes 为KEY 类型为NSArray;添加对应的白名单 高德:iosamap百度:baidumap - (void ...
- 高德地图获取坐标距离_高德地图获取两个经纬度点间直线距离JS/PHP/SQL代码
最近做了几个小站,要求要定位到当前地址并且显示附近多少公里内的商家和产品. 定位好办,直接用高德地图搞定.有不需要显示地图又需要定位的页面把地图直接隐藏掉都可以.或者可以直接调用高德的定位组件. 但是 ...
- uniapp APPH5端获取地理位置信息（百度地图高德地图）
APP&H5端获取地理位置信息 一.app端 1.在需要使用的页面中 onShow(){//#ifdef APP-PLUS// 获取定位信息this.getLocations();//#end ...
- 小程序 获取当前城市位置-高德地图
微信小程序 wx.getLocation 只能获取到经纬度,想要获取具体城市信息,需要使用地图插件.公司要求使用 高德地图,在使用上,几个地图的代码步骤都差不多. 目录 1. 查看官方文档 1.1 申 ...
- 微信获取位置 转化为 高德地图 位置 地址
从高德地图转到直接使用QQ地图了,留下在微信网页开发中的代码片段 async getLocation () {// 1.获取微信的坐标const { latitude, longitude } = a ...
- 地图名片：百度地图 高德地图 pc 移动端快速实现地图生成、标记以及标注获取链接及代码（霸霸看了都说好）
概述 我们在一些企业网站或移动网页中,都会发现有一个在线地图之类的按钮,点击之后就会出现该企业在百度地图中的位置,而且地图还能放大缩小,甚至还会显现相关的周边信息,比如公车地铁路线等,其实这个就是所谓 ...
- 根据经纬度确定行政区域_使用高德地图api导入行政区域及经纬度
package com.test; import java.util.HashMap; import java.util.Map; import org.json.JSONArray; import ...
- gcoord: 转换WGS84、GCJ02、BD09坐标，解决百度地图高德地图坐标系不统一的问题
做过地图相关开发的同学肯定会遇到这样一个问题:同样的经纬度坐标,在百度地图和高德地图上位置不一样. 关于坐标系 我们通常用经纬度来表示一个地理位置,但是由于一些原因,我们从不同渠道得到的经纬度信息可能 ...
最新文章
- 高并发场景下创建多少线程才合适？一条公式帮你搞定！！
- java中记忆深刻的问题_工作中碰到比较印象深刻的问题（面试必问）
- 从GPT-3到DETR，一起来盘点2020有哪些突破？
- Prometheus — 核心概念
- 服务器无效响应状态码12029,使用wininet发送http请求时出现12029无法与服务器建立连接...
- 方便的图片修改Sql代码
- Pandas索引操作及高级索引——reindex()方法
- python爬虫网页中的图片_Python爬虫爬取一个网页上的图片地址实例代码
- 2016OSC源创会年终盛典-前端技术专场-阴明
- git命令行命令（1）
- matlab 加权残值法,1987_03固体力学加权残值法_10217273.pdf
- 2020-12-10 PMP 群内练习题 - 光环
- bat 一键清理系统垃圾的修改
- 15 种最受欢迎的数据可视化流程图及模板
- latex表格内容上下居中_Latex-表格内容垂直居中
- 硬件工程师实用工具网站
- 苹果各版本手机更换电池的视频
- 5G NR 系统消息
- 饭谈：高手是怎么炼成的？
- 关于微信手机确认登录问题