leaflet 加载天地图及坐标系设置

原创已于 2024-08-22 15:26:53 修改 · 3.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#leaflet

于 2023-12-06 17:13:48 首次发布

leaflet 专栏收录该内容

22 篇文章

订阅专栏

1. leaflet加载天地图效果图：卫星图路网图

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
  <style>
    #map {
      position: absolute;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div id='map'>
  </div>
  <script>
    var basemapLayer0 = L.tileLayer('http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer1 = L.tileLayer('http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer2 = L.tileLayer('http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=8899fd3e86aa994f71465b1c56a98727',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer3 = L.tileLayer('http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=174705aebfe31b79b3587279e211cb9a',
      {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
    var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);
    let map = L.map('map', {
      preferCanvas: true,
      crs: L.CRS.EPSG4326,
      layers: [basemap1],
      zoomControl: false,
      attributionControl: false,
      doubleClickZoom: false,
      editable: true//绘制控件
    }).setView([29.592024, 106.231126], 13);
  </script>
</body>

</html>

2.自定义坐标系

leaflet里面内置了3857和4326，而其他的坐标系都需要我们自定义。

这里我们需要引入leaflet插件Proj4Leaflet，来实现功能，具体步骤如下。
第一步，下载插件引入。
第二步，在http://epsg.io中搜索要加载的坐标系如4490。
第三步，把对应的参数复制粘贴出来，填入对应属性。如下图（Export选择PROJ.4，截图没有截全）

有同学要问resolutions是什么？是比例尺参数，不懂的话可以直接复制粘贴就好或者让发布图层服务的人提供。

L.CRS.EPSG3415 = new L.Proj.CRS('EPSG:3415',
    '+proj=lcc +lat_1=18 +lat_2=24 +lat_0=21 +lon_0=114 +x_0=500000 +y_0=500000 +ellps=WGS72 +towgs84=0,0,1.9,0,0,0.814,-0.38 +units=m +no_defs',
    {
        resolutions: (function () {
            var level = 17
            var res = []
            res[0] = Math.pow(2, level)
            for (var i = 1; i < level - 5; i++) {
                res[i] = Math.pow(2, (level - i))
            }
            return res
        }()),
        origin: [2752609.29, -11909708.50],
        bounds: L.bounds([14068705.421709407, -29736152.4826897], [-16397006.661909804, 30735400.422382265])
    })

定义4490坐标系

var crs = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
    resolutions: [
      0.7031250000000002,
      0.3515625000000001,
      0.17578125000000006,
      0.08789062500000003,
      0.043945312500000014,
      0.021972656250000007,
      0.010986328125000003,
      0.005493164062500002,
      0.002746582031250001,
      0.0013732910156250004,
      0.0006866455078125002,
      0.0003433227539062501,
      0.00017166137695312505,
      0.00008583068847656253,
      0.000042915344238281264,
      0.000021457672119140632,
      0.000010728836059570316,
      0.000005364418029785158,
    ],
    origin: [-180.0, 90.0],
    bounds: L.bounds([104.89241326501445, 28.023848898882306], [110.52756907131726, 32.31329585591868])
  })

let map  = L.map(divId, {
    maxZoom: 24,
    zoom: 13,   //缩放比列
    crs,
    zoomControl: false, //禁用 + - 按钮
    doubleClickZoom: false,  // 禁用双击放大
    attributionControl: false  // 移除右下角leaflet标识sxx
  })

到此地图初始化工作完毕。Leaflet方便的一点是，向地图添加矢量数据（例如marker，Polyline等），坐标如果是4326的经纬度，会自动转换坐标系。