A Detailed Introduction of Webmapping with WMS and Leaflet

Web Map Service (WMS) is a way of publishing local geodata as map tiles, but more opetational. It can be published by GeoServer or other softwares e.g. QGIS.

Leaflet.js is a open source JS library, which is made for interacitve maps. With Mapbox , more maps can be designed, personalised and added to web applications via Leaflet.js .

Insert js libraries

Download the libs in your local folder, and include them in your HTML file.

<!-- Leaflet-->
<link rel="stylesheet" href="libs/leaflet.css"/>
<script src="libs/leaflet.js"></script>

<!-- GeoCoder-->
<link rel="stylesheet" href="libs/Control.OSMGeocoder.css"/>
<script src="libs/Control.OSMGeocoder.js"></script>

<!-- Overview-->
<link rel="stylesheet" href="libs/overview/MiniMap.css" />
<script src="libs/overview/MiniMap.js"></script>

<!-- Location-->
<link rel="stylesheet" href="libs/L.Control.Locate.min.css" />
<script src="libs/L.Control.Locate.js"></script>

<!-- Mouse position display-->
<link rel="stylesheet" href="libs/L.Control.MousePosition.css" />
<script src="libs/L.Control.MousePosition.js"></script>

<!-- Navigation Bar-->
<link rel="stylesheet" href="libs/NavBar/NavBar.css"/>
<script src="libs/NavBar/NavBar.js"></script>

<!-- Font-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Diaplay OSM as base map

<head>
	<!-- down load Leaflet lib from internet -->
	<link rel="stylesheet" href="libs/leaflet.css"/>
	<script src="libs/leaflet.js"></script>
</head>
<div id="map"></div>
<script>

//OSM as base map
var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

//map configuration	
var map = L.map('map', {
		layers: [OpenStreetMap], 
		center: [31.2, 121.4],    // default center coordinate, here is Shanghai
		zoom: 3	                  // default zoom level
	});
</script>

WMS Layer

// add WMS to map
var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/first/wms?', {
	    layers: 'first:railways_cn',
	}).addTo(map);

WMS is loaded as tailed photos, the default format is .jepg , so that the layer can not have transparent band. The upper layers will cover the base map. Change the tailed photo’s format and set transparency:

var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/first/wms?', {
    layers: 'first:railways_cn',
    format: 'image/png',
    transparent: true,
}).addTo(map);

Projection

Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 and CRS:4326. If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet.

Or set the layer’s coordinates in GeoServer .

Layer control

Base map

// base map server url
var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');

//add layer to a attribute		
var baseLayers = {
	"Open Street Map": OpenStreetMap,
	"World Imagery": WorldImagery
};

L.control.layers(baseLayers).addTo(map);

Overlays

// layers from Geoserver (format WMS)
var points = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:points_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var railways = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:railways_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var buildings = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:buildings_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var landuse = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:landuse_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var boundary = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:boundary_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});


// Group layers
var overlays = {
	"points": points,
	"railways": railways,
	"buildings": buildings,
	"landuse": landuse,
	"boundary": boundary,
};

// add base maps and overlays together to the map
L.control.layers(baseLayers,overlays).addTo(map);

Widgets

Search function

var osmGeocoder = new L.Control.OSMGeocoder();
map.addControl(osmGeocoder);

Overview Map

var osm2 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);

Navigator bar

L.control.navbar({position: 'topleft'}).addTo(map);

Scale bar

L.control.scale().addTo(map);

Mouse hover position

L.control.mousePosition().addTo(map);

Reference

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章