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. [机器学习] sklearn聚类

    聚类(Clustering)简单来说就是一种分组方法,将一类事物中具有相似性的个体分为一类,将另一部分比较相近的个体分为另一类.例如人和猿都是灵长目动物,但是根据染色体数目不同可以将人和猿分类不同的两 ...

  2. [数据与分析可视化] D3入门教程2-在d3中构建形状

    d3.js入门教程2-在 d3.js中构建形状 文章目录 d3.js入门教程2-在 d3.js中构建形状 形状的添加 圆形的添加 矩形的添加 线段的添加 文本的添加 折线的添加 区域的添加 圆弧的添加 ...

  3. C#应用程序配置文件（XML序列化） - 开源研究系列文章

    上次写了一个C#线程池及管理器的博文( C#开发的线程池和管理器 - 开源研究系列文章 ),收到了不小的浏览量,在此感谢各位网友的支持.这次将另一个功能放出来单独讲解:C#应用程序的配置文件,使用的是 ...

  4. [C++标准模板库：自修教程与参考手册]关于deque

    Deque的基本概念 deque和vector很相似,也提供随机存取的能力,将元素都动态地存储在一个数组中,最大的区别就是:deque的头和尾都是开放的,非常方便在头尾两端进行一些操作.(重点在于:d ...

  5. 经典问题 1 —— DAG 上区间限制拓扑序

    问题描述 给定一个 DAG,求一个拓扑序,使得节点 \(i\) 的拓扑序 \(\in [l_i,r_i]\). 题解 首先进行一个预处理:对于所有 \(u\),令 \(\forall (v,u)\in ...

  6. NodeJS 实战系列：如何设计 try catch

    本文将通过一个 NodeJS 程序里无效的错误捕获示例,来讲解错误捕获里常见的陷阱.错误捕获不是凭感觉添加 try catch 语句,它的首要目的是提供有效的错误排查信息,只有精心设计的错误捕获才有可 ...

  7. 【大型软件开发】浅谈大型Qt软件开发（三）QtActive Server如何通过COM口传递自定义结构体？如何通过一个COM口来获得所有COM接口？

    前言 最近我们项目部的核心产品正在进行重构,然后又是年底了,除了开发工作之外项目并不紧急,加上加班时间混不够了....所以就忙里偷闲把整个项目的开发思路聊一下,以供参考. 鉴于接下来的一年我要进行这个 ...

  8. C#，Winform软件防破译-源代码加密简单方法之.NET REACTOR（一）

    一..NET Reactor介绍 .NET Reactor是一个功能强大的代码保护和软件许可系统,适用于为.NET Framework编写的软件,并支持生成.NET程序集的所有语言. 支持Blazor ...

  9. JavaScript 评测代码运行速度

    一.使用 performance.now() API 在 JavaScript 中,可以使用 performance.now() API 来评测代码的运行速度.该 API 返回当前页面的高精度时间戳, ...

  10. 0基础搭建基于OpenAI的ChatGPT钉钉聊天机器人

    前言:以下文章来源于我去年写的个人公众号.最近chatgpt又开始流行,顺便把原文内容发到博客园上遛一遛. 注意事项和指引: 注册openai账号,需要有梯子进行访问,最好是欧美国家的IP,亚洲国家容 ...