EPSG:4326的底图和baidu坐标系的底图不能重叠

AWUEE commented 5 years ago

效果图 (https://user-images.githubusercontent.com/52706228/60890926-e276c100-a28e-11e9-9274-525daf666e08.png)

代码：

        const map = new maptalks.Map('map', {
            center: [120, 30.4],
            zoom: 12,
            minZoom: 11,
            maxZoom: 19,
            pitch: 40,
            spatialReference: {
                projection: 'EPSG:4326'
            },

            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: '&copy; <a target="_blank" href="http://www.tianditu.cn">Tianditu</a>'
                }),
            layers: [
                new maptalks.TileLayer('base1', {
                    spatialReference: {
                        projection: 'BAIDU',
                    },
                    opacity: 0.7,
                    'urlTemplate': "/api/v2/maptile/{z}/{y}/{x}.png",//百度地图
                    'attribution': '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>',
                })
            ]
        });

fuzhenn commented 5 years ago

这个是因为百度地图用的是bd09ll坐标系，天地图是cgcs2000坐标系，两个坐标系有偏转造成的。你需要设置动态计算cgcs2000(相当于wgs84)和bd09ll之间的差异值，然后动态设置tilelayer的offset即可。

示例： https://jsfiddle.net/czty0qwu/

AWUEE commented 5 years ago

感谢您的帮助，这个问题卡住好几天了

liuhz1994 commented 4 years ago

https://jsfiddle.net/czty0qwu/ 这个示例现在访问不了了，别的地方可以看到嘛？

fuzhenn commented 4 years ago

@liuhz1994 帮你把代码贴在这里了，其中调用的maptalks.CRSTransform.transform在这里


    const map = new maptalks.Map('map', {
      "center":[121.50743103027344,31.24734310997107],"zoom":16,"pitch":0,"bearing":0,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate : 'http://webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        subdomains  : ['01','02','03','04']
      })
    });

    // 临时变量用于接受中间结果，避免创建新对象
    const targetCoord = new maptalks.Coordinate(0, 0);
    const POINT0 = new maptalks.Coordinate(0, 0);
    const POINT1 = new maptalks.Coordinate(0, 0);
    const wgslayer = new maptalks.TileLayer('base', {
      offset : function (z) {
        //实时计算wgs84和gcj02瓦片的偏移量
        const center = map.getCenter();
        const c = maptalks.CRSTransform.transform(center.toArray(), 'WGS84', 'GCJ02');
        targetCoord.set(c[0], c[1]);
        const offset = map.coordToPoint(center, z, POINT0)._sub(map.coordToPoint(targetCoord, z, POINT1));
        return offset._round().toArray();
      },
      opacity : 0.7,
      urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
      subdomains: ['a','b','c','d'],
      attribution: '&copy; Google Maps'
    });

    wgslayer.addTo(map);

liuhz1994 commented 4 years ago

好的，谢谢！

liuhz1994 commented 4 years ago

在上面的示例中，动态设置tilelayer的offset之后，瓦片的获取容易失败，我这边叠加的瓦片图层添加offset后也一样，地图视野拖动的时候，有的瓦片加载会闪烁，效果感觉不是很好，不知道你那边遇到过这个问题没有。不设置offset会好很多。

fuzhenn commented 3 years ago

在上面的示例中，动态设置tilelayer的offset之后，瓦片的获取容易失败，我这边叠加的瓦片图层添加offset后也一样，地图视野拖动的时候，有的瓦片加载会闪烁，效果感觉不是很好，不知道你那边遇到过这个问题没有。不设置offset会好很多。

0.47.0出现的bug导致的： https://github.com/maptalks/maptalks.js/issues/1237

wang88633 commented 3 years ago

麻烦问下，maptalks能否加载geoserver发布的矢量切片吗

maptalks / maptalks.js

EPSG:4326的底图和baidu坐标系的底图不能重叠 #949