可执行示例一个，如下：
<!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数据过滤和搜索

    操作符 AND操作符 mysql> SELECT prod_id,prod_price,prod_name FROM products WHERE vend_id=1003 AND prod_p ...

  2. OpenCV一句话将彩色图片(Mat)转换为灰度

    auto in_gray=cv::imdecode(in, cv::IMREAD_GRAYSCALE);

  3. Java 包装类：原始数据类型与迭代器

    Java Iterator Iterator 接口提供了一种迭代集合的方法,即顺序访问集合中的每个元素.它支持 hasNext() 和 next() 方法,用于检查是否存在下一个元素以及获取下一个元素 ...

  4. PMF源解析技术在大气颗粒物与VOCs研究中的创新应用

    目前,大气颗粒物和臭氧污染成为我国亟待解决的环境问题.颗粒物和臭氧污染不仅对气候和环境有重要影响,而且对人体健康有严重损害.而臭氧的前体物之一为挥发性有机物(VOCs).为了高效.精准地治理区域大气颗 ...

  5. 【直播回顾】Hello HarmonyOS应用篇第六课——短视频应用开发

    由HDE夏德旺老师主讲的Hello HarmonyOS进阶系列应用篇第六课<短视频应用开发>, 已于6月8日晚上 19 点在HarmonyOS社群内成功举行. 本节课夏德旺老师带领大家了解 ...

  6. redis 简单整理——持久化的问题定位和优化[二十一]

    前言 Redis持久化功能一直是影响Redis性能的高发地,简单介绍一下持久化的问题定位和优化. 正文 当Redis做RDB或AOF重写时,一个必不可少的操作就是执行fork操作创 建子进程,对于大多 ...

  7. jenkins 持续集成和交付 —— git hook（七）

    前言 这个hook的意思叫做钩子哈,前端听得多. 正文 好吧,这个git hook 有什么用呢? 前面说了一个轮询SCM这个东西呢,我是真的觉得这东西没啥用,经常扫描仓储算怎么回事呢? 但是如果主动通 ...

  8. MMDeploy部署实战系列【第二章】：mmdeploy安装及环境搭建

    MMDeploy部署实战系列[第二章]:mmdeploy安装及环境搭建 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就可以,我给补充. 版权声明:本文为博 ...

  9. 实训篇-Html-表格练习1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. WPF基础：在Canvas上绘制图形

    Canvas介绍 Canvas是WPF(Windows Presentation Foundation)中的一种面板控件,用于在XAML中布置子元素.它提供了绝对定位的能力,允许元素在自由的二维空间中 ...