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

最新推荐文章于 2024-03-14 14:40:48 发布

VIP文章才华横溢吴道简

最新推荐文章于 2024-03-14 14:40:48 发布

阅读量2.7k

点赞数 1

分类专栏： GIS算法 WEBGIS

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

版权

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

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

代码如下：

<!DOCTYPE html>

<html>

<head>

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

    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

    <script src="https://unpkg.com/[email protected]/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.

最低0.47元/天解锁文章

才华横溢吴道简

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Leaflet加载高德瓦片到WGS84坐标系下

效果如下图，高德矢量底图、影像底图、OSM地图、天地图影像底图，坐标系都统一到WGS84坐标系下，复选框有注记图层和半透明底图图层。对图层进行叠加，能看出，纠正后的高德影像底图与OSM路网是套合的，说明瓦片中心点的平移，就能满足误差小于瓦片层级的像素分辨率，既误差在可见之内，那就够了。代码如下：<!DOCTYPE html><html><head> <title>高德-OSM-天地图瓦片对比</title&g...
复制链接

扫一扫