leaflet加载高德地图和Geoserver的WMS服务

最新推荐文章于 2025-04-04 08:13:51 发布

weixin_30480075

最新推荐文章于 2025-04-04 08:13:51 发布

阅读量676

点赞数

原文链接：http://www.cnblogs.com/tuboshu/p/10752285.html

版权

本文主要将如何通过tileLayer加载高德地图，如何通过tileLayer.wms加载Geoserver的WMS服务，下面介绍主要的代码

效果图：

注：中国板块图是加载Geoserver的WMS服务完成的

一、加载高德地图代码

        var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
        var layer = new L.TileLayer(url, {
            subdomains:"1234"
        });

二、加载Geoserver的WMS服务代码

        var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms?", {
            layers: 'cite:bou2_4p',//需要加载的图层
            format: 'image/png',//返回的数据格式
            transparent: true,
            //crs: L.CRS.EPSG4326
        });
        map.addLayer(wmsLayer);

全部代码：

        var map = new L.Map("mapDiv", {
            zoom: 8,
            center: [39.9,116.40],
            boxZoom: true, 
        });
        var url = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
        var layer = new L.TileLayer(url, {
            subdomains:"1234"
        });
        map.addLayer(layer);
        var marker = new L.marker([39.99, 116.3]);
        //marker.addTo(map);
        var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms?", {
            layers: 'cite:bou2_4p',//需要加载的图层
            format: 'image/png',//返回的数据格式
            transparent: true,
            //crs: L.CRS.EPSG4326
        });
        console.log(map.getCenter());
        map.addLayer(wmsLayer);

转载于:https://www.cnblogs.com/tuboshu/p/10752285.html