maptalks / maptalks.js

A light and plugable JavaScript library for integrated 2D/3D maps.
https://maptalks.org
BSD 3-Clause "New" or "Revised" License
4.3k stars 503 forks source link

offset gcoord底图纠偏出现偏差 #2336

Open Beats0 opened 4 months ago

Beats0 commented 4 months ago

maptalks's version and what browser you use?

maptalks v1.0.0-rc.33

Issue description

将百度地图和天地图叠加在一起并通过offset gcoord纠偏为wgs84坐标类型,发现重叠后有偏差,拖动后偏差会变大,不知道有没有好的解决方案

Please provide a reproduction URL (on any jsfiddle like site)

image

image

image

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瓦片叠加</title>
<style type="text/css">
    html, body {
        margin: 0px;
        height: 100%;
        width: 100%
    }

    .container {
        width: 100%;
        height: 100%
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/gcoord/dist/gcoord.global.prod.js"></script>
<body>
<div id="map" class="container"></div>

<script>
  const map = new maptalks.Map('map', {
    center: [120.05391845823735, 30.340233166417452],
    zoom: 18,
    minZoom: 1,
    maxZoom: 19,
    pitch: 0,
    seamlessZoom: false,
    spatialReference: {
      projection: maptalks.projection.EPSG4326,
    },
    baseLayer: new maptalks.TileLayer('road', {
      tileSystem: [1, -1, -180, 90],
      urlTemplate: 'http://t{s}.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=de0dc270a51aaca3dd4e64d4f8c81ff6',
      subdomains: ['1', '2', '3', '4', '5'],
      attribution: '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
    }),
    layers: [
      new maptalks.TileLayer('baidu', {
        spatialReference: {
          projection: maptalks.projection.BAIDU,
        },
        opacity: 0.6,
        'urlTemplate': `https://maponline{s}.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20210914`,
        'subdomains': [0, 1, 2, 3],
        'attribution': '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>',
        offset: function (z) {
          const map = this.getMap();
          const center = map.getCenter();
          const c = gcoord.transform(
            center.toArray(),
            gcoord.BMap,
            gcoord.WGS84,
          );
          const offset = map
            .coordToPoint(center, z)
            .sub(map.coordToPoint(new maptalks.Coordinate(c), z));
          return offset._round().toArray();
        },
      })
    ]
  });
</script>
</body>
</html>
ipcjs commented 3 months ago

offset是用地图的中心点来计算的,必然出现偏移

bd09和gcj02对坐标点的偏移是没有规律的,按理来说应该没办法对底图做映射?