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

相关阅读:
使用ApiFox衔接前后端开发人员，提升沟通效率实践
架构道术-企业选择Dubbo作为分布式服务框架的10个理由
040：vue项目中 transition 动画实现推拉门效果
图像处理ASIC设计方法笔记10 插值算法的流水线架构
Java面试之SpringBoot篇
代码随想录算法训练营第42天|动态规划：01背包理论基础、动态规划：01背包理论基础（滚动数组）、416. 分割等和子集
Unity --- 基本键鼠操作
《分布式服务架构：原理，设计与实战》
【wxGlade学习】wxGlade环境配置
分代ZGC详解

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