派生自 wuyushui/SewerAndRainNetwork
src/components/plugin/leaflet-measure-path/leaflet-measure-path.js
@@ -1,426 +1,421 @@ /* eslint-disable */ const init = (L) => { !(function() { 'use strict' L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({ options: { pane: 'markerPane' }, initialize: function(latlng, measurement, title, rotation, options) { L.setOptions(this, options) this._latlng = latlng this._measurement = measurement this._title = title this._rotation = rotation }, addTo: function(map) { map.addLayer(this) return this }, onAdd: function(map) { this._map = map var pane = this.getPane ? this.getPane() : map.getPanes().markerPane var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane) var inner = L.DomUtil.create('div', '', el) inner.title = this._title inner.innerHTML = this._measurement map.on('zoomanim', this._animateZoom, this) this._setPosition() }, onRemove: function(map) { map.off('zoomanim', this._animateZoom, this) var pane = this.getPane ? this.getPane() : map.getPanes().markerPane pane.removeChild(this._element) this._map = null }, _setPosition: function() { L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng)) this._element.style.transform += ' rotate(' + this._rotation + 'rad)' }, _animateZoom: function(opt) { var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round() L.DomUtil.setPosition(this._element, pos) this._element.style.transform += ' rotate(' + this._rotation + 'rad)' } }) L.marker.measurement = function(latLng, measurement, title, rotation, options) { return new L.Marker.Measurement(latLng, measurement, title, rotation, options) } var formatDistance = function(d) { var unit, feet if (this._measurementOptions.imperial) { feet = d / 0.3048 if (feet > 3000) { d = d / 1609.344 unit = 'mi' } else { d = feet unit = 'ft' } } else { if (d > 1000) { d = d / 1000 unit = 'km' } else { unit = 'm' } } if (d < 100) { return d.toFixed(1) + ' ' + unit } else { return Math.round(d) + ' ' + unit } } var formatArea = function(a) { var unit, sqfeet if (this._measurementOptions.imperial) { if (a > 404.685642) { a = a / 4046.85642 unit = 'ac' } else { a = a / 0.09290304 unit = 'ft²' } } else { if (a > 1000000) { a = a / 1000000 unit = 'km²' } else { unit = 'm²' } } if (a < 100) { return a.toFixed(1) + ' ' + unit } else { return Math.round(a) + ' ' + unit } } var RADIUS = 6378137 // ringArea function copied from geojson-area // (https://github.com/mapbox/geojson-area) // This function is distributed under a separate license, // see LICENSE.md. var ringArea = function ringArea(coords) { var rad = function rad(_) { return _ * Math.PI / 180 } var p1, p2, p3, lowerIndex, middleIndex, upperIndex, area = 0, coordsLength = coords.length if (coordsLength > 2) { for (var i = 0; i < coordsLength; i++) { if (i === coordsLength - 2) {// i = N-2 lowerIndex = coordsLength - 2 middleIndex = coordsLength -1 upperIndex = 0 } else if (i === coordsLength - 1) {// i = N-1 lowerIndex = coordsLength - 1 middleIndex = 0 upperIndex = 1 } else { // i = 0 to N-3 lowerIndex = i middleIndex = i+1 upperIndex = i+2 } p1 = coords[lowerIndex] p2 = coords[middleIndex] p3 = coords[upperIndex] area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat)) } area = area * RADIUS * RADIUS / 2 } return Math.abs(area) } /** * Handles the init hook for polylines and circles. * Implements the showOnHover functionality if called for. */ var addInitHook = function() { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements() } if (this.options.showMeasurements && showOnHover) { this.on('mouseover', function() { this.showMeasurements() }) this.on('mouseout', function() { this.hideMeasurements() }) } } var circleArea = function circleArea(d) { var rho = d / RADIUS return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho)) } var override = function(method, fn, hookAfter) { if (!hookAfter) { return function() { var originalReturnValue = method.apply(this, arguments) var args = Array.prototype.slice.call(arguments) args.push(originalReturnValue) return fn.apply(this, args) } } else { return function() { fn.apply(this, arguments) return method.apply(this, arguments) } } } L.Polyline.include({ showMeasurements: function(options) { if (!this._map || this._measurementLayer) return this this._measurementOptions = L.extend({ showOnHover: (options && options.showOnHover) || false, minPixelDistance: 30, showDistances: true, showArea: true, showTotalDistance: true, lang: { totalLength: 'Total length', totalArea: 'Total area', segmentLength: 'Segment length' } }, options || {}) this._measurementLayer = L.layerGroup().addTo(this._map) this.updateMeasurements() this._map.on('zoomend', this.updateMeasurements, this) return this }, hideMeasurements: function() { if (!this._map) return this this._map.off('zoomend', this.updateMeasurements, this) if (!this._measurementLayer) return this this._map.removeLayer(this._measurementLayer) this._measurementLayer = null return this }, onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements(this.options.measurementOptions) } return originalReturnValue }), onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) { this.hideMeasurements() return originalReturnValue }, true), setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), formatDistance: formatDistance, formatArea: formatArea, updateMeasurements: function() { if (!this._measurementLayer) return this var latLngs = this.getLatLngs(), isPolygon = this instanceof L.Polygon, options = this._measurementOptions, totalDist = 0, formatter, ll1, ll2, p1, p2, pixelDist, dist if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) { // Outer ring is stored as an array in the first element, // use that instead. latLngs = latLngs[0] } this._measurementLayer.clearLayers() if (this._measurementOptions.showDistances && latLngs.length > 1) { formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this) for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) { ll1 = latLngs[i - 1] ll2 = latLngs[i % len] dist = ll1.distanceTo(ll2) totalDist += dist p1 = this._map.latLngToLayerPoint(ll1) p2 = this._map.latLngToLayerPoint(ll2) pixelDist = p1.distanceTo(p2) if (pixelDist >= options.minPixelDistance) { L.marker.measurement( this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]), formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options) .addTo(this._measurementLayer) } } // Show total length for polylines if (!isPolygon && this._measurementOptions.showTotalDistance) { L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options) .addTo(this._measurementLayer) } } if (isPolygon && options.showArea && latLngs.length > 2) { formatter = options.formatArea || L.bind(this.formatArea, this) var area = ringArea(latLngs) L.marker.measurement(this.getBounds().getCenter(), formatter(area), options.lang.totalArea, 0, options) .addTo(this._measurementLayer) } return this }, _getRotation: function(ll1, ll2) { var p1 = this._map.project(ll1), p2 = this._map.project(ll2) return Math.atan((p2.y - p1.y) / (p2.x - p1.x)) } }) L.Polyline.addInitHook(function() { addInitHook.call(this) }) L.Circle.include({ showMeasurements: function(options) { if (!this._map || this._measurementLayer) return this this._measurementOptions = L.extend({ showOnHover: false, showArea: true, lang: { totalArea: 'Total area', } }, options || {}) this._measurementLayer = L.layerGroup().addTo(this._map) this.updateMeasurements() this._map.on('zoomend', this.updateMeasurements, this) return this }, hideMeasurements: function() { if (!this._map) return this this._map.on('zoomend', this.updateMeasurements, this) if (!this._measurementLayer) return this this._map.removeLayer(this._measurementLayer) this._measurementLayer = null return this }, onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements(this.options.measurementOptions) } return originalReturnValue }), onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) { this.hideMeasurements() return originalReturnValue }, true), setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), formatArea: formatArea, updateMeasurements: function() { if (!this._measurementLayer) return var latLng = this.getLatLng(), options = this._measurementOptions, formatter = options.formatArea || L.bind(this.formatArea, this) this._measurementLayer.clearLayers() if (options.showArea) { formatter = options.formatArea || L.bind(this.formatArea, this) var area = circleArea(this.getRadius()) L.marker.measurement(latLng, formatter(area), options.lang.totalArea, 0, options) .addTo(this._measurementLayer) } } }) L.Circle.addInitHook(function() { addInitHook.call(this) }) })() } export default { init } /* eslint-disable */ !(function() { 'use strict' L.Marker.Measurement = L[L.Layer ? 'Layer' : 'Class'].extend({ options: { pane: 'markerPane' }, initialize: function(latlng, measurement, title, rotation, options) { L.setOptions(this, options) this._latlng = latlng this._measurement = measurement this._title = title this._rotation = rotation }, addTo: function(map) { map.addLayer(this) return this }, onAdd: function(map) { this._map = map var pane = this.getPane ? this.getPane() : map.getPanes().markerPane var el = this._element = L.DomUtil.create('div', 'leaflet-zoom-animated leaflet-measure-path-measurement', pane) var inner = L.DomUtil.create('div', '', el) inner.title = this._title inner.innerHTML = this._measurement map.on('zoomanim', this._animateZoom, this) this._setPosition() }, onRemove: function(map) { map.off('zoomanim', this._animateZoom, this) var pane = this.getPane ? this.getPane() : map.getPanes().markerPane pane.removeChild(this._element) this._map = null }, _setPosition: function() { L.DomUtil.setPosition(this._element, this._map.latLngToLayerPoint(this._latlng)) this._element.style.transform += ' rotate(' + this._rotation + 'rad)' }, _animateZoom: function(opt) { var pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round() L.DomUtil.setPosition(this._element, pos) this._element.style.transform += ' rotate(' + this._rotation + 'rad)' } }) L.marker.measurement = function(latLng, measurement, title, rotation, options) { return new L.Marker.Measurement(latLng, measurement, title, rotation, options) } var formatDistance = function(d) { var unit, feet if (this._measurementOptions.imperial) { feet = d / 0.3048 if (feet > 3000) { d = d / 1609.344 unit = 'mi' } else { d = feet unit = 'ft' } } else { if (d > 1000) { d = d / 1000 unit = 'km' } else { unit = 'm' } } if (d < 100) { return d.toFixed(1) + ' ' + unit } else { return Math.round(d) + ' ' + unit } } var formatArea = function(a) { var unit, sqfeet if (this._measurementOptions.imperial) { if (a > 404.685642) { a = a / 4046.85642 unit = 'ac' } else { a = a / 0.09290304 unit = 'ft²' } } else { if (a > 1000000) { a = a / 1000000 unit = 'km²' } else { unit = 'm²' } } if (a < 100) { return a.toFixed(1) + ' ' + unit } else { return Math.round(a) + ' ' + unit } } var RADIUS = 6378137 // ringArea function copied from geojson-area // (https://github.com/mapbox/geojson-area) // This function is distributed under a separate license, // see LICENSE.md. var ringArea = function ringArea(coords) { var rad = function rad(_) { return _ * Math.PI / 180 } var p1, p2, p3, lowerIndex, middleIndex, upperIndex, area = 0, coordsLength = coords.length if (coordsLength > 2) { for (var i = 0; i < coordsLength; i++) { if (i === coordsLength - 2) {// i = N-2 lowerIndex = coordsLength - 2 middleIndex = coordsLength -1 upperIndex = 0 } else if (i === coordsLength - 1) {// i = N-1 lowerIndex = coordsLength - 1 middleIndex = 0 upperIndex = 1 } else { // i = 0 to N-3 lowerIndex = i middleIndex = i+1 upperIndex = i+2 } p1 = coords[lowerIndex] p2 = coords[middleIndex] p3 = coords[upperIndex] area += ( rad(p3.lng) - rad(p1.lng) ) * Math.sin( rad(p2.lat)) } area = area * RADIUS * RADIUS / 2 } return Math.abs(area) } /** * Handles the init hook for polylines and circles. * Implements the showOnHover functionality if called for. */ var addInitHook = function() { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements() } if (this.options.showMeasurements && showOnHover) { this.on('mouseover', function() { this.showMeasurements() }) this.on('mouseout', function() { this.hideMeasurements() }) } } var circleArea = function circleArea(d) { var rho = d / RADIUS return 2 * Math.PI * RADIUS * RADIUS * (1 - Math.cos(rho)) } var override = function(method, fn, hookAfter) { if (!hookAfter) { return function() { var originalReturnValue = method.apply(this, arguments) var args = Array.prototype.slice.call(arguments) args.push(originalReturnValue) return fn.apply(this, args) } } else { return function() { fn.apply(this, arguments) return method.apply(this, arguments) } } } L.Polyline.include({ showMeasurements: function(options) { if (!this._map || this._measurementLayer) return this this._measurementOptions = L.extend({ showOnHover: (options && options.showOnHover) || false, minPixelDistance: 30, showDistances: true, showArea: true, showTotalDistance: true, lang: { totalLength: 'Total length', totalArea: 'Total area', segmentLength: 'Segment length' } }, options || {}) this._measurementLayer = L.layerGroup().addTo(this._map) this.updateMeasurements() this._map.on('zoomend', this.updateMeasurements, this) return this }, hideMeasurements: function() { if (!this._map) return this this._map.off('zoomend', this.updateMeasurements, this) if (!this._measurementLayer) return this this._map.removeLayer(this._measurementLayer) this._measurementLayer = null return this }, onAdd: override(L.Polyline.prototype.onAdd, function(originalReturnValue) { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements(this.options.measurementOptions) } return originalReturnValue }), onRemove: override(L.Polyline.prototype.onRemove, function(originalReturnValue) { this.hideMeasurements() return originalReturnValue }, true), setLatLngs: override(L.Polyline.prototype.setLatLngs, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), spliceLatLngs: override(L.Polyline.prototype.spliceLatLngs, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), formatDistance: formatDistance, formatArea: formatArea, updateMeasurements: function() { if (!this._measurementLayer) return this var latLngs = this.getLatLngs(), isPolygon = this instanceof L.Polygon, options = this._measurementOptions, totalDist = 0, formatter, ll1, ll2, p1, p2, pixelDist, dist if (latLngs && latLngs.length && L.Util.isArray(latLngs[0])) { // Outer ring is stored as an array in the first element, // use that instead. latLngs = latLngs[0] } this._measurementLayer.clearLayers() if (this._measurementOptions.showDistances && latLngs.length > 1) { formatter = this._measurementOptions.formatDistance || L.bind(this.formatDistance, this) for (var i = 1, len = latLngs.length; (isPolygon && i <= len) || i < len; i++) { ll1 = latLngs[i - 1] ll2 = latLngs[i % len] dist = ll1.distanceTo(ll2) totalDist += dist p1 = this._map.latLngToLayerPoint(ll1) p2 = this._map.latLngToLayerPoint(ll2) pixelDist = p1.distanceTo(p2) if (pixelDist >= options.minPixelDistance) { L.marker.measurement( this._map.layerPointToLatLng([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]), formatter(dist), options.lang.segmentLength, this._getRotation(ll1, ll2), options) .addTo(this._measurementLayer) } } // Show total length for polylines if (!isPolygon && this._measurementOptions.showTotalDistance) { L.marker.measurement(ll2, formatter(totalDist), options.lang.totalLength, 0, options) .addTo(this._measurementLayer) } } if (isPolygon && options.showArea && latLngs.length > 2) { formatter = options.formatArea || L.bind(this.formatArea, this) var area = ringArea(latLngs) L.marker.measurement(this.getBounds().getCenter(), formatter(area), options.lang.totalArea, 0, options) .addTo(this._measurementLayer) } return this }, _getRotation: function(ll1, ll2) { var p1 = this._map.project(ll1), p2 = this._map.project(ll2) return Math.atan((p2.y - p1.y) / (p2.x - p1.x)) } }) L.Polyline.addInitHook(function() { addInitHook.call(this) }) L.Circle.include({ showMeasurements: function(options) { if (!this._map || this._measurementLayer) return this this._measurementOptions = L.extend({ showOnHover: false, showArea: true, lang: { totalArea: 'Total area', } }, options || {}) this._measurementLayer = L.layerGroup().addTo(this._map) this.updateMeasurements() this._map.on('zoomend', this.updateMeasurements, this) return this }, hideMeasurements: function() { if (!this._map) return this this._map.on('zoomend', this.updateMeasurements, this) if (!this._measurementLayer) return this this._map.removeLayer(this._measurementLayer) this._measurementLayer = null return this }, onAdd: override(L.Circle.prototype.onAdd, function(originalReturnValue) { var showOnHover = this.options.measurementOptions && this.options.measurementOptions.showOnHover if (this.options.showMeasurements && !showOnHover) { this.showMeasurements(this.options.measurementOptions) } return originalReturnValue }), onRemove: override(L.Circle.prototype.onRemove, function(originalReturnValue) { this.hideMeasurements() return originalReturnValue }, true), setLatLng: override(L.Circle.prototype.setLatLng, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), setRadius: override(L.Circle.prototype.setRadius, function(originalReturnValue) { this.updateMeasurements() return originalReturnValue }), formatArea: formatArea, updateMeasurements: function() { if (!this._measurementLayer) return var latLng = this.getLatLng(), options = this._measurementOptions, formatter = options.formatArea || L.bind(this.formatArea, this) this._measurementLayer.clearLayers() if (options.showArea) { formatter = options.formatArea || L.bind(this.formatArea, this) var area = circleArea(this.getRadius()) L.marker.measurement(latLng, formatter(area), options.lang.totalArea, 0, options) .addTo(this._measurementLayer) } } }) L.Circle.addInitHook(function() { addInitHook.call(this) }) })()
