当前位置： 首页 > news >正文

leaflet加载GeoServer的WMS地图服务.md

news 2026/5/31 14:42:09

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地图服务&#xff0c;该示例涵盖了涵盖了 “WMS图层加载、WMS图层动态投影、图层index顺序调整、图层添加、高德地图、腾讯地图OpenStreet地图”&#xff0c;WMS图层加载看代码中标注的核心代码部分即可。 <!DOCTYPE html> <html xmlns&qu…...

编程日记 2024/9/21 6:07:55

Shire 智能体市场：IDE 一键安装多智能体，协同打造集体智慧 Copilot

太长不看版&#xff1a;在新版本&#xff08;0.8&#xff09;的 Shire 中&#xff0c;你可以通过 Shire 智能体市场&#xff0c;一键下载和安装多个智能体&#xff0c;并直接在你的当前项目中使用。与此同时&#xff0c;你还可以 将你的 Shire 代码段或者智能体上传到 Shire 智…...

编程日记 2024/9/21 6:05:54

机器学习笔记（一）初识机器学习

1.定义 机器学习是一门多学科交叉专业&#xff0c;涵盖概率论知识&#xff0c;统计学知识&#xff0c;近似理论知识和复杂算法知识&#xff0c;使用计算机作为工具并致力于真实实时的模拟人类学习方式&#xff0c;并将现有内容进行知识结构划分来有效提高学习效率。 机器学习有…...

编程日记 2024/9/21 6:04:53

linux如何查看当前的目录所在位置

在Linux系统中&#xff0c;查看当前目录所在位置的常用命令是 pwd&#xff0c;它代表 "print working directory"&#xff08;打印工作目录&#xff09;。当你在终端中输入 pwd 并按下回车键时&#xff0c;它会显示当前所在的完整路径。 打开终端&#xff0c;然后输…...

编程日记 2024/9/21 6:02:51

【JavaEE】线程创建和终止，Thread类方法，变量捕获（7000字长文）

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c;你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;7000字长文&#xff0c;希望本文内容能够帮助到你&#xff01; 目录 一&#xff1a;创建线程五种方式 方式一&#xff1a;继承Thread类&#xff0c;…...

编程日记 2024/9/21 6:01:49

[Python数据可视化] Plotly：交互式数据可视化的强大工具

引言&#xff1a; 在数据分析和可视化的世界中&#xff0c;Plotly 是一颗耀眼的明星。它是一个开源的交互式图表库&#xff0c;支持多种编程语言&#xff0c;包括 Python、R 和 JavaScript。Plotly 的强大之处在于它能够创建出既美观又具有高度交互性的图表&#xff0c;使得数据…...

编程日记 2024/9/21 5:59:45

Excel--DATEDIF函数的用法及参数含义

DATEDIF函数的用法为: DATEDIF(start_date,end_date,unit),start_date表示的是起始时间&#xff0c;end_date表示的是结束时间。unit表示的是返回的时间代码&#xff0c;是天、月、年等。如下: Datedif函数的参数含义unit参数返回值的意义"y"两个时间段之间的整年数…...

编程日记 2024/9/21 5:57:43

执行网络攻击模拟的 7 个步骤

在进攻和防守策略方面&#xff0c;我们可以从足球队和美式足球队身上学到很多东西。球员们会分析对方球队的策略&#xff0c;找出弱点&#xff0c;相应地调整进攻策略&#xff0c;最重要的是&#xff0c;练习、练习、再练习。作为最低要求&#xff0c;网络安全部门也应该这样做…...

编程日记 2024/9/21 5:56:43

技术成神之路：设计模式（十四）享元模式

介绍 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构性设计模式&#xff0c;旨在通过共享对象来有效地支持大量细粒度的对象。 1.定义 享元模式通过将对象状态分为内部状态&#xff08;可以共享&#xff09;和外部状态&#xff08;不可共享&#xff09;&#xf…...

编程日记 2024/9/21 5:54:41

使用systemctl实现开机自启动jar包

目录 1. 创建服务文件2. 配置服务文件3. 重新加载 systemd 配置4. 启动服务5. 查看服务状态 1. 创建服务文件 创建服务文件&#xff1a; 在 /etc/systemd/system/ 目录下创建一个新的服务文件 myapp.service。 sudo vim /etc/systemd/system/myapp.service2. 配置服务文件 按i…...

编程日记 2024/9/21 5:53:40

2024.9.20营养小题【2】（动态分配二维数组）

这道题里边涉及到了动态分配二维数组的知识点&#xff0c;不刷这道题我也不知道这个知识点&#xff0c;算是一个比较进阶一点的知识点了。 参考&#xff1a;C语言程序设计_动态分配二维数组_哔哩哔哩_bilibili【C/C 数据结构 】二维数组结构解析 - 知乎 (zhihu.com)...

编程日记 2024/9/21 5:52:39

前端web端项目运行的时候没有ip访问地址

我们发现 没有netWork 的地址 导致 团队内其他同学无法打开我们的地址 进行访问 在page.json 中的运行 指令中 添加 --host 记得加上空格 这样我们就可以看到这个地址了 团队其他同学 就可以访问我们这个地址了...

编程日记 2024/9/21 5:51:38

微服务架构陷阱与挑战

微服务架构6大陷阱 现在微服务的基础设施还是越来越完善了&#xff0c;现在基础设施缺乏的问题逐渐被解决了。 拆分粒度太细&#xff0c;服务关系复杂 拆分降低了服务的内部复杂度&#xff0c;但是提升了系统的外部复杂度&#xff0c;服务越多&#xff0c;服务和服务之间的连接…...

编程日记 2024/9/21 5:48:35

react的事件绑定

文章目录 基本示例使用箭头函数事件对象阻止默认行为绑定事件处理函数的上下文 在 React 中&#xff0c;事件绑定主要通过 JSX 属性来实现。事件处理函数被传递给相应的事件属性&#xff0c;例如 onClick、onChange 等。这些属性会被绑定到 HTML 元素上&#xff0c;并在事件发生…...

编程日记 2024/9/21 5:47:35

ASP.NET Core 入门教学二十九 DDD设计

在软件开发中&#xff0c;领域驱动设计&#xff08;Domain-Driven Design&#xff0c;简称DDD&#xff09;是一种重要的软件设计方法论&#xff0c;它强调通过深入理解业务领域来构建高质量的软件系统。DDD的核心思想是将复杂的业务逻辑集中在领域模型中&#xff0c;并通过分层…...

编程日记 2024/9/21 5:46:34

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…...

编程日记 2024/9/21 5:44:32

基于python flask的高血压疾病预测分析与可视化系统的设计与实现，使用随机森林、决策树、逻辑回归、xgboost等机器学习库预测

研究背景 随着现代社会的快速发展&#xff0c;生活方式的改变和人口老龄化的加剧&#xff0c;心血管疾病&#xff0c;尤其是高血压&#xff0c;已成为全球范围内的重大公共健康问题。高血压是一种常见的慢性疾病&#xff0c;其主要特征是动脉血压持续升高。长期不控制的高血压…...

编程日记 2024/9/21 5:43:31

Lombok 与 EasyExcel 兼容性问题解析及建议

在 Java 开发中&#xff0c;Lombok 被广泛用于减少样板代码&#xff0c;如 Getter、Setter、构造函数等。然而&#xff0c;在与像 EasyExcel 这样依赖反射机制的库一起使用时&#xff0c;可能会遇到一些意想不到的问题。本文将深入探讨 Lombok 与 EasyExcel 之间的兼容性问题&a…...

编程日记 2024/9/21 5:40:28

Kubeadm快速安装 Kubernetes集群

1. Kubernetes简介 Kubernetes&#xff08;k8s&#xff09;是谷歌开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。它具有以下特点&#xff1a; 开源容器化自动部署扩展高可用 2. Kubernetes架构 Kubernetes遵循主从式架构设计&#xff0c;主要分…...

编程日记 2024/9/21 5:39:27

OpenJudge | 八皇后问题

总时间限制: 10000ms 内存限制: 65536kB 描述 在国际象棋棋盘上放置八个皇后&#xff0c;要求每两个皇后之间不能直接吃掉对方。 输入 无输入。 输出 按给定顺序和格式输出所有八皇后问题的解&#xff08;见Sample Output&#xff09;。 样例输入 (null)样例输出 No. 1 …...

编程日记 2024/9/21 5:38:26

CVPR 2023反无人机数据集实战：用ModelScope上的开源模型快速上手目标检测

CVPR 2023反无人机数据集实战&#xff1a;用ModelScope上的开源模型快速上手目标检测无人机技术的普及带来了新的安全挑战&#xff0c;从隐私侵犯到关键设施威胁&#xff0c;反无人机技术正成为计算机视觉领域的热点。CVPR 2023反无人机竞赛提供的开源数据集和基线模型&#xf…...

编程新知 2026/5/26 3:38:09

SwitchyOmega+Burp无感抓包实战：解决HTTPS拦截与流量路由难题

1. 为什么“无感抓包”是BurpSuite日常使用的分水岭刚接触Web安全测试的朋友常有个错觉&#xff1a;装上Burp Suite&#xff0c;配好代理&#xff0c;打开浏览器&#xff0c;点几下网页——流量就该自动进来了。结果现实是&#xff1a;首页打不开、登录态丢失、HTTPS报错满屏、…...

编程新知 2026/5/26 3:15:58

物联网与云技术赋能咖啡后处理：CeriTech 的实时监控系统实践

1. 项目概述&#xff1a;用物联网与云技术重塑咖啡后处理在印尼的咖啡农场里&#xff0c;传统的发酵与干燥过程很大程度上依赖“感觉”和“经验”。一位有经验的农人可能会用手触摸、用鼻子闻&#xff0c;或者根据天气和日照时间来估算发酵是否完成、干燥是否均匀。这种方法固然…...

编程新知 2026/5/26 1:51:13

终极免费方案：WandEnhancer完整解锁WeMod Pro功能快速指南

终极免费方案&#xff1a;WandEnhancer完整解锁WeMod Pro功能快速指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否渴望享受WeMod Pro会员的所…...

编程新知 2026/5/26 0:26:14

半导体元件（二极管/三极管/MOS管/IC）损坏诊断全解

半导体元件&#xff08;二极管、三极管、MOS 管、集成电路&#xff09;是 PCB 的核心功能单元&#xff0c;对过压、过流、ESD、高温极度敏感&#xff0c;损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片&#xff0c;不仅成本高&#xff0c;还易误判。​一…...

编程新知 2026/5/26 0:18:08

别被忽悠了！2026亲测靠谱的AI论文网站|避坑精选版

2026 年学术写作工具已高度分化&#xff0c;千笔AI与ThouPen为全流程首选&#xff0c;豆包、DeepSeek 为专项强手&#xff1b;避坑关键&#xff1a;拒绝假文献、严控 AIGC 率、优先国内适配、免费试用先行。 一、TOP3 全流程首选&#xff08;亲测不踩雷&#xff09; 1. 千笔AI&…...

编程新知 2026/5/25 23:31:41

告别SVN恐惧症：美术策划也能轻松上手的Unity PlasticSCM极简入门（附团队项目拉取实战）

告别SVN恐惧症&#xff1a;美术策划也能轻松上手的Unity PlasticSCM极简入门&#xff08;附团队项目拉取实战&#xff09; 在游戏开发团队中&#xff0c;版本控制系统是协作的基石&#xff0c;但传统工具如SVN往往让非技术成员望而生畏。当美术资源频繁更新、策划案不断迭代时&…...

编程新知 2026/5/25 22:12:18

Windows Cleaner：终极免费系统清理工具，彻底解决C盘空间不足问题

Windows Cleaner&#xff1a;终极免费系统清理工具&#xff0c;彻底解决C盘空间不足问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否经常遇到C盘爆红、…...

编程新知 2026/5/25 20:36:10

Lovable电商网站搭建：如何用不到3人技术团队，72小时内上线PCI-DSS合规MVP版本？

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Lovable电商网站搭建 Lovable 是一个面向中小商户的轻量级电商解决方案&#xff0c;采用现代 Web 技术栈构建&#xff0c;强调可扩展性、用户体验与快速部署能力。本章将指导你从零开始搭建一个具备商品展示、…...

编程新知 2026/5/25 18:08:09

AI 应用原型开发阶段利用 Taotoken 快速进行多模型效果对比

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 AI 应用原型开发阶段利用 Taotoken 快速进行多模型效果对比 在构建一个 AI 应用的原型时&#xff0c;开发者常常面临一个核心问题&…...

编程新知 2026/5/25 16:31:57