leaflet加载天地图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了leaflet加载天地图相关的知识，希望对你有一定的参考价值。
参考技术A 调用加载图层试了试网上的方法，感觉不靠谱，等我弄懂了再来补。
leaflet-加载天地图-解决纬度偏移特别大
这几天学习leaflet在加载天地图时将以前的接口拿来用结果偏差了特别大（差不多是90度），中国纬度到了100多，试了改变投影和y轴翻转的配置都不好使，最后上网搜索到了Leaflet.ChineseTmsProviders（MapGIS的示例也是用的它）查看他的用法发现我用的天地图接口和它不一样，改成它的接口就不会出现纬度偏移特别大的问题了（到现在也没有搜到cva_w和vec_c这两个接口的区别，CGCS200和WGS48么？那也差不了那么多啊！以后找到区别再写上来吧）
正常的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script>
var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}‘, {
subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘],
});
stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}‘, {
subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘]
});
var map = L.map("mapid", {
center: [31.59, 120.29],
zoom: 12,
layers: [normalm],
zoomControl: false
});
stamenLabels.addTo(map);
</script>
</body>
</html>异常的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script>
var normalm = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=vec_c&X={x}&Y={y}&L={z}‘, {
subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘],
});
stamenLabels = L.tileLayer(‘http://t{s}.tianditu.cn/DataServer?T=cva_c&X={x}&Y={y}&L={z}‘, {
subdomains: [‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘7‘]
});
var map = L.map("mapid", {
center: [31.59, 120.29],
zoom: 12,
layers: [normalm],
zoomControl: false
});
stamenLabels.addTo(map);
</script>
</body>
</html>以上是关于leaflet加载天地图的主要内容，如果未能解决你的问题，请参考以下文章