L7 icon indicating copy to clipboard operation
L7 copied to clipboard

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

Open luoxiao-supermap opened this issue 1 year ago • 3 comments

问题描述

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

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

创建地图场景
<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

luoxiao-supermap avatar Nov 16 '23 06:11 luoxiao-supermap

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

github-actions[bot] avatar Nov 16 '23 06:11 github-actions[bot]

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

lzxue avatar Nov 16 '23 06:11 lzxue

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

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

luoxiao-supermap avatar Nov 16 '23 07:11 luoxiao-supermap

fixed https://github.com/antvis/L7/pull/2416

lvisei avatar May 15 '24 03:05 lvisei