maptalks.js Add padding options to setCenter and fixExtent

Add padding options to setCenter and fixExtent

It's useful when some panel cover themap container.

eg:

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


    .panel--left {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100px;
        background-color: rebeccapurple;
    }

    .panel--right {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 180px;
        background-color: rebeccapurple;
    }

    .panel--top {
        position: fixed;
        right: 0;
        top: 0;
        left: 0;
        height: 100px;
        background-color: rebeccapurple;
    }

    .panel--bottom {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        height: 180px;
        background-color: rebeccapurple;
    }

    .container {
        width: 100%;
        height: 100%
    }
</style>
<link rel="stylesheet" href="./dist/maptalks.css">
<script type="text/javascript" src="./dist/maptalks.js"></script>

<body>


    <div id="map" class="container"></div>
    <!-- <section class="panel--left"></section>
    <section class="panel--right"></section> -->
    <section class="panel--top"></section>
    <section class="panel--bottom"></section>


    <script>
        const targetCoordinate = [-0.113049, 51.498568]
        var map = new maptalks.Map('map', {
            center: targetCoordinate,
            zoom: 14,
        });
        const drawLayer = new maptalks.VectorLayer(maptalks.Util.GUID()).addTo(map);
        function drawCenter(coordinate) {
            const marker = new maptalks.Marker(coordinate)
            drawLayer.addGeometry(marker)
        }
        function drawNameMarker(coordinate, name) {
            const marker = new maptalks.Marker(coordinate, {
                cursor: 'pointer',
                shadowBlur: 0,
                shadowColor: 'black',
                draggable: false,
                dragShadow: false, // display a shadow during dragging
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
                symbol: {
                    'textFaceName': 'sans-serif',
                    'textName': name,
                    'textFill': '#34495e',
                    'textHorizontalAlignment': 'center',
                    'textSize': 10
                }

            })
            drawLayer.addGeometry(marker)
        }
        drawCenter(targetCoordinate)
        function drawCenterByPadding(padding, name) {
            map.setCenter(targetCoordinate, padding)
        }
        function testPaddingLeft() {
            drawCenterByPadding({ paddingLeft: 100 }, 'L-100')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.x - pPoint.x) === 100 / 2, tPoint.x - pPoint.x)
        }
        function testPadingRight() {
            drawCenterByPadding({ paddingRight: 100 }, 'R-100')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.x - pPoint.x) === -100 / 2, tPoint.x - pPoint.x)
        }
        function testPadingTop() {
            drawCenterByPadding({ paddingTop: 100 }, 'T-100')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.y - pPoint.y) === 100 / 2, tPoint.y - pPoint.y)
        }
        function testPadingBottom() {
            drawCenterByPadding({ paddingBottom: 100 }, 'T-100')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.y - pPoint.y) === -100 / 2, tPoint.y - pPoint.y)
        }

        function testPaddingLeftAndPaddingRight() {
            drawCenterByPadding({ paddingLeft: 100, paddingRight: 180 }, 'L-100-R')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.x - pPoint.x) === 0, tPoint.x - pPoint.x)
        }
        function testPaddingTopAndPaddingBottom() {
            drawCenterByPadding({ paddingTop: 100, paddingBottom: 180 }, 'T-100-B')
            const pCenter = map.getCenter()
            const pPoint = map.coordinateToViewPoint(pCenter)
            const tPoint = map.coordinateToViewPoint(new maptalks.Coordinate(targetCoordinate))
            console.log(Math.round(tPoint.y - pPoint.y) === 0, tPoint.y - pPoint.y)
        }
        testPaddingTopAndPaddingBottom()
    </script>
</body>

</html>

Jul 23 '21 11:07 Link-Fight

Codecov Report

Merging #1417 (4de4b4c) into master (2f748e6) will decrease coverage by 0.08%. The diff coverage is 86.95%.

:exclamation: Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@            Coverage Diff             @@
##           master    #1417      +/-   ##
==========================================
- Coverage   84.41%   84.34%   -0.08%     
==========================================
  Files         163      163              
  Lines       17546    17566      +20     
==========================================
+ Hits        14812    14816       +4     
- Misses       2734     2750      +16

Impacted Files	Coverage Δ
src/map/Map.js	`87.17% <86.95%> (-0.05%)`	:arrow_down:

... and 2 files with indirect coverage changes

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

Jul 23 '21 11:07 codecov-commenter

非常感谢你的pr，这个功能的用意我也明白了。但因为我还没想清楚这个功能的后续影响，或有没有更简洁的api设计，我先暂时不合并这个pr，等想清楚后再来处理。

Jul 28 '21 03:07 fuzhenn