leaflet学习笔记-地图图层控制(二)

图层介绍

Leaflet的地图图层控件可控制两类图层:一类是底图图层(Base Layers),一次只能选择一个图层作为地图的背景图层,即底图图层,在地图图层控件中用单选按钮控制;另一类是覆盖图层(Overlays),也就是覆盖在底图上的其他图层,一次可以覆盖一个图层,也可以覆盖多个图层,甚至可以不覆盖任何图层,在地图图层控件中用复选框控制。

添加图层

featureGroup使用(相当于arcgis的featureLayer/graphicLayer)

    let littleton = L.marker([25.61, 102.7]).bindPopup('This is Littleton, CO.');let denver = L.marker([25.61, 102.71]).bindPopup('This is Denver, CO.');let aurora = L.marker([25.61, 102.72]).bindPopup('This is Aurora, CO.');let golden = L.marker([25.61, 102.73]).bindPopup('This is Golden, CO.');//相当于arcgis的featureLayerlet featureGroup= L.featureGroup([littleton, denver, aurora, golden]);featureGroup.addTo(this.mainMap);//聚焦所有的markerlet bound = featureGroup.getBounds();this.mainMap.fitBounds(bound);

使用地图图层控件

Leaflet的地图图层控件可控制两类图层:一类是底图图层(Base Layers),一次只能选择一个图层作为地图的背景图层,即底图图层,在地图图层控件中用单选按钮控制;另一类是覆盖图层(Overlays),也就是覆盖在底图上的其他图层,一次可以覆盖一个图层,也可以覆盖多个图层,甚至可以不覆盖任何图层,在地图图层控件中用复选框控制。

首先要创建基础底图(Base Layers)

    //添加瓦片图层(作为底图备选)let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);let somedomainLayer = L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});   //基础底图(每次只能有一个)let baseLayers = {openstreetmapLayer,somedomainLayer,};

这里要注意的是openstreetmapLayer图层已经直接添加到了地图上,所以后面我们会看到基础地图的单选项,默认选中的是openstreetmapLayer选项

创建覆盖图层(Overlays)

    //覆盖图层let overlays = {// circle,// littleton,// denver,// aurora,// golden,'<i style="color:red;">featureGroup</i>': featureGroup};

注意这里的key值就是图层控制里面要显示的label,这里可以直接用html标签,这种设计真的很方便,后面可以看看呈现的效果featureGroup就是上面用到的featureGroup将 circle、ittleton、 denver、 aurora、 golden这几个marker都包含在里面,方便一起操作

实例化 L.control.layers

 //添加图层管理组件let layerControl = L.control.layers(baseLayers, overlays, {position: 'topright'}).addTo(this.mainMap);

这里就用到了上边的 baseLayersoverlays

右上角展开的就是我们添加的图层控制组件,上边的单选就是底图的选择(每次只会有一种底图)。下面的多选就是我们后面添加的featureGroup,它的label变成了斜体红色就是因为我们上面提到的用了html的标签和样式。

完整代码

<template><div id="mainMap"></div>
</template><script>
export default {name: "MainMap",data: () => {return {centerLatLng: [25, 102.7],mainMap: null}},methods: {},mounted() {this.mainMap = L.map('mainMap', {center: [25, 102.7], // 地图中心zoom: 14, //缩放比列zoomControl: true, //禁用 + - 按钮doubleClickZoom: true, // 禁用双击放大attributionControl: false, // 移除右下角leaflet标识});//添加瓦片图层(作为底图备选)let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);let somedomainLayer = L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});let circle = L.circle(this.centerLatLng, {radius: 100, fillColor: 'red'});let littleton = L.marker([25.61, 102.7]).bindPopup('This is Littleton, CO.');let denver = L.marker([25.61, 102.71]).bindPopup('This is Denver, CO.');let aurora = L.marker([25.61, 102.72]).bindPopup('This is Aurora, CO.');let golden = L.marker([25.61, 102.73]).bindPopup('This is Golden, CO.');//相当于arcgis的featureLayerlet featureGroup = L.featureGroup([circle, littleton, denver, aurora, golden]);featureGroup.addTo(this.mainMap);//聚焦所有的markerlet bound = featureGroup.getBounds();this.mainMap.fitBounds(bound);//基础底图(每次只能有一个)let baseLayers = {openstreetmapLayer,somedomainLayer,};//覆盖图层let overlays = {// circle,// littleton,// denver,// aurora,// golden,'<i style="color:red;">layerGroup</i>': featureGroup};//添加图层管理组件let layerControl = L.control.layers(baseLayers, overlays, {position: 'topright'}).addTo(this.mainMap);}
}
</script><style scoped>#mainMap {width: 100vw;height: 100vh;
}
</style>

本文为学习笔记,仅供参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2659903.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

[每周一更]-(第44期):GIT版本控制之忽略文件

基础概念 在 Git 中&#xff0c;可以通过 .gitignore 文件来指定不需要纳入版本控制的文件或文件夹&#xff0c;这些被忽略的文件或文件夹不会被提交到仓库中。 在项目根目录下创建一个名为 .gitignore 的文件&#xff0c;并在其中列出需要忽略的文件或文件夹。一些常见的示例…

uniapp的分包使用记录

UniApp的分包是一种将应用代码划分为多个包的技术。分包的核心思想是将不同部分的代码划分为不同的包&#xff0c;按需加载&#xff0c;从而提高应用性能。使用UniApp的条件编译功能&#xff0c;开发人员可以根据需要将代码划分为多个包。每个包都包含一组页面和组件&#xff0…

SpringBoot+ShardingSphereJDBC实战(读写分离,分库分表,垂直拆分、水平拆分)附源码

参考&#xff1a;https://www.51cto.com/article/747736.html https://blog.csdn.net/qq_41581588/article/details/126966665 源码地址&#xff1a;gitgitee.com:jackXUYY/springboot-example.git 读写分离测试 我们启用后缀名为dev的配置文件&#xff0c;如下&#xff0c;…

公司创建百度百科需要哪些内容?

一个公司或是一个品牌想要让自己更有身份&#xff0c;更有知名度&#xff0c;更有含金量&#xff0c;百度百科词条是必不可少的。通过百度百科展示公司的详细信息&#xff0c;有助于增强用户对公司的信任感&#xff0c;提高企业形象。通过百度百科展示公司的发展历程、领导团队…

【网络安全 | 扫描器】御剑安装及使用教程详析

御剑是一款传统的Web网络安全综合检测程序&#xff0c;支持对PHP、JSP、ASPX等文件进行扫描&#xff0c;具备全扫描、网络安全扫描和主机安全扫描能力&#xff0c;方便发现网站漏洞。 文章目录 下载使用教程 本文对御剑的安装及使用教程进行详析 下载 下载地址读者可自行上网…

Keras多分类鸢尾花DEMO

完整的一个小demo&#xff1a; pandas1.2.4 numpy1.19.2 python3.9.2 import numpy as np import pandas as pd import matplotlib.pyplot as plt from pandas import DataFrame from scipy.io import loadmat from sklearn.model_selection import train_test_split impor…

Rhinos各版本安装指南

下载链接 https://pan.baidu.com/s/1L5qeUPMW32d7zR-GlVVZIw?pwd0531 温馨提示&#xff1a;若您下载的安装包与该安装步骤不同&#xff0c;说明您使用的是之前被淘汰的安装包&#xff0c;请通过该页面的下载链接重新下载。 1.鼠标右击【Rhino8.1(64bit)】压缩包&#xff08…

单挑力扣(LeetCode)SQL题:1951. 查询具有最多共同关注者的所有两两结对组(难度:中等)

题目&#xff1a;1951. 查询具有最多共同关注者的所有两两结对组 &#xff08;通过次数2,464 | 提交次数3,656&#xff0c;通过率67.40%&#xff09; 表: Relations ------------------- | Column Name | Type | ------------------- | user_id | int | | follower_id |…

电子握力器改造

toy_hand_game 介绍 消耗体力玩具&#xff0c;使用握力器(Grip Strengthener)控制舵机旋转。 开始设想是控制丝杆电机滑动&#xff0c;两套设备就可以控制两个丝杆电机进行“模拟拔河”&#xff0c;后续发现硬件设计错误&#xff0c;ULN2003不能控制两相四线电机&#xff0c;…

任务调度-hangfire

目录 一、Hangfire是什么&#xff1f; 二、配置服务 1.配置Hangfire服务 2.添加中间件 3.权限控制 三、配置后台任务 1.在后台中调用方法 2.调用延时方法 3.执行周期性任务 四、在客户端上配置任务 1.在AddHangfire添加UseHangfireHttpJob方法 2.创建周期任务 3.创建只读面板 总…

Oracle 12c rac 搭建 dg

环境 rac 环境 &#xff08;主&#xff09;byoradbrac 系统版本&#xff1a;Red Hat Enterprise Linux Server release 6.5 软件版本&#xff1a;Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1&#xff1a;172.17.38.44 byoradb2&#xff1a;…

用轻量级ORM--Dapper实现泛型仓储

阅读本文你的收获 了解Dapper的适用场景了解Dapper的本质其实是一些扩展方法学会使用Dapper的扩展Domel来实现泛型仓储 一、什么是Dapper&#xff1f; Dapper是一个轻量级的ORM&#xff08;对象关系映射&#xff09;工具&#xff0c;用于简化数据库操作。它和Entity Framewor…

第五章 与HTTP协作的Web服务器

5.1 用单台虚拟主机实现多个域名 在传统的基于IP地址的服务器配置中&#xff0c;一台服务器通常只能提供一个域名的服务。然而&#xff0c;通过虚拟主机的技术&#xff0c;同一台服务器可以根据请求中的域名&#xff0c;区分并提供不同的网站内容。这使得在一台物理或虚拟服务…

如何在Mac中设置三指拖移,这里有详细步骤

三指拖移手势允许你选择文本&#xff0c;或通过在触控板上用三指拖动窗口或任何其他元素来移动它。它可以用于快速移动或调整窗口、文件或图像在屏幕上的位置。 然而&#xff0c;这个手势在默认情况下是禁用的&#xff0c;因此在本教程中&#xff0c;我们将向你展示如何在你的…

Java—Throwing Exceptions

一、指定方法引发的异常 上一节展示了如何为ListOfNumbers类中的writeList&#xff08;&#xff09;方法编写异常处理程序。有时&#xff0c;代码捕获可能在其中发生的异常是适当的。然而&#xff0c;在其他情况下&#xff0c;最好让调用堆栈更上层的方法处理该异常。例如&…

DRF从入门到精通六(排序组件、过滤组件、分页组件、异常处理)

文章目录 一、排序组件继承GenericAPIView使用DRF内置排序组件继承APIView编写排序 二、过滤组件继承GenericAPIView使用DRF内置过滤器实现过滤使用第三方模块django-filter实现and关系的过滤自定制过滤类排序搭配过滤使用 三、分页组件分页器一&#xff1a;Pagination&#xf…

web3方向产品调研

每次互联网形态的改变&#xff0c;都会对世界产生很大的影响&#xff0c;上一次对社会产生重大影响的互联网形态&#xff08;Web2.0&#xff09;催生了一批改变人类生活和信息交互方式的企业。 目录 概述DAO是什么&#xff1f;为什么我们需要DAO? 金融服务金融桥接及周边服务D…

Go 中有效并发的模式

设计高效可靠的并发系统 在现代软件开发领域中&#xff0c;利用并发的能力已经变得至关重要。随着应用程序的复杂性增加和数据处理需求的增长&#xff0c;编写既高效又可靠的并发代码成为了一个重要的关注点。为了解决这个挑战&#xff0c;开发者们已经制定了一些模式和最佳实…

Kubeadmin实现k8s集群:

Kubeadmin来快速搭建一个k8s集群&#xff1a; 二进制搭建适合大集群&#xff0c;50台以上的主机&#xff0c; 但是kubeadm更适合中小企业的业务集群 环境&#xff1a; Master&#xff1a;20.0.0.71 2核4G 或者4核8G docker kubelet kubectl flannel Node1&#xff1a;20.…

【C语言】程序练习(二)

大家好&#xff0c;这里是争做图书馆扫地僧的小白。 个人主页&#xff1a;争做图书馆扫地僧的小白_-CSDN博客 目标&#xff1a;希望通过学习技术&#xff0c;期待着改变世界。 目录 前言 一、运算符练习 1 算术运算符 1.1 练习题&#xff1a; 2 自加自减运算符 3 关系运…