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. DP经典例题——LIS&LCS

    DP经典例题--LIS&LCS LCS 最长公共子序列,英文缩写为LCS(Longest Common Subsequence).其定义是,一个序列 S ,如果分别是两个或多个已知序列的子序列 ...

  2. 2022年7月15日，第四组，周鹏，JAVA认识的第三天，算法的第一天(╥╯^╰╥)(╥╯^╰╥)

    算了,已经没有力气去创作些什么了, 8种排序方法我只会4种,剩下的以后再补. 发一个逻辑题吧: 一个村落,有50户人,在这些人中存在着n个红眼病. 在保证每人每天最少见一面的情况下,有如下规则: 1, ...

  3. 【转载】EXCEL VBA-区域选择

    1- 区域命名 ThisWorkbook.Names.Item("foo").RefersTo =Tabelle1!$A$1:$B$1 ThisWorkbook.Names.Ite ...

  4. emqtt-bench

    安装 安装环境:Centos7 安装包:emqtt-bench-0.4.6-alpha.2-centos7-amd64.tar.gz 建议使用已编译好的发行包进行安装,源码编译已踩坑. # 创建存放目 ...

  5. Windows Server上部署IoTdb 集群

    本文是参考官方的 IoTDB 集群版(1.0.0)的安装及启动教程:https://iotdb.apache.org/zh/UserGuide/V1.0.x/Cluster/Cluster-Setup ...

  6. OpenMP 线程同步 Construct 实现原理以及源码分析（上）

    OpenMP 线程同步 Construct 实现原理以及源码分析(上) 前言 在本篇文章当中主要给大家介绍在 OpenMP 当中使用的一些同步的 construct 的实现原理,如 master, s ...

  7. 记一下Mybatis Plus遇到的现象

    使用Springboot+Mybaits plus,在Controller中直接调用Service中的方法,没有配置事务,就算是在Services上加了@Transactional也是没有事务的,可以 ...

  8. vulnhub靶场之DIGITALWORLD.LOCAL: VENGEANCE

    准备: 攻击机:虚拟机kali.本机win10. 靶机:digitalworld.local: VENGEANCE,下载地址:https://download.vulnhub.com/digitalw ...

  9. Hive删除分区名称中含有特殊字符

    先说方案:通过show partitions和hdfs url看到的都不是真正的分区名称,都是经过URI重新编码的,访问这些分区应该使用分区名称的原始字符串. 场景描述 当我们在SQL语句中使用变量时 ...

  10. Stats collector is not responding 统计信息收集器没有响应

    统计信息收集器没有响应/Stats collector is not responding 问题现象: kingbase数据库日志提示:统计信息收集器没有响应/Stats collector is n ...