Leaflet.WMS 开源项目教程

滕妙奇

于 2024-08-23 08:13:07 发布

阅读量403

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00212/article/details/141446776

版权

Leaflet.WMS 开源项目教程

leaflet.wmsA Leaflet plugin for working with Web Map services, providing: single-tile/untiled/nontiled layers, shared WMS sources, and GetFeatureInfo-powered identify.项目地址:https://gitcode.com/gh_mirrors/le/leaflet.wms

项目介绍

Leaflet.WMS 是一个基于 Leaflet 地图库的插件，专门用于与 Web Map Service (WMS) 服务器进行交互。通过这个插件，开发者可以轻松地在 Leaflet 地图上添加 WMS 图层，实现地图数据的动态加载和显示。Leaflet.WMS 支持多种 WMS 功能，如透明度控制、图层叠加和样式定制等。

项目快速启动

安装

首先，确保你已经安装了 Leaflet。然后，通过 npm 或直接下载的方式安装 Leaflet.WMS：

npm install leaflet.wms

或者直接在 HTML 文件中引入：

<script src="path/to/leaflet.wms.js"></script>

基本使用

以下是一个简单的示例，展示如何在 Leaflet 地图上添加一个 WMS 图层：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet WMS 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="path/to/leaflet.wms.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
            layers: 'TOPO-OSM-WMS',
            format: 'image/png',
            transparent: true,
            version: '1.1.1'
        }).addTo(map);
    </script>
</body>
</html>