Prof. Marcello Benigno: junho 2013

Aqui temos um exemplo de como configurar a biblioteca Leaflet com algumas camadas WMS do Mapserver.

Configuração do Mapfile:

	MAP
	NAME "WMS-Mapserver"
	STATUS ON
	SIZE 800 600
	UNITS dd
	EXTENT -38.864434 -8.478194 -34.694095 -5.851767

	PROJECTION
	"init=epsg:3857"
	END

	IMAGECOLOR 255 255 255
	IMAGEQUALITY 95
	IMAGETYPE png

	WEB
	IMAGEPATH '../tmp/'
	IMAGEURL '/tmp/'
	METADATA
	'ows_title' 'WMS-Mapserver'
	'ows_onlineresource' 'http://localhost/cgi-bin/mapserv?map=/var/www/ex_leaflet/maps/map1.map&'
	'ows_srs' 'EPSG:3857 EPSG:4326 EPSG:4291 EPSG:900913'
	'wms_enable_request' '*'
	END
	END

	LAYER
	NAME 'limite'
	STATUS ON
	TYPE POLYGON
	OPACITY 50
	EXTENT -38.864451 -8.440178 -34.694208 -5.889782
	CONNECTIONTYPE postgis
	CONNECTION "dbname='base_pb' host=localhost port=5432 user='<user>' password='<pass>'"
	DATA 'geom FROM "limite" USING UNIQUE gid USING srid=4291'

	METADATA
	'ows_title' 'limite'
	'ows_srs' 'EPSG:3857 EPSG:4326 EPSG:4291'
	END

	PROJECTION
	"init=epsg:4291"
	END

	CLASS
	NAME 'limite'
	STYLE
	WIDTH 3
	OUTLINECOLOR 0 0 0
	END
	END
	END #Layer

	LAYER
	NAME 'rodovias'
	STATUS ON
	TYPE LINE
	EXTENT -38.864451 -8.440178 -34.694208 -5.889782
	CONNECTIONTYPE postgis
	CONNECTION "dbname='base_pb' host=localhost port=5432 user='<user>' password='<pass>'"
	DATA 'geom FROM "rodovias" USING UNIQUE gid USING srid=4291'
	CLASSITEM 'sitfisica'

	METADATA
	'ows_title' 'rodovias'
	'ows_srs' 'EPSG:3857 EPSG:4326 EPSG:4291'
	END

	PROJECTION
	"init=epsg:4291"
	END

	CLASS
	NAME "Em Pavimentação"
	EXPRESSION "Em Pavimentacao"
	STYLE
	WIDTH 1.4
	COLOR 85 255 0
	END
	END
	CLASS
	NAME "Implantada"
	EXPRESSION "Implantada"
	STYLE
	WIDTH 1.2
	COLOR 0 0 0
	END
	END
	CLASS
	NAME "Leito Natural"
	EXPRESSION "Leito Natural"
	STYLE
	WIDTH 0.9
	COLOR 255 170 0
	END
	END
	CLASS
	NAME "Pavimentada"
	EXPRESSION "Pavimentada"
	STYLE
	WIDTH 2.5
	COLOR 255 0 0
	END
	END
	END #Layer

	END #Mapfile

view raw gistfile1.rb hosted with ❤ by GitHub

Configuração da aplicação com o Leaflet:

	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Exemplo Leaflet - WMS Mapserver</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
	<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
	<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
	<script type="text/javascript" src="js/Google.js"></script>
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
	<![endif]-->
	<style type="text/css">
	#map { height: 640px;width: 800px }
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script type="text/javascript">

	var wms_server = "http://localhost/cgi-bin/mapserv?map=/var/www/ex_leaflet/maps/map1.map&"
	var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
	var terrain = new L.Google('TERRAIN');
	var road = new L.Google('ROADMAP');

	var limite = new L.tileLayer.wms(wms_server, {
	layers: 'limite',
	format: 'image/png',
	srs:"EPSG:4291",
	transparent: true
	});

	var rodovias = new L.tileLayer.wms(wms_server, {
	layers: 'rodovias',
	format: 'image/png',
	srs:"EPSG:4291",
	transparent: true
	});

	var baseMaps = {
	"Google Terrain" : terrain,
	"Google RoadMap" : road,
	"OpenStreetMap": osm
	};

	var overlayMaps = {
	"Limite Estadual": limite,
	"Rodovias": rodovias
	};

	var map = new L.Map('map', {center: new L.LatLng(-7.30253,-36.64489),
	zoom: 8,
	layers: [terrain]
	});

	map.addControl(new L.Control.Layers(baseMaps, overlayMaps),{});

	</script>

	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Prof. Marcello Benigno

Páginas

terça-feira, junho 18, 2013

Configuração de Layers WMS do Mapserver no Leaflet

Configuração do Mapfile:

Configuração da aplicação com o Leaflet:

Resultado: