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

时间 2019-11-12

标签 leaflet 加载地图 geoserver wms 服务繁體版

原文原文链接

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

效果图：app

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

1、加载高德地图代码url

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"
        });

2、加载Geoserver的WMS服务代码spa

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);

所有代码：code

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);