leaflet加載高德地圖和Geoserver的WMS服務

本文主要將如何通過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);