Leaflet加载高德瓦片到WGS84坐标系下

最新推荐文章于 2024-08-23 08:52:21 发布

才华横溢吴道简

最新推荐文章于 2024-08-23 08:52:21 发布

阅读量3k

点赞数 1

分类专栏： GIS算法 WEBGIS

本文链接：https://blog.csdn.net/sinat_41310868/article/details/115671247

版权

本文介绍了如何将高德的矢量和影像底图转换到WGS84坐标系下，并与其他地图如OSM、天地图进行叠加，确保图层之间的准确套合。通过调整瓦片中心点，实现了小于瓦片层级像素分辨率的误差，满足视觉上的匹配需求。

摘要由CSDN通过智能技术生成

效果如下图，高德矢量底图、影像底图、OSM地图、天地图影像底图，坐标系都统一到WGS84坐标系下，复选框有注记图层和半透明底图图层。

对图层进行叠加，能看出，纠正后的高德影像底图与OSM路网是套合的，说明瓦片中心点的平移，就能满足误差小于瓦片层级的像素分辨率，既误差在可见之内，那就够了。

代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>高德-OSM-天地图瓦片对比</title>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>

    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>

    <style>

    body {

        padding: 0;

        margin: 0;

    }

    html,

    body,

    #map {

        height: 100%;

        width: 100%;

    }

    </style>

</head>



<body>

    <div id="map"></div>

</body>

<script>

var tiandituKey='44964a97c8c44e4d04efdf3cba594467';

var gaodeNormalMapUrl = 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',

    gaodeSatelliteMapUrl = 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',

    gaodeAnnotionMapUrl = 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',

    osmNormalMapUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',

    tiandituSatelliteMapUrl = 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk='+tiandituKey,

    tiandituAnnotionMapUrl = 'http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&X