Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
官方解析
博主栗子
?
官方解析
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笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java笔记-获取当前时间及对当前时间进
- 下一篇： Web笔记-session及cookie