可执行示例一个，如下：
<!DOCTYPE html>

<html>

<head>

    <title>Layers Control Tutorial - Leaflet</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

    <style>

        html, body {

            height: 100%;

            margin: 0;

        }

        #map {

            width: 1000px;

            height: 700px;

        }

    </style>

</head>

<body>

<div id='map'></div>

<script>

    //地图marker数组

    var markers=[];

    var marker1 =L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.');

    var marker2 =L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.');

    var marker3 =L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.');

    var marker4 =L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

    markers.push(marker1);

    markers.push(marker2);

    markers.push(marker3);

    markers.push(marker4);

    //利用marker数组构建marker图层

    var citiesLayer = L.layerGroup(markers);

    //利用切片地图服务地址，创建图层

    var grayscaleLayer= L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',

        {id: 'map11'});

    var streetsLayer  = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',

        {id: 'map12'});

    //1、基础地图

    var baseLayers = {

        "Grayscale": grayscaleLayer,

        "Streets": streetsLayer

    };

    //1、业务图层

    var overLayers = {

        "Cities": citiesLayer

    };

    var map = L.map('map', {

        minZoom: 5,

        maxZoom: 12,

        center: [39.73, -104.99],

        zoom: 10,

        layers: [grayscaleLayer, citiesLayer],//默认显示的图层

        //zoomDelta: 0.5,//点击+-按钮的放缩刻度尺度，默认值1

        //zoomSnap: 0.5,//地图能放缩的zoom的最小刻度尺度，默认值1

        fullscreenControl: false,//全屏控件，不显示

        zoomControl: false,//放大缩小控件，不显示

        attributionControl: false//右下角属性控件，不显示

    });

    //map的图层控件

    var layerControl=L.control.layers(baseLayers, overLayers);

    map.addControl(layerControl);

    //单个图层，也可以通过，map,addLayer()来添加

    //map.setView([36.045, 103.83333], 15);//切换地图视野范围

    //和setView类似，但是flyTo会带一个平滑的动画

    //map.flyTo([36.045, 103.83333], 15,{ animate: true, duration: 0.2 });

    //map.setZoom(0);

</script>

</body>

</html>

leaflet 基本案例-图层控件：基础图层+业务图层的更多相关文章

  1. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. OpenLayers 3 之 切换图层控件

    OpenLayers 3 之 切换图层控件 openlayers 3中并没有默认的图层切换控件,GitHub中有一个项目实现了我们需要的控件-------- ol3-layerswitcher . 可 ...

  3. Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览

    Delphi XE2 之 FireMonkey 入门(37) - 控件基础: TControl 概览 { TControl } public   constructor Create(...); ov ...

  4. Delphi XE2 之 FireMonkey 入门(36) - 控件基础: TForm

    Delphi XE2 之 FireMonkey 入门(36) - 控件基础: TForm 当我第一次读取 Form1.StyleLookup 并期待出现 "formstyle" 时 ...

  5. 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

    原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...

  6. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

  7. Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem

    Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...

  8. Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid、TGrid

    Delphi XE2 之 FireMonkey 入门(43) - 控件基础: TStringGrid.TGrid TStringGrid.TGrid 都是从 TCustomGrid 继承; 区别有:1 ...

  9. Delphi XE2 之 FireMonkey 入门(42) - 控件基础: TComboBox、TComboEdit

    Delphi XE2 之 FireMonkey 入门(42) - 控件基础: TComboBox.TComboEdit TListBox 有两个兄弟 TComboListBox.TComboEditL ...

  10. Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox

    Delphi XE2 之 FireMonkey 入门(41) - 控件基础: TListBox TScrollBox -> TCustomListBox -> TListBox; 其元素项 ...

随机推荐

  1. MySQL登录退出与导入导出

    登录退出MySQL 登录命令 mysql -u 用户名 -p 密码 -h IP -P 端口 mysql -u root -p password -h 127.0.0.1 -P 3306 一般登录命令 ...

  2. redis,mongo,mysql,es区别

    Redis.MongoDB.MySQL和Elasticsearch(ES)都是常用的数据库系统,各有不同的特点和适用场景,具体区别如下: Redis:Redis是一种高性能键值存储数据库,基于内存操作 ...

  3. AtCoder Beginner Contest 220

    传送门 A.B.C.D.F比较简单,没必要写出来 E - Distance on Large Perfect Binary Tree 题目 问一个深度为 \(n\)的满二叉树有多少个点对的距离恰好为 ...

  4. Linux 用户名显示为sh-

    前言 本来我们使用bash的时候一直显示是: 后来我操作linux的时候因为有一个新的需求,我使用: useradd -d /home/testuser -m testuser 去创建一个用户名,名字 ...

  5. leetcode：1337. 方阵中战斗力最弱的 K 行

    1337. 方阵中战斗力最弱的 K 行 给你一个大小为 m * n 的方阵 mat,方阵由若干军人和平民组成,分别用 0 和 1 表示. 请你返回方阵中战斗力最弱的 k 行的索引,按从最弱到最强排序. ...

  6. iOS的cer、p12格式证书解析监控

    之前博客写过直接解析ipa包获取mobileprovision文件来监控APP是否过期来,但APP的推送证书还没有做, 大家都知道,iOS的推送证书不会放到ipa包里,只能通过直接解析p12或cer. ...

  7. Ajax 原理是什么？如何实现？

    一.是什么 AJAX全称(Asynchronous Javascript And XML) 即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情 ...

  8. PyQt 快速使用

    1.安装 PyQt:使用 pip 命令在终端或命令提示符中运行以下命令: pip install pyqt5 2.创建 PyQt 应用程序:导入 PyQt5 模块并创建一个 QApplication ...

  9. 【知识点】如何快速开发、部署 Serverless 应用？

    简介: 本文将详细介绍如何开发和部署 Serverless 应用,并通过阿里云函数计算控制台与开发者工具 Serverless Devs 进行应用的初始化.部署:最后分享应用的调试,通过科学发布.可观 ...

  10. dotnet 使用 windbg 运行脚本方式自动批量调试处理 dump 文件

    本文将和大家介绍一个简单且实际用途不大的使用 windbg 配合脚本的方式,进行自动化的大批量对 dotnet 系应用的 dump 进行自动化分析调试处理,可以自动根据调试需求输出 dump 文件的一 ...