leaflet 矢量经纬网格

最新推荐文章于 2024-04-12 14:45:15 发布

Li.map

最新推荐文章于 2024-04-12 14:45:15 发布

阅读量2.8k

点赞数 6

分类专栏： GIS开发文章标签：前端 gis

本文链接：https://blog.csdn.net/u012123612/article/details/121994309

版权

GIS开发专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1. 绘制需求

1）每层级网格像素大小不变，即每层级，网格经纬度距离加密一次；

2）页面顶部和右侧标注经度、纬度值；

3）经纬度值精度随层级变化；

4）尽量避免显示区域外的多余绘制，同时保证拖动时不会出现没有网格的情况；

2. 代码实现

1）确定网格线间隔，经线范围：-180~180；纬线：-90~90；

间隔值应当为180、90的公约数，这样能保证过0°经线；比如：

1级：-180、-90、0、90、180

2级：-180、-135、-90、-45、0、45、90、135、180

......

        let zoom = map.getZoom();
        // 经纬度间隔
        let d = 90 / Math.pow(2, zoom - 1);

2) 只绘制当前视野内的线

3）在边界上添加标注

        let zoom = map.getZoom();
        let bounds = map.getBounds();
        let north = bounds.getNorth();
        let east = bounds.getEast();
        // 经纬度间隔
        let d = 90 / Math.pow(2, zoom - 1);
        // 经线网格
        for (let index = -180; index <= 360; index += d) {
          // 判断当前视野内
          if (bounds.contains([north, index])) {
            // 绘制经线
            let lonLine = L.polyline(
              [
                [-90, index],
                [90, index],
              ],
              { weight: 1, color: "blue" }
            );
            lonLatGridLineLayer.addLayer(lonLine);
            // 标注
            let text = index.toFixed(1) + "°";
            // 动态计算小数位数
            if (zoom > 10) {
              text = index.toFixed((zoom - 8) / 2) + "°";
            }
            let divIcon = L.divIcon({
              html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
              iconAnchor: [0, -5],
            });
            let textMarker = L.marker([north, index], { icon: divIcon });
            lonLatGridLineLayer.addLayer(textMarker);
          }
        }

4）缩放和拖动事件，重绘网格

      map.on("zoomend move", () => {
        lonLatGridLineLayer.clearLayers();
        addLonLatLine();
      });

3.全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <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>

    <title>leaflet-经纬网格</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .leaflet-div-icon {
        background: none;
        border: none;
      }
    </style>
  </head>

  <body>
    <div id="map" style="height: 100%; width: 100%"></div>

    <script>
      let map = L.map("map", { renderer: L.canvas({ padding: 0.5 }) }).setView(
        [25.127879288597576, 118.37905883789064],
        4
      );
      // 添加背景图层
      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);

      // 创建图层
      let lonLatGridLineLayer = L.featureGroup().addTo(map);
      // 经纬网格生成方法
      let addLonLatLine = () => {
        let zoom = map.getZoom();
        let bounds = map.getBounds();
        let north = bounds.getNorth();
        let east = bounds.getEast();
        // 经纬度间隔
        let d = 90 / Math.pow(2, zoom - 1);
        // 经线网格
        for (let index = -180; index <= 360; index += d) {
          // 判断当前视野内
          if (bounds.contains([north, index])) {
            // 绘制经线
            let lonLine = L.polyline(
              [
                [-90, index],
                [90, index],
              ],
              { weight: 1, color: "blue" }
            );
            lonLatGridLineLayer.addLayer(lonLine);
            // 标注
            let text = index.toFixed(1) + "°";
            // 动态计算小数位数
            if (zoom > 10) {
              text = index.toFixed((zoom - 8) / 2) + "°";
            }
            let divIcon = L.divIcon({
              html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
              iconAnchor: [0, -5],
            });
            let textMarker = L.marker([north, index], { icon: divIcon });
            lonLatGridLineLayer.addLayer(textMarker);
          }
        }
		if(d>90)d=90;
        // 纬线网格
        for (let index = -90; index <= 90; index += d) {
          if (bounds.contains([index, east])) {
            let lonLine = L.polyline(
              [
                [index, -180],
                [index, 360],
              ],
              { weight: 1, color: "blue" }
            );
            lonLatGridLineLayer.addLayer(lonLine);
            // 标注
            let text = index.toFixed(1) + "°";
            if (zoom > 10) {
              text = index.toFixed((zoom - 8) / 2) + "°";
            }
            let divIcon = L.divIcon({
              html: `<div style="white-space: nowrap;color:red;">${text}</div>`,
              iconAnchor: [(text.length + 1) * 6, 0],
            });
            let textMarker = L.marker([index, east], { icon: divIcon });
            lonLatGridLineLayer.addLayer(textMarker);
          }
        }
      };
      addLonLatLine();
      map.on("zoomend move", () => {
        lonLatGridLineLayer.clearLayers();
        addLonLatLine();
      });
    </script>
  </body>
</html>

Li.map

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
leaflet 矢量经纬网格

1. 绘制需求1）每层级网格像素大小不变，即每层级，网格经纬度距离加密一次；2）页面顶部和右侧标注经度、纬度值；3）经纬度值精度随层级变化；4）尽量避免显示区域外的多余绘制，同时保证拖动时不会出现没有网格的情况；2. 代码实现1）确定网格线间隔，经线范围：-180~180；纬线：-90~90；间隔值应当为180、90的公约数，这样能保证过0°经线；比如：1级：-180、-90、0、90、1802级：-180、-135、-90、-45、0、45、90、...
复制链接

扫一扫