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/130154128
    wmsLayer.addTo(map);
    // map.addLayer(wmsLayer);
    /*---------------------核心代码,加载WMS地图,end-------------------------*/
</script>
</body>
</html>
相关推荐
xiangshangdemayi4 小时前
Windows环境GeoServer打包Docker极速入门
windows·docker·容器·geoserver·打包·数据挂载
duansamve6 小时前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
羊子雄起18 天前
leaflet矢量瓦片vetorgrid显示聚合和图标裁剪显示不全的问题
javascript·leaflet·vectorgrid·显示不全
GIS瞧葩菜20 天前
GeoSever发布图层(保姆姬)
wms·geoserver·cesium
Crazy Struggle23 天前
.NET 实现的零部件离散型 MES+WMS 系统
wms·.net·mes·制造管理系统
尚学教辅学习资料25 天前
基于SpringCloud的WMS管理系统源码
后端·spring·spring cloud·wms
Odoo老杨1 个月前
免费开源Odoo软件如何实现电商仓库高效发货
wms·odoo·erp·企业数字化·企业信息化
千里马学框架1 个月前
安卓窗口wms/input小知识NO_INPUT_CHANNEL剖析
android·车载系统·framework·wms·input·系统开发
Crazy Struggle1 个月前
.NET 7+Vue 3 开源仓库管理系统 ModernWMS
vue.js·wms·.net·仓库管理系统
ikgade1 个月前
Leaflet 接入天地图服务
javascript·html·leaflet·天地图