1 <!DOCTYPE html>

 2 <html lang="zh">

 3     <head>

 4         <meta charset="UTF-8">

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

 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7         <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />

 8         <title></title>

 9         <style type="text/css">

10             body {

11                 margin: 0;

12             }

13

14             #mapid {

15                 height: 500px;

16             }

17         </style>

18     </head>

19     <body>

20         <div id="mapid"></div>

21

22         <script type="text/javascript" src="leaflet/leaflet.js"></script>

23

24         <script type="text/javascript">

25             const mymapOptions = {

26                 // 地图中心

27                 center: [51.505, -0.09],

28                 // 地图的最小缩放级别

29                 minZoom: 11,

30                 // 初始化时的缩放等级

31                 zoom: 13,

32                 // 地图的最大缩放级别

33                 maxZoom: 15,

34                 // 强制让地图的缩放级别始终为这个值的倍数

35                 zoomSnap: 1,

36                 // 版权控件添加到地图中（即水印）

37                 attributionControl: false,

38                 // 是否显示zoom 缩放控件,默认是true

39                 zoomControl: true,

40             }

41

42             const mymap = L.map('mapid', mymapOptions);

43

44             //声明图层组，存储城市标记marker

45             var cities = L.layerGroup();

46

47             //声明两个城市marker并添加进图层组

48             var linyi = L.marker([51.505, -0.09]).bindPopup('这里属于青岛').addTo(cities);

49             var qingdao = L.marker([51.505, -0.19]).bindPopup('这里属于临沂').addTo(cities);

50

51             cities.addTo(mymap)

52

53             const imageUrl = 'leaflet/images/b1-floor1-full-h.png';

54             // 获取顶部左边的边界

55             const northEast = L.latLng(mymap.getBounds()._northEast);

56             // 获取底部右边的边界

57             const southWest = L.latLng(mymap.getBounds()._southWest);

58

59             const imageBounds = L.latLngBounds(northEast, southWest);

60             const imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

61         </script>

62

63     </body>

64 </html>

marker的存储组---layerGroup的更多相关文章

  1. linux用户及组管理

    useradd      添加用户 passwd       修改用户密码 userdel       删除用户,默认不删除用户主目录和email,如果想删除可加 –r 参数 groupadd   添 ...

  2. AppBoxFuture(五): 分布式文件存储-Store Everything

      本来本篇是想介绍前端组件化开发用户界面,发现框架还未实现文件存储,原本计划是后续设计开发的,索性把计划提前,所以本篇将介绍基于Raft实现分布式的文件存储引擎. 一. 实现思路   既然是分布式存 ...

  3. Linux系统用户与属组管理(3)

    好了,终于要到了管理 Linux 账号的时刻了,对于 Linux 有一定的熟悉度之后,再来就是要管理连上 Linux 的账号问题了,这个账号的问题可大可小,大到可以限制他使用 Linux 主机的各项资 ...

  4. FastDFS 双tracker负载均衡 及多组存储配置

    应用场景: 三台服务器分别做三组存储,并且需要两台tracker地址做主备关系,当一台down机后需要另外一台可以提供正常的访问连接 #注:此处不考虑存储数据安全性,如果需要保障数据不丢失,可以分别每 ...

  5. (转)AIX 用户和组管理

    AIX 用户和组管理 原文:https://www.ibm.com/developerworks/cn/aix/library/au-aixuseradmin/ 管理 IBM AIX 中的用户和组是管 ...

  6. 关于VMAX中存储资源池（SRP）

    Storage Resource Pool中的相关元素 SRP由一个或多个数据池组成,这些数据池包含了预配置的数据(或TDAT)设备,可为创建和呈现给主机与应用程序的精简设备(TDEVS) 提供存储. ...

  7. FastDFS安装（mac）｜文件存储方案

    目录 FastDFS安装(mac)|文件存储方案 1 FastDFS介绍 1.1 FastDFS架构 1.2 工作原理实例介绍 1.3 FastDFS上传和下载流程 1.4 FastDFS文件索引 2 ...

  8. QingStor 对象存储架构设计及最佳实践

    对象存储概念及特性 在介绍 QingStor️对象存储内部的的架构和设计原理之前,我们首先来了解一下对象存储的概念,也就是从外部视角看,对象存储有什么特性,我们应该如何使用. 对象存储本质上是一款存储 ...

  9. 利用高级组策略管理AGPM复制组策略GPO

    有时候管理多个林,在一个林中配置了GPO之后,想复制出来用到其它林里.默认系统的组策略管理里没有这个功能.但是微软在微软企业桌面优化套件Microsoft Desktop Optimization P ...

  10. FASTDFS调研报告(V1.0)

    之前的文章,现在放出来,以供参阅. 一.fastdfs简介 FastDFS是一个轻量级的开源分布式文件系统 FastDFS主要解决了大容量的文件存储和高并发访问的问题,文件存取时实现了负载均衡 Fas ...

随机推荐

  1. 第一篇:前端基础之HTML

    HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...

  2. Mybatis用List接收返回值

    Mybatis 用 List 接收返回值 以 List<Map<String, Object>> 为例 1.XML内 resultType 为单条记录对应类型,设置成 java ...

  3. vm虚拟机进入boot manager解决

    今天用vm创建了一个虚拟机,进入系统时却直接进入了boot manager,重新创建几回都不管用 于是查了下,有两种方式: 方法1.进入vm,虚拟机设置,选项,高级,固件类型,选择BIOS 参考链接: ...

  4. [超详细] [效能工具]Typora+PicGo+Github免费图床快速搭建，提升技术文档输出效率

    一.前言 在我们日常的学习和工作中,我们经常需要进行写作.尤其对于我们程序技术人员而言,工作中的技术方案文档或者接口文档等,都是经常需要用上的. 那么如果没有一个高效的工具,去帮助我们记录和创作,这将 ...

  5. 在GCP上创建Cloud SQL的三种方式(Console,gcloud,Terraform)

    1 简介 Cloud SQL 是GCP上的关系型数据库,常用的有三种方式来创建: (1) 界面操作 (2) 命令行 gcloud (3) Terraform 在开始之前,可以查看:<初始化一个G ...

  6. angular8表格文件上传并渲染到页面（上传文本与表格，表格有两种写法--之二）

    import { Component, OnInit , ViewChild, OnDestroy, AfterViewInit } from '@angular/core'; import { ST ...

  7. c++ 递推算法

    各位大佬不妨先点个赞再看文章! 递推法是一种重要的数学方法,在数学的各个领域中都有广泛的运用,也是计算机用于数值计算的一个重要算法.这种算法特点是:一个问题的求解需一系列的计算,在已知条件和所求问题之 ...

  8. C#/VB.NET 如何在不同工作簿之间复制单元格范围

    在处理 Excel 文档时,我们经常需要将数据整合到一个工作表以便于我们进行管理或数据对比.为了提高工作效率,我们可以在不同的工作簿之间复制选定的单元格区域或整个工作表.本文将演示如何通过编程方式将选 ...

  9. Vue 03 VisualStudioCode 搭建一个Vue 框架 的详细流程

    转:https://blog.csdn.net/A_awen/article/details/122345082 1 下载VisualStudioCode 1.1 官网下载地址 https://cod ...

  10. Gitee + Sourcetree 配置公钥 SSH

    设置前提 安装Git Git下载 安装sourceTree sourceTree下载 gitee账号 gitee官网 Git设置公钥 1.在安装好 sourcetree 后 点击操作选择在终端中打开 ...