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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

介绍个酷炫,适合装逼的命令

Hollywood - 给你的命令行加点魔法般的动画效果 作为命令行的重度用户,你是否想让枯燥的终端界面来点生动有趣的元素?Hollywood来了!这是一个无比诙谐、小巧玲珑而又功能强大的动画效果命令行工具。 Hollywood可以为文本添加各种动画效果,让你的输出显示得像电影般生动活泼。…

MYSQL面试知识点手册

第一部分&#xff1a;MySQL 基础知识 1.1 MySQL 简介 MySQL 是世界上最流行的开源关系型数据库管理系统之一&#xff0c;它以性能卓越、稳定可靠和易用性而闻名。MySQL 主要应用在 Web 开发、大型互联网公司、企业级应用等场景&#xff0c;且广泛用于构建高并发、高可用的数据…

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法&#xff0c;该方法也会在其原型上 static静态数据&#xff0c;访问静态属性通过 类名.id getter和setter getter&#xff1a;定义一个属性&…

计算机人工智能前沿进展-大语言模型方向-2024-09-20

计算机人工智能前沿进展-大语言模型方向-2024-09-20 1. Multimodal Fusion with LLMs for Engagement Prediction in Natural Conversation Authors: Cheng Charles Ma, Kevin Hyekang Joo, Alexandria K. Vail, Sunreeta Bhattacharya, Alvaro Fern’andez Garc’ia, Kailan…

day51

shell脚本 修改环境变量 1) 查看已有的特殊系统变量 系统配置好的&#xff0c;内置的环境 env 或者 printenv 2) 查看环境变量 echo $HOME 环境变量的作用&#xff1a; 当在终端直接运行指令时&#xff0c;会默认去环境变量保存的路径中查找指令&#xff0c;如果没找到该…

Zookeeper安装使用教程

# 安装 官网下载安装包 #配置文件 端口默认8080&#xff0c;可能需要更改一下 #启动 cd /Users/lisongsong/software/apache-zookeeper-3.7.2-bin/bin ./zkServer.sh start #查看运行状态 ./zkServer.sh status #停止 ./zkServer.sh stop #启动客户端 ./zkCli.sh ls /

【高分系列卫星简介】

高分系列卫星是中国国家高分辨率对地观测系统&#xff08;简称“高分工程”&#xff09;的重要组成部分&#xff0c;旨在提供全球范围内的高分辨率遥感数据&#xff0c;广泛应用于环境监测、灾害应急、城市规划、农业估产等多个领域。以下是对高分系列卫星及其数据、相关参数和…

英语六级-学习

01 英语分值比例 02听力学习 听力练习&#xff0c;基础好选择标准VOA和BBC。基础差选择VOA慢速。 听力内容包括不受政治争议的内容&#xff0c;社会生活类(奇闻趣事、日常生活)、经济类(商务、职场相关)、环保类、互联网类---------根据各类主题快速找到录音材料中心点。 研…

搭建本地DVWA靶场教程 及 靶场使用示例

1. DVWA简介 DVWA&#xff08;Damn Vulnerable Web Application&#xff09;一个用来进行安全脆弱性鉴定的PHP/MySQL Web 应用平台&#xff0c;旨在为网络安全专业人员测试自己的专业技能和工具提供合法的环境&#xff0c;帮助web开发者更好的理解web应用安全防范的过程。 DVW…

数据结构之二叉树(1)

数据结构之二叉树&#xff08;1&#xff09; 一、树 1、树的概念与结构 &#xff08;1&#xff09;树是一种非线性的数据结构&#xff0c;由n(n>0)个有限结点组成一个具有层次关系的集合。 &#xff08;2&#xff09;树有一个特殊的结点&#xff0c;叫做根结点&#xff…

村落检测系统源码分享

村落检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

Linux 查看磁盘 df -h 已经查看目录大小 du -sh ./*

使用df -h 命令可以查看磁盘信息 df -h 如下图所示: 获取当前目录 每个目录大小 du -sh ./* du -sh ./* 如果文件比较多 我们想获取文件大小最大的前10个 可以运行如下命令: du -ah | sort -rh | head -n 10 du -ah&#xff1a;显示当前目录及其子目录的所有文件和目录的…

条件编译代码记录

#include <iostream>// 基类模板 template<typename T> class Base { public:void func() {std::cout << "Base function" << std::endl;} };// 特化的子类 template<typename T> class Derived : public Base<T> { public:void…

【混淆矩阵】Confusion Matrix!定量评价的基础!如何计算全面、准确的定量指标去衡量模型分类的好坏??

【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01; 如何计算全面、准确的定量指标去衡量模型分类的好坏&#xff1f;&#xff1f; 文章目录 【混淆矩阵】Confusion Matrix&#xff01;定量评价的基础&#xff01;1. 混淆矩阵2.评价指标3.混淆矩阵及评价指标…

Mysql InnoDB 存储引擎简介

InnoDB 存储引擎是 Mysql 的默认存储引擎&#xff0c;它是由 Innobase Oy 公司开发的 Mysql 为什么默认使用 InnoDB 存储引擎 InnoDB 是一款兼顾高可靠性和高性能的通用存储引擎 在 Mysql 5.5 版本之前&#xff0c;默认是使用 MyISAM 存储引擎&#xff0c;在 5.5 及其之后版…

【红动中国-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

Java原生HttpURLConnection实现Get、Post、Put和Delete请求完整工具类分享

这里博主纯手写了一个完整的 HTTP 请求工具类&#xff0c;该工具类支持多种请求方法&#xff0c;包括 GET、POST、PUT 和 DELETE&#xff0c;并且可以选择性地使用身份验证 token。亲测可用&#xff0c;大家可以直接复制并使用这段代码&#xff0c;以便在自己的项目中快速实现 …

powerbi -L10-文件夹内的文件名

powerbi -L10-文件夹内的文件名 Folder.Contents letSource Folder.Contents("\\your_folder\ your_folder "),#"Removed Other Columns" Table.SelectColumns(Source,{"Name", "Date modified", "Folder Path"}), in#&q…

云原生信息安全:筑牢数字化时代的安全防线

云原生信息安全&#xff1a;筑牢数字化时代的安全防线 一、云原生信息安全概述 云原生安全包含两层重要含义。一方面&#xff0c;面向云原生环境的安全&#xff0c;目标是防护云原生环境中的基础设施、编排系统和微服务等系统的安全。在云原生内部&#xff0c;安全机制多以云原…

7个提升网站分页体验的 CSS 和 JavaScript 代码片段

文章目录 前言正文1.简洁直观的悬停分页效果2.实时显示页码的分页3.适合响应式设计的多功能分页4.专为移动设备优化的分页5.无数字的极简分页设计6.触屏友好的分页7.结合无限滚动与分页的设计 总结 前言 分页是内容丰富的网站中不可缺少的导航工具&#xff0c;能帮助用户更轻松…