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. python进阶之路2——解释器软件安装

    内容概要 计算机五大组成部分 计算机三大核心硬件 操作系统 编程与编程语言 编程语言发展史 编程语言的分类 python解释器下载与安装 python解释器多版本共存 pycharm安装 计算机五大组 ...

  2. [WPF]鼠标移动到Button颜色改变效果设置

    代码 <Style x:Key="Button_Menu" TargetType="{x:Type Button}"> <Setter Pro ...

  3. 探讨下如何更好的使用缓存 —— Redis缓存的特殊用法以及与本地缓存一起构建多级缓存的实现

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 通过前面的文章,我们一起剖析了Guav ...

  4. BUG日记--——Linux安装Docker

    1.yum makecache fast不适合Centos8 2.解决办法 3.doucke的使用 1.关闭防火墙 # 关闭 systemctl stop firewalld # 禁止开机启动防火墙 ...

  5. io流概述-一切皆为字节

    io流概述 什么是io 生活中,你肯定经历过这样的场景.当你编辑一个文本文件,忘记了ctrl+s,可能文件就白白编辑了当你电脑上插入一个U盘,可以把一个视频,拷贝到你的电脑硬盘里.那么数据都是在哪些设 ...

  6. Java 进阶P-6.4+P-6.5

    狐狸和兔子 狐狸和兔子都有年龄 当年龄到了一定的上限就会自然死亡 狐狸可以随即决定在周围的兔子中吃一个 狐狸和兔子可以随即决定生一个小的,放在旁边的空的格子里 如果不吃也不生,狐狸和兔子可以随机决定走 ...

  7. 论文翻译：2022_Time-Shift Modeling-Based Hear-Through System for In-Ear Headphones

    论文地址:基于时移建模的入耳式耳机透听系统 引用格式: 摘要 透传(hear-through,HT)技术是通过增强耳机佩戴者对环境声音的感知来主动补偿被动隔离的.耳机中的材料会减少声音 500Hz以上 ...

  8. mysql 5.7安装教程及密码设置

    1.安装网址 https://dev.mysql.com/downloads/mysql/ 2.点击 Archives 3.切换版本,之前安装过新版本出现过很多问题,为了方便学习,所以选择了5.7这个 ...

  9. HTTPS基础原理和配置 - 1

    近期又碰到了SSL相关的事情, 就心血来潮开个新专题 - <HTTPS基础原理和配置> 本文是第一篇文章, 主要介绍SSL TLS加密协议的相关内容. 加密协议历史概要 SSL TLS加密 ...

  10. spring in action day-06 JMS -ActiveMQ Artemi

    JMS -ActiveMQ Artemi JMS:它是一个规范,类似于jdbctemplate Spring提供了jmstemplate来发送和接收消息. 搭建JMS环境 1.引入依赖 我们要使用的消 ...