使用L7加载的线数据与Mapbox加载的线数据叠加存在偏移

@lzxue is already working on this.

Since Apr 21, 2025.

使用L7加载的线数据与Mapbox加载的线数据叠加存在偏移，在较小层级下看不出来，大概到20级别之后，可以明显看到两份线数据图层明显偏移。


可以到这里在线运行示例：https://iclient.supermap.io/examples/mapboxgl/editor.html#01_tiledMapLayer_4490

代码参考：
`

body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}

var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
var tileURL = host + '/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';

var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [tileURL],
tileSize: 256
}
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxzoom: 22
}
]
},
center: [120.15, 30.246],
zoom: 13.5,
});

map.on('load', function () {
// 加载并添加基础路线图层（Mapbox原生）
fetch('https://iclient.supermap.io/web/data/L7/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
.then((res) => res.json())
.then((data) => {
// 添加粗体基础路线
map.addSource('base-route', {
type: 'geojson',
data: data
});

map.addLayer({
id: 'base-route-layer',
type: 'line',
source: 'base-route',
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#1565C0', // 深蓝色
'line-width': 6, // 较粗的线宽
'line-opacity': 0.9,
'line-gap-width': 2 // 为贴图图层留出空间
}
});

// 添加白色边框增强对比度
map.addLayer({
id: 'route-border',
type: 'line',
source: 'base-route',
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': 'white',
'line-width': 8,
'line-opacity': 0.5,
'line-translate': [0, 0]
}
}, 'base-route-layer'); // 确保在基础路线图层下方
});

// 加载L7贴图图层
map.getL7Scene().then((scene) => {
// 使用更醒目的箭头图标
scene.addImage('arrow-highlight', '../img/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg');

fetch('https://iclient.supermap.io/web/data/L7/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
.then((res) => res.json())
.then((data) => {
var layer = new mapboxgl.supermap.L7Layer({ type: 'LineLayer' });
layer
.getL7Layer()
.source(data)
.size(4) // 增大尺寸
.shape('line')
.texture('arrow-highlight')
.color('rgb(255, 215, 0)') // 改为金色箭头
.animate({
interval: 0.8, // 加快动画速度
duration: 0.8,
trailLength: 3 // 增加流线长度
})
.style({
opacity: 0.8, // 提高不透明度
lineTexture: true,
iconStep: 15, // 增大箭头间距
borderWidth: 0.6, // 加粗边框
borderColor: 'rgba(255, 0, 0, 0.7)' // 红色边框增强对比
});
map.addLayer(layer);
});
});
});

`