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 layera><a href="javascript:remove();">Remove Layera>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: '© OpenStreetMap contributors, © CARTO'
            })
        });

        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

相关阅读:
fission源码分析--fission调用http请求流程分析
django带了一个权限系统
自定义终结符：EOF
史上最强手机SoC，A17 PRO处理器
终极大招～pycharm自动补全opencv代码提示功能
移动通信网络规划：配套设施要求
java多线程-定时器Timer
下属比你聪明/专业，经验还比你丰富怎么办？
qt5-入门-使用拖动方式创建Dialog
无代码平台多项选择入门教程

原文地址：https://blog.csdn.net/weixin_44867717/article/details/128156215