Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
生活随笔
收集整理的這篇文章主要介紹了
Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目錄
?
官方解析
博主栗子
?
官方解析
Leaflet 1.0中出現(xiàn)了處理者這個(gè)新概念，處理瀏覽器里的dom事件單擊，雙擊，地圖滑動(dòng)及map狀態(tài)的改變。
當(dāng)處理者啟動(dòng)時(shí)調(diào)用addHooks()函數(shù)，未啟動(dòng)時(shí)調(diào)用removeHooks()，結(jié)構(gòu)如下：
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) { … } });下面這個(gè)是當(dāng)設(shè)備傾斜時(shí)平移地圖（此處的代碼沒(méi)有試過(guò)，不知道能不能成功）！
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);如果映射與處理程序名相同，那么默認(rèn)是開(kāi)啟的
var map = L.map('mapDiv', { tilt: true });下面這個(gè)例子是移動(dòng)瀏覽器的，沒(méi)有用移動(dòng)瀏覽器試，在此不說(shuō)了！
下面是控制，這個(gè)提供了一個(gè)例子，這個(gè)例子是給地圖加一個(gè)水印（這個(gè)水印只是像水印，并不是真正的水印，獲取瓦片后，圖片還是沒(méi)有水印）
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);?
博主栗子
下面寫(xiě)一個(gè)為地圖加水印的例子！
程序運(yùn)行截圖如下：
這里加了一個(gè)很騷氣的小黃人。
代碼如下：
<!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);//添加的數(shù)據(jù)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);//添加的數(shù)據(jù)</script></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的Leaflet文档阅读笔记-Extending Leaflet: Handlers and Controls笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java笔记-获取当前时间及对当前时间进
- 下一篇： Java笔记-通过放射获取类中成员名及调