leaflet加载GeoServer的WMS地图服务.md
leaflet加载GeoServer的WMS地图服务，该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”，WMS图层加载看代码中标注的核心代码部分即可。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>leaflet Demo 2</title><style>#map {height: 900px;}</style><!-- css文件 --><link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/><!-- js文件 --><script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
</head><body>
<div id="map"></div>
<script>/*涵盖了WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图*/var map = new L.Map('map', {//不写crs参数默认就是3857坐标了// crs: L.CRS.EPSG4326,center: new L.LatLng(39.86, 116.45),zoom: 4,maxZoom: 18,zoomControl: false});/*---------------------次要代码，增加背景地图，可删除,start-------------------------*/L.control.zoom({zoomInTitle: "放大", zoomOutTitle: "缩小"}).addTo(map)var baseLayers = {"高德影像": L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {maxZoom: 18}).addTo(map),"OSM": L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}),"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {maxZoom: 18}),"腾讯地图": L.tileLayer('http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0', {maxZoom: 18}),};var layerControl = L.control.layers(baseLayers, {}, {position: 'topleft',collapsed: true}).addTo(map);/*---------------------次要代码，增加背景地图，可删除,end-------------------------*//*---------------------核心代码，加载WMS地图,start-------------------------*/// 加载WMS。地址中china表示工作区的名称。var wmsLayer = L.tileLayer.wms("http://localhost:8081/geoserver/china/wms?", {layers: '中国各省',// 要加载的图层名format: 'image/png',//返回的数据格式transparent: true,opacity: 0.6,//图层透明度设置，设为1时不透明。keepBuffer: 6,//平移地图时保留4行4列缓存不从div中卸载，以便平移过来后地图还在，默认值是2。zIndex: 10,//设置图层顺序的第一种方法//这里要设置WMS的坐标系哦，可动态投影成map里的crs坐标系crs: L.CRS.EPSG4326,//可省略该参数，一般取geoserver网格集里的坐标系。tileSize: 256,//默认就是256，可省略。maxNativeZoom: 15,//基于15级继续无极放大，该值一般等于maxZoom,无极放大的最大级数取决于map的maxZoom值。// styles: '',//geoserver里的图层样式，可省略该参数。// minZoom:0,// maxZoom:18,// bounds:[最小纬度,最小经度,最大纬度,最大经度],//超过该范围的地图就不请求了。// subdomains:多子域设置。后端部署多子域，摆脱大屏环境Chrome浏览器对并发请求的限制。});//设置图层顺序有3种方法：方法1直接在上面设置图层的zIndex属性，方法2如下，方法3见下面的注释。wmsLayer.setZIndex(10);//设置大一点的图层索引值，避免图层被其他图层遮盖。也可以通过pane方式调整索引https://blog.csdn.net/qq_37550440/article/details/130154128wmsLayer.addTo(map);// map.addLayer(wmsLayer);/*---------------------核心代码，加载WMS地图,end-------------------------*/
</script>
</body>
</html>
相关文章：
leaflet加载GeoServer的WMS地图服务.md
leaflet加载GeoServer的WMS地图服务，该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”，WMS图层加载看代码中标注的核心代码部分即可。 <!DOCTYPE html> <html xmlns&qu…...
Shire 智能体市场：IDE 一键安装多智能体，协同打造集体智慧 Copilot
太长不看版：在新版本（0.8）的 Shire 中，你可以通过 Shire 智能体市场，一键下载和安装多个智能体，并直接在你的当前项目中使用。与此同时，你还可以 将你的 Shire 代码段或者智能体上传到 Shire 智…...
机器学习笔记（一）初识机器学习
1.定义 机器学习是一门多学科交叉专业，涵盖概率论知识，统计学知识，近似理论知识和复杂算法知识，使用计算机作为工具并致力于真实实时的模拟人类学习方式，并将现有内容进行知识结构划分来有效提高学习效率。 机器学习有…...
linux如何查看当前的目录所在位置
在Linux系统中，查看当前目录所在位置的常用命令是 pwd，它代表 "print working directory"（打印工作目录）。当你在终端中输入 pwd 并按下回车键时，它会显示当前所在的完整路径。 打开终端，然后输…...
【JavaEE】线程创建和终止，Thread类方法，变量捕获（7000字长文）
阿华代码，不是逆风，就是我疯，你们的点赞收藏是我前进最大的动力！！7000字长文，希望本文内容能够帮助到你！ 目录 一：创建线程五种方式 方式一：继承Thread类，…...
[Python数据可视化] Plotly：交互式数据可视化的强大工具
引言： 在数据分析和可视化的世界中，Plotly 是一颗耀眼的明星。它是一个开源的交互式图表库，支持多种编程语言，包括 Python、R 和 JavaScript。Plotly 的强大之处在于它能够创建出既美观又具有高度交互性的图表，使得数据…...
Excel--DATEDIF函数的用法及参数含义
DATEDIF函数的用法为: DATEDIF(start_date,end_date,unit),start_date表示的是起始时间，end_date表示的是结束时间。unit表示的是返回的时间代码，是天、月、年等。如下: Datedif函数的参数含义unit参数返回值的意义"y"两个时间段之间的整年数…...
执行网络攻击模拟的 7 个步骤
在进攻和防守策略方面，我们可以从足球队和美式足球队身上学到很多东西。球员们会分析对方球队的策略，找出弱点，相应地调整进攻策略，最重要的是，练习、练习、再练习。作为最低要求，网络安全部门也应该这样做…...
技术成神之路：设计模式（十四）享元模式
介绍 享元模式（Flyweight Pattern）是一种结构性设计模式，旨在通过共享对象来有效地支持大量细粒度的对象。 1.定义 享元模式通过将对象状态分为内部状态（可以共享）和外部状态（不可共享）…...
使用systemctl实现开机自启动jar包
目录 1. 创建服务文件2. 配置服务文件3. 重新加载 systemd 配置4. 启动服务5. 查看服务状态 1. 创建服务文件 创建服务文件： 在 /etc/systemd/system/ 目录下创建一个新的服务文件 myapp.service。 sudo vim /etc/systemd/system/myapp.service2. 配置服务文件 按i…...
2024.9.20营养小题【2】（动态分配二维数组）
这道题里边涉及到了动态分配二维数组的知识点，不刷这道题我也不知道这个知识点，算是一个比较进阶一点的知识点了。 参考：C语言程序设计_动态分配二维数组_哔哩哔哩_bilibili【C/C 数据结构 】二维数组结构解析 - 知乎 (zhihu.com)...
前端web端项目运行的时候没有ip访问地址
我们发现 没有netWork 的地址 导致 团队内其他同学无法打开我们的地址 进行访问 在page.json 中的运行 指令中 添加 --host 记得加上空格 这样我们就可以看到这个地址了 团队其他同学 就可以访问我们这个地址了...
微服务架构陷阱与挑战
微服务架构6大陷阱 现在微服务的基础设施还是越来越完善了，现在基础设施缺乏的问题逐渐被解决了。 拆分粒度太细，服务关系复杂 拆分降低了服务的内部复杂度，但是提升了系统的外部复杂度，服务越多，服务和服务之间的连接…...
react的事件绑定
文章目录 基本示例使用箭头函数事件对象阻止默认行为绑定事件处理函数的上下文 在 React 中，事件绑定主要通过 JSX 属性来实现。事件处理函数被传递给相应的事件属性，例如 onClick、onChange 等。这些属性会被绑定到 HTML 元素上，并在事件发生…...
ASP.NET Core 入门教学二十九 DDD设计
在软件开发中，领域驱动设计（Domain-Driven Design，简称DDD）是一种重要的软件设计方法论，它强调通过深入理解业务领域来构建高质量的软件系统。DDD的核心思想是将复杂的业务逻辑集中在领域模型中，并通过分层…...
Rocprofiler测试
Rocprofiler测试 一.参考链接二.测试过程1.登录服务器2.使用smi获取列表3.使用rocminfo获取Agent信息4.准备测试用例5.The hardware counters are called the basic counters6.The derived metrics are defined on top of the basic counters using mathematical expression7.P…...
基于python flask的高血压疾病预测分析与可视化系统的设计与实现，使用随机森林、决策树、逻辑回归、xgboost等机器学习库预测
研究背景 随着现代社会的快速发展，生活方式的改变和人口老龄化的加剧，心血管疾病，尤其是高血压，已成为全球范围内的重大公共健康问题。高血压是一种常见的慢性疾病，其主要特征是动脉血压持续升高。长期不控制的高血压…...
Lombok 与 EasyExcel 兼容性问题解析及建议
在 Java 开发中，Lombok 被广泛用于减少样板代码，如 Getter、Setter、构造函数等。然而，在与像 EasyExcel 这样依赖反射机制的库一起使用时，可能会遇到一些意想不到的问题。本文将深入探讨 Lombok 与 EasyExcel 之间的兼容性问题&a…...
Kubeadm快速安装 Kubernetes集群
1. Kubernetes简介 Kubernetes（k8s）是谷歌开源的容器编排平台，用于自动化部署、扩展和管理容器化应用程序。它具有以下特点： 开源容器化自动部署扩展高可用 2. Kubernetes架构 Kubernetes遵循主从式架构设计，主要分…...
OpenJudge | 八皇后问题
总时间限制: 10000ms 内存限制: 65536kB 描述 在国际象棋棋盘上放置八个皇后，要求每两个皇后之间不能直接吃掉对方。 输入 无输入。 输出 按给定顺序和格式输出所有八皇后问题的解（见Sample Output）。 样例输入 (null)样例输出 No. 1 …...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分：派生类构造函数与析构函数 当创建一个派生类对象时，基类成员是如何初始化的？ 1.当派生类对象创建的时候，基类成员的初始化顺序 …...
Chrome 浏览器前端与客户端双向通信实战
Chrome 前端（即页面 JS / Web UI）与客户端（C 后端）的交互机制，是 Chromium 架构中非常核心的一环。下面我将按常见场景，从通道、流程、技术栈几个角度做一套完整的分析，特别适合你这种在分析和改…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...