maptalks.js
maptalks.js copied to clipboard
Published
20 hours ago •
maptalks
maptalks
offset gcoord底图纠偏出现偏差
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)
<!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: '© <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': '© <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>
