环回地理点 - Javascript

在地图应用开发中，环回地理点是指地图上一个点，当其超出地图边界时，自动回到另一侧形成一个环回效果。在处理地图边界问题和连续性中非常有用。

在 Javascript 中，我们可以使用一些地图库或工具库实现环回地理点的功能。下面以 Leaflet 和 Turf.js 为例，介绍如何实现环回地理点。

Leaflet

Leaflet 是一个强大的开源地图库，提供了很多地图基础组件和工具，支持多种数据源和图层、交互和事件、动画和效果等。在 Leaflet 中实现环回地理点的思路是：

1. 将地图边界定义为一个矩形范围
2. 监听地图移动（move）事件，在移动结束后判断是否有地图范围外的点
3. 将超出地图边界的点根据其位置和边界对应到另一侧，并设置为新的点坐标

实现代码如下：

var map = L.map('map').setView([51.505, -0.09], 13);
var bounds = map.getBounds(); // 获取当前地图范围
var marker = L.marker([51.5, -0.09]).addTo(map); // 创建标记点

map.on('move', function () {
  var newBounds = map.getBounds(); // 获取新的地图范围
  var latLng = marker.getLatLng(); // 获取标记点坐标
  if (!bounds.contains(latLng)) { // 判断标记点是否在地图范围内
    var newLatLng = L.latLng(
      wrap(latLng.lat, bounds.getNorth(), bounds.getSouth()),
      wrap(latLng.lng, bounds.getEast(), bounds.getWest())
    ); // 根据经纬度换算新的坐标
    marker.setLatLng(newLatLng); // 设置标记点新坐标
  }
});

function wrap(value, max, min) {
  var delta = max - min;
  if (delta === 0) {
    return min;
  } else {
    return ((value - min) % delta + delta) % delta + min;
  }
}

上面的代码中，move 事件会在地图移动结束后触发。getBounds() 方法可以获取当前地图的范围边界，getLatLng() 方法可以获取标记点的经纬度坐标。如果标记点坐标在地图范围外，则使用 wrap() 函数将其根据边界对应到另一侧，并设置为新的坐标。

Turf.js

Turf.js 是一个轻量级的地理空间分析工具库，提供了很多地理运算和操作函数，支持多种数据结构和格式、属性和坐标系等。在 Turf.js 中实现环回地理点的思路是：

1. 将地图边界转为 Feature 和 BBox 格式
2. 将点坐标转为 Feature 格式
3. 使用 bboxClip() 函数处理点和边界的交集，返回新的点 Feature

实现代码如下：

var bbox = turf.bboxPolygon([-180, -90, 180, 90]); // 定义整个地球的矩形边界
var marker = turf.point([0, 0]); // 创建标记点

map.on('move', function () {
  var bounds = map.getBounds(); // 获取当前地图范围
  var bbox2 = turf.bboxPolygon([ // 根据地图范围定义边界
    bounds.getWest(),
    bounds.getSouth(),
    bounds.getEast(),
    bounds.getNorth(),
  ]);
  var marker2 = turf.transformTranslate(marker, // 将标记点转为 Feature
    turf.length(turf.lineSlice(turf.point([bounds.getWest(), 0]), turf.point([bounds.getEast(), 0])), // 路径长度
    0
  );
  var intersection = turf.bboxClip(marker2, bbox2); // 计算边界和点的交集
  marker = intersection.features.length ? intersection.features[0] : marker; // 获取新的点或保留原点
});

上面的代码中，bboxPolygon() 函数可以将 [w,s,e,n] 格式的矩形边界转为 Feature 格式，以便使用 Turf.js 的函数进行处理。point() 函数可以将 [lng,lat] 格式的点坐标转为 Feature 格式。

transformTranslate() 函数可以像 CSS 中的 translate() 函数一样对点进行平移操作，并返回新的点 Feature。

lineSlice() 函数可以计算两点之间的直线段，并返回线段 Feature。

bboxClip() 函数可以计算边界和点的交集，并返回新的点 Feature。

结语

以上就是使用 Leaflet 和 Turf.js 实现环回地理点的方法。在实际开发中，应根据自己的需求和场景选择适合的库或方法，灵活运用，提高地图应用的效率和体验。