返回

Leaflet加载不同投影瓦片地图，多坐标系地图融合利器！

前端

一、Leaflet简介

Leaflet是一个轻量级、开源的JavaScript库，用于构建交互式地图。它易于使用，即使是初学者也可以快速上手。Leaflet支持多种地图投影，包括常见的Web墨卡托投影、球面墨卡托投影和大地2000投影等。

二、瓦片地图简介

瓦片地图是一种将地图图像预先切分成小方块（称为瓦片）并存储在服务器上的地图格式。当用户访问地图时，地图客户端会向服务器请求所需的瓦片，并将其拼合在一起以显示地图。瓦片地图的优势在于加载速度快、占用带宽少，因此非常适合用于Web地图开发。

三、不同投影的瓦片地图加载

在使用Leaflet加载不同投影的瓦片地图时，需要对瓦片地图进行投影转换。投影转换是指将一种投影坐标系下的数据转换为另一种投影坐标系下的数据。Leaflet提供了多种投影转换方法，以便用户能够加载不同投影的瓦片地图。

四、示例代码

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 400px;"></div>

  <script>
    // 创建地图对象
    var map = L.map('map').setView([30.2869, 120.1639], 13);

    // 加载Web墨卡托投影的瓦片地图
    var webMercatorLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // 加载大地2000投影的瓦片地图
    var wgs84Layer = L.tileLayer('http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9c50779582104f64782958809453d51c', {
      projection: L.CRS.EPSG4490,
      attribution: 'Data by <a href="http://www.tianditu.com/">天地图</a>'
    }).addTo(map);

    // 设置地图的CRS
    map.setCRS(L.CRS.EPSG4326);

    // 添加图层控制
    L.control.layers({
      "Web墨卡托投影": webMercatorLayer,
      "大地2000投影": wgs84Layer
    }).addTo(map);
  </script>
</body>
</html>

五、结语

Leaflet是一款功能强大、易于使用的地图开发工具。通过使用Leaflet，我们可以轻松加载不同投影的瓦片地图，并将其融合在一个地图中进行展示。这为我们提供了极大的便利，让我们能够更加灵活地处理不同坐标系的地图数据。