ToolTip/Popup/DivIcon position error when viewer container has offset

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Map - Display a map</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%
    }

    .main {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .slider {
        width: 300px;
    }

    .container {
        height: 100%;
        width: calc(100% - 300px);
    }
</style>
<link rel="stylesheet" href="./../dist/dc.min.css">
<script type="text/javascript" src="./../dist/dc.min.js"></script>

<body>

    <div class="main">
        <div class="slider"></div>
        <div id="map" class="container"></div>
    </div>

    <script>

        function createBaseLayer(viewer) {
            let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.ARCGIS, {
                url:
                    'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            })
            viewer.addBaseLayer(baseLayer, {
                iconUrl: 'examples/assets/icon/img.png',
                name: '影像'
            });

        }

        var viewer, plo, layer, htmlLayer;

        function drawStart() {
            plot.draw('billboard', overlay => {
                console.log(overlay);
                // overlay.size = ICONSIZE;
                // overlay.setStyle({
                //     pixelOffset: ICONOFFSET
                // })
                // drawLayer.addOverlay(overlay);
                // updateLine(formatCoordinate(overlay.position));
            }, {}, true);
        }

        function generatePosition(num) {
            let list = []
            for (let i = 0; i < num; i++) {
                let lng = 120.38105869 + Math.random() * 0.5
                let lat = 31.10115627 + Math.random() * 0.5
                list.push([lng, lat, 0])
            }
            return list
        }

        function test() {
            let positions = generatePosition(20)
            positions.forEach((item, index) => {
                let point = new DC.Point(item)
                point.attr = {
                    index: index + 1
                }
                point.on(DC.MouseEventType.CLICK, e => {
                    viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点`)
                })
                point.addTo(layer)
            })
            viewer.flyTo(layer)
        }

        function test1() {
            let positions = generatePosition(5)
            positions.forEach((item, index) => {
                let divIcon = new DC.DivIcon(
                    item,
                    `<div style="width:200px;background:rgba(255,255,0,0.2)">我是一个div，你可以对我添加css样式和内容</div>`
                )
                htmlLayer.addOverlay(divIcon)
            })
            viewer.flyToPosition(
                new DC.Position(120.472147621, 30.61004946, 65380.21, 14.0, -40.94)
            )
        }

        function initViewer() {

            viewer = new DC.Viewer('map');
            viewer.contextMenu.enable = true

            createBaseLayer(viewer);

            // window.viewer = viewer;
            viewer.on(DC.MouseEventType.CLICK, e => {
                console.log(e);
                console.log(formatCoordinate(e.wgs84Position || e.wgs84SurfacePosition));
            })

            plot = new DC.Plot(viewer, {
                clampToModel: true
            });

            layer = new DC.VectorLayer('layer');
            viewer.addLayer(layer);

            htmlLayer = new DC.HtmlLayer('layer')
            viewer.addLayer(htmlLayer)
            test1();
            // addAirPort();

            // const view = new DC.Position(108.9596180737812, 34.21399014654956, 313);
            // viewer.flyToPosition(view);
        }
        DC.ready({
            baseUrl: './../dist/resources/'
        }).then(initViewer)

    </script>
</body>

</html>
dvgis / dc-sdk

ToolTip/Popup/DivIcon position error when viewer container has offset #190
