使用leaflet组件库和高德瓦片地图如何火星坐标系GCJ02转地球坐标系WGS84

要在Leaflet组件库中使用高德瓦片地图，并将火星坐标系GCJ02转换为地球坐标系WGS84，可以按以下步骤进行操作：

在HTML文件中添加必要的库文件和样式表链接：

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet with AMap Tile Layer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
  <div id="map" style="height: 400px;"></div>
</body>
</html>

在JavaScript文件中编写Leaflet代码：

// 创建地图容器
var map = L.map('map').setView([39.9075, 116.39723], 13);

// 添加高德瓦片地图图层
L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
  attribution: '© <a href="https://www.amap.com/">高德地图</a>',
  tileSize: 256,
  zoomOffset: -1,
  subdomains: ['webst01', 'webst02', 'webst03', 'webst04']
}).addTo(map);

// 定义火星坐标系GCJ02转换为地球坐标系WGS84的方法
function transformGCJ02ToWGS84(latlng) {
  var lng = latlng.lng;
  var lat = latlng.lat;
  var a = 6378245.0;
  var ee = 0.00669342162296594323;
  var dLat = transformLat(lng - 105.0, lat - 35.0);
  var dLng = transformLng(lng - 105.0, lat - 35.0);
  var radLat = lat / 180.0 * Math.PI;
  var magic = Math.sin(radLat);
  magic = 1 - ee * magic * magic;
  var sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
  dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
  var mgLat = lat + dLat;
  var mgLng = lng + dLng;
  return L.latLng(mgLat, mgLng);
}

function transformLat(x, y) {
  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
  ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
  return ret;
}

function transformLng(x, y) {
  var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
  return ret;
}

// 添加测试点
var gcj02LatLng = L.latLng(39.9075, 116.39723);
var wgs84LatLng = transformGCJ02ToWGS84(gcj02LatLng);
L.marker(gcj02LatLng).addTo(map).bindPopup('GCJ02: ' + gcj02LatLng.toString());
L.marker(wgs84LatLng).addTo(map).bindPopup('WGS84: ' + wgs84LatLng.toString());

在上述代码中，transformGCJ02ToWGS84函数用于将火星坐标系GCJ02转换为地球坐标系WGS84。然后，创建地图容器并添加高德瓦片地图图层。最后，添加测试点并将其标记在地图上。

注意：上述代码中的transformGCJ02ToWGS84函数是一种近似转换方法，可能存在一定的误差。如果需要更高精度的坐标转换，可以考虑使用其他库或API

使用leaflet组件库和高德瓦片地图如何火星坐标系GCJ02转地球坐标系WGS84