L7
L7 copied to clipboard
mapbox 地图, 小于12级时, 绘制面 l7位置有偏移
问题描述
mapbox 地图, 小于等于12级时, 绘制面 l7位置有偏移明显(绘制线有同样的问题)
黄色为mapbox面, 绿色为l7绘制的面
完整代码如下(需要替换下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
Hi @luoxiao-supermap, Please star this repo if you find it useful! Thanks :star:! 你好 @luoxiao-supermap。如果该仓库对你有用,可以 star 一下,感谢你的 :star:!
这个相对地图坐标系的问题,可以提供一个 codesanbox 在线的demo
这个相对地图坐标系的问题,可以提供一个 codesanbox 在线的demo
https://codesandbox.io/s/zealous-architecture-27jq3z?file=/index.html
fixed https://github.com/antvis/L7/pull/2416