leaflet地图实现滑块放大缩小以及拉框放大缩小 |
您所在的位置：网站首页 › 地图缩小 › leaflet地图实现滑块放大缩小以及拉框放大缩小 |
leaflet地图实现滑块放大缩小以及拉框放大缩小
|
前言：
最近公司在做一个有关地图的项目，说到地图，就我个人而言，还没接触过，所以拿到项目的时候是一愣一愣的，心想这都是些啥玩意？没办法，既然项目需要，那就得硬着头皮去干，除非你想卷覆盖走人。 需求： 拉动滑块实现地图放大缩小拉框实现地图放大缩小 过程：拿到需求的时候第一件事当然是找相关的API啦、找文档啦，公司这边要求使用的地图是leaflets地图，所以就得花时间看看leaflet的相关文档。虽然项目已经做的差不多，当由于产品这边提的两个需求刚好在文档里面找不到，也就是leaflet地图没有提供相关的属性（其实不是没有，只是本人对于这个地图了解得不够深入）。所以只能翻墙找相关案例。 一、leaflet 拉动滑块实现地图放大缩小这个滑块功能我在leaflet地图上没有找到相关的属性，所以自己琢磨了很久也琢磨不出来。当时有想过自己写一下这个功能的，思路如下： 1. 使用 element ui 里面的滑块并且获取到滑块滚动的事件 2. 把滑块等级设置为32级（因为公司项目的地图的放大缩小支持到32级） 3. 滑块每滑动一次就调用一次对应的放大缩小方法（this.map.zoomin 或 this.map.zoomout ）
js代码区域 L.Control.Zoomslider = (function() { var Knob = L.Draggable.extend({ initialize: function(element, stepHeight, knobHeight) { L.Draggable.prototype.initialize.call(this, element, element) this._element = element this._stepHeight = stepHeight this._knobHeight = knobHeight this.on('predrag', function() { this._newPos.x = 0 this._newPos.y = this._adjust(this._newPos.y) }, this) }, _adjust: function(y) { var value = Math.round(this._toValue(y)) value = Math.max(0, Math.min(this._maxValue, value)) return this._toY(value) }, // y = k*v + m _toY: function(value) { return this._k * value + this._m }, // v = (y - m) / k _toValue: function(y) { return (y - this._m) / this._k }, setSteps: function(steps) { var sliderHeight = steps * this._stepHeight this._maxValue = steps - 1 // conversion parameters // the conversion is just a common linear function. this._k = -this._stepHeight this._m = sliderHeight - (this._stepHeight + this._knobHeight) / 2 }, setPosition: function(y) { L.DomUtil.setPosition(this._element, L.point(0, this._adjust(y))) }, setValue: function(v) { this.setPosition(this._toY(v)) }, getValue: function() { return this._toValue(L.DomUtil.getPosition(this._element).y) } }) var Zoomslider = L.Control.extend({ options: { position: 'topleft', // Height of zoom-slider.png in px stepHeight: 6, // Height of the knob div in px (including border) knobHeight: 4, styleNS: 'leaflet-control-zoomslider' }, onAdd: function(map) { this._map = map this._ui = this._createUI() this._knob = new Knob(this._ui.knob, this.options.stepHeight, this.options.knobHeight) map.whenReady(this._initKnob, this) .whenReady(this._initEvents, this) .whenReady(this._updateSize, this) .whenReady(this._updateKnobValue, this) .whenReady(this._updateDisabled, this) return this._ui.bar }, onRemove: function(map) { map.off('zoomlevelschange', this._updateSize, this) .off('zoomend zoomlevelschange', this._updateKnobValue, this) .off('zoomend zoomlevelschange', this._updateDisabled, this) }, _createUI: function() { var ui = {} var ns = this.options.styleNS ui.bar = L.DomUtil.create('div', ns + ' leaflet-bar'), ui.zoomIn = this._createZoomBtn('in', 'top', ui.bar), ui.wrap = L.DomUtil.create('div', ns + '-wrap leaflet-bar-part', ui.bar), ui.zoomOut = this._createZoomBtn('out', 'bottom', ui.bar), ui.body = L.DomUtil.create('div', ns + '-body', ui.wrap), ui.knob = L.DomUtil.create('div', ns + '-knob') L.DomEvent.disableClickPropagation(ui.bar) L.DomEvent.disableClickPropagation(ui.knob) return ui }, _createZoomBtn: function(zoomDir, end, container) { var classDef = this.options.styleNS + '-' + zoomDir + ' leaflet-bar-part' + ' leaflet-bar-part-' + end var link = L.DomUtil.create('a', classDef, container) link.href = '#' link.title = 'Zoom ' + zoomDir L.DomEvent.on(link, 'click', L.DomEvent.preventDefault) return link }, _initKnob: function() { this._knob.enable() this._ui.body.appendChild(this._ui.knob) }, _initEvents: function(map) { this._map .on('zoomlevelschange', this._updateSize, this) .on('zoomend zoomlevelschange', this._updateKnobValue, this) .on('zoomend zoomlevelschange', this._updateDisabled, this) L.DomEvent.on(this._ui.body, 'click', this._onSliderClick, this) L.DomEvent.on(this._ui.zoomIn, 'click', this._zoomIn, this) L.DomEvent.on(this._ui.zoomOut, 'click', this._zoomOut, this) this._knob.on('dragend', this._updateMapZoom, this) }, _onSliderClick: function(e) { var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e) var y = L.DomEvent.getMousePosition(first, this._ui.body).y this._knob.setPosition(y) this._updateMapZoom() }, _zoomIn: function(e) { this._map.zoomIn(e.shiftKey ? 3 : 1) }, _zoomOut: function(e) { this._map.zoomOut(e.shiftKey ? 3 : 1) }, _zoomLevels: function() { var zoomLevels = this._map.getMaxZoom() - this._map.getMinZoom() + 1 return zoomLevels |
后来发现自己能力有限，虽然思路正确了，但只能实现滑块一级一级的滑动，无法实现越级滑动，所以这个思路无法实现（起码本人无法实现）。 后来靠翻墙才找到相关案例（因为leaflet地图是国外开发的，所以案例在外网会比较多）。leaflet滑块，有需要的可以进去看看，不过需要翻墙，不然进不去。
【本文地址】
今日新闻 |
推荐新闻 |