官方解析

Leaflet 1.0中出现了处理者这个新概念，处理浏览器里的dom事件单击，双击，地图滑动及map状态的改变。

当处理者启动时调用addHooks()函数，未启动时调用removeHooks()，结构如下：


L.CustomHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(document, 'eventname', this._doSomething, this);
	},
 
	removeHooks: function() {
		L.DomEvent.off(document, 'eventname', this._doSomething, this);
	},
 
	_doSomething: function(event) { … }
});

下面这个是当设备倾斜时平移地图（此处的代码没有试过，不知道能不能成功）！


L.TiltHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
	},
 
	removeHooks: function() {
		L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
	},
 
	_tilt: function(ev) {
		// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
		this._map.panBy( L.point( ev.gamma, ev.beta ) );
	}
});

下面的代码是映射

L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);

如果映射与处理程序名相同，那么默认是开启的

var map = L.map('mapDiv', { tilt: true });

下面这个例子是移动浏览器的，没有用移动浏览器试，在此不说了！

下面是控制，这个提供了一个例子，这个例子是给地图加一个水印（这个水印只是像水印，并不是真正的水印，获取瓦片后，图片还是没有水印）


L.Control.Watermark = L.Control.extend({
	onAdd: function(map) {
		var img = L.DomUtil.create('img');
 
		img.src = '../../docs/images/logo.png';
		img.style.width = '200px';
 
		return img;
	},
 
	onRemove: function(map) {
		// Nothing to do here
	}
});
 
L.control.watermark = function(opts) {
	return new L.Control.Watermark(opts);
}
 
L.control.watermark({ position: 'bottomleft' }).addTo(map);

博主栗子

下面写一个为地图加水印的例子！

程序运行截图如下：

这里加了一个很骚气的小黄人。

代码如下：


<!DOCTYPE html>
<html>
<head>
	
	<title>Hello World</title>
 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
 
 
	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
	<script src="echarts.js"></script>
 
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
		
		.chart{
			width: 600px;
			height: 300px;
			background-color: #fff;
		}
	</style>
 
	
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
 
 
	
   var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 4,
		maxZoom: 7
	}).setView([32, 118], 7);
 
 
 
	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
 
	map.addLayer(ign);
 
	map.invalidateSize(true);
	
 
	//添加的数据
	L.Control.mark1 = L.Control.extend({
	
		onAdd: function(map){
		
			var img = L.DomUtil.create('img');
			img.src = './img/marker6.ico';
			return img;
		},
		onRemove: function(map){
		
		}
	});
	
	L.control.mark1 = function(opts){
		
		return new L.Control.mark1(opts);
	}
	L.control.mark1({position : 'bottomleft'}).addTo(map);
	//添加的数据
	
</script>
 
 
 
</body>
</html>

关键词搜索

Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记

详情内容

官方解析

博主栗子

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式