GIS工具maptalks开发手册(三)03——官网示例之添加图层和移除图层

news2025/10/31 3:34:53

GIS工具maptalks开发手册(三)03——官网示例之添加图层和移除图层

效果

在这里插入图片描述

代码

index.html

<!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: 900px;
        height: 500px;
        margin: 50px;
        position: relative;
    }

    .pane {
        background: #34495e;
        line-height: 28px;
        color: #fff;
        z-index: 10;
        position: absolute;
        top: 80px;
        left: 120px
    }

    .pane a {
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
</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>

<body>

    <div id="map" class="container"></div>
    <div class="pane"><a href="javascript:add();">Add layer</a><a href="javascript:remove();">Remove Layer</a></div>

    <script>

        var map = new maptalks.Map('map', {
            center: [-0.113049, 51.498568],
            zoom: 14,
            baseLayer: new maptalks.TileLayer('base', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_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>'
            })
        });

        var marker = new maptalks.Marker(
            map.getCenter(),
            {
                symbol: {
                    'textName': 'Layer is added.',
                    'textWeight': 'bold',
                    'textSize': 50,
                    'textFill': '#1bbc9b',
                    'textHaloFill': '#fff',
                    'textHaloRadius': 5
                }
            }
        );
        var layer = new maptalks.VectorLayer('vector', [marker])
            .addTo(map);

        function add() {
            map.addLayer(layer);
        }

        function remove() {
            map.removeLayer(layer);
        }

    </script>
</body>

</html>