官方解析

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 panthis._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笔记相关推荐

Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Leaflet文档阅读笔记- Showing video files解析
目录官方解析博主例子官方解析这里,官方首先告诉我们,当<video>这个标签还没出现的时候,在web上展示视频是很艰巨的.现在有了这个标签,只需要如下代码就能在web页面上展示视频 ...
Leaflet文档阅读笔记-Zoom levels笔记
目录官方解析博主例子官方解析把地图放缩锁定到0级 var map = L.map('map', {minZoom: 0,maxZoom: 0 });var cartodbAttribution ...
Leaflet文档阅读笔记-Using GeoJSON with Leaflet笔记
目录官方解析博主例子官方解析个人觉得这官方教程给得是相当的好,因为功能非常的强大,在此记录下,方便以后使用,以后肯定会经常用到! 此节将会学到从GeoJson对象中创建且调用map vecto ...
Leaflet文档阅读笔记-Markers With Custom Icons笔记
目录官方解析博主例子官方解析这个内容主要是把自定义图片,放到地图上,并且还可以增加阴影图片,以及点击图片后的弹出事件. 官方是准备了下面这4张图片: 使用下面这种方式可以单独设置,自定义图标 ...
Leaflet文档阅读笔记-Leaflet on Mobile笔记
目录 CSS和HTML改如何设置定位功能 CSS和HTML改如何设置如下的设置: body {padding: 0;margin: 0; } html, body, #map {height: 1 ...
Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...

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

官方解析

博主栗子

Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记相关推荐

最新文章

热门文章