海拔很大时threelayer的图形高度和其他图层的图形高度不相等

Open deyihu opened this issue 2 years ago • 1 comments

maptalks's version and what browser you use?

Issue description

<!DOCTYPE html>
<html>

<head>
    <title>extrudepolyogn china</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/randomColor.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/build/dat.gui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@maptalks/gl/dist/maptalksgl.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
            width: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>

        const height = 1000000;


        var map = new maptalks.Map("map", {
            "center": [108.70296180227058, 32.44563434720479], "zoom": 5.717254596370028, "pitch": 58.40000000000007, "bearing": 0.8533528124999066,
            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });
        // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true,
            identifyCountOnEvent: 1
        });


        var material = new THREE.MeshPhongMaterial({ color: '#fff', transparent: true });

        const center = map.getCenter();

        threeLayer.prepareToDraw = function (gl, scene, camera) {
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);

            const bar = threeLayer.toBar(center.copy(), {
                radius: height / 2,
                height,
                topColor: '#fff'
            }, material);
            threeLayer.addMesh(bar);


            threeLayer.config('animation', true);
        };

        const sceneConfig = {
            postProcess: {
                enable: true,
                antialias: { enable: true }
            }
        };
        const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer], { sceneConfig });
        groupLayer.addTo(map);

        const layer = new maptalks.VectorLayer('layer', {
            enableAltitude: true
        }).addTo(map);
        center.z = height;
        const point = new maptalks.Marker(center, {
        }).addTo(layer);


    </script>
</body>

</html>

如果把 height缩小10倍就是正常的

Please provide a reproduction URL (on any jsfiddle like site)

Sep 13 '23 09:09 deyihu

经过排查发现是海拔转换默认中心点是[0,40]导致的，但是为什么和其他的坐标转换不统一还不清楚,可能原因：

gl生态里坐标转换没有采用这个中心点
其他可能的原因

Sep 14 '23 01:09 deyihu