mapbox 地图， 小于12级时， 绘制面 l7位置有偏移

[luoxiao-supermap]

问题描述

mapbox 地图， 小于等于12级时， 绘制面 l7位置有偏移明显（绘制线有同样的问题）
黄色为mapbox面， 绿色为l7绘制的面

完整代码如下(需要替换下accessToken)：
`

<title>创建地图场景</title> <style> ::-webkit-scrollbar { display: none; } html, body { overflow: hidden; margin: 0; } #map { position: absolute; top: 30px; bottom: 0; width: 100%; height: calc(100% - 40px); } </style>

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/@antv/l7"></script>
<script>
  mapboxgl.accessToken =
    'your_token';

  const map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v12', // stylesheet location
    center: [100, 10], // starting position [lng, lat]
    zoom: 12 // starting zoom
  });

  var data = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          name: 'tom'
        },
        geometry: {
          type: 'Point',
          coordinates: [95.899147, 18.088694]
        }
      }
    ]
  };

  const scene = new L7.Scene({
    id: 'map',
    map: new L7.Mapbox({
      mapInstance: map
    })
  });
  window.map = map;

  var data = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [100.06, 10],
              [99.95, 10],
              [100.06, 10.06],
              [100.06, 10]
            ]
          ]
        }
      }
    ]
  };
  const layer2 = {
    id: 'fill',
    type: 'fill',
    source: { type: 'geojson', data },
    paint: {
      'fill-color': 'rgba(255, 255, 0, 1)'
    }
  };
 
  scene.on('loaded', () => {
    const layer = new L7.PolygonLayer().source(data).shape('fill').color('green').style({
      opacity: 0.6
    });
    scene.addLayer(layer);
    console.log('scene-绘制绿色面-------');
  });
  map.on('load', () => {
    map.addLayer(layer2);
    console.log('mapbox-绘制黄色面-------');
  });
</script>

`

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions]

Hi @luoxiao-supermap, Please star this repo if you find it useful! Thanks ⭐!
你好 @luoxiao-supermap。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[lzxue]

这个相对地图坐标系的问题，可以提供一个 codesanbox 在线的demo

[luoxiao-supermap]

这个相对地图坐标系的问题，可以提供一个 codesanbox 在线的demo

https://codesandbox.io/s/zealous-architecture-27jq3z?file=/index.html

[lvisei]

fixed #2416