| 面积：' + (feature.properties['AREA'] !== null ? Autolinker.link(String(feature.properties['AREA'])) : '') + ' | \ 21 ||
| 周长：' + (feature.properties['PERIMETER'] !== null ? Autolinker.link(String(feature.properties['PERIMETER'])) : '') + ' | \ 24 ||
| BOU2_4M_：' + (feature.properties['BOU2_4M_'] !== null ? Autolinker.link(String(feature.properties['BOU2_4M_'])) : '') + ' | \ 27 ||
| BOU2_4M_ID：' + (feature.properties['BOU2_4M_ID'] !== null ? Autolinker.link(String(feature.properties['BOU2_4M_ID'])) : '') + ' | \ 30 ||
| 编号93：' + (feature.properties['ADCODE93'] !== null ? Autolinker.link(String(feature.properties['ADCODE93'])) : '') + ' | \ 33 ||
| 编号99：' + (feature.properties['ADCODE99'] !== null ? Autolinker.link(String(feature.properties['ADCODE99'])) : '') + ' | \ 36 ||
| 名称：' + (feature.properties['NAME'] !== null ? Autolinker.link(String(feature.properties['NAME'])) : '') + ' | \ 39 |
' + area + '
') 55 | .openOn(this._map); 56 | }, 57 | 58 | getArea: function(e){ 59 | var obj = e.target; 60 | var area = L.GeometryUtil.geodesicArea(obj.getLatLngs()); 61 | if(this.isGeodesic) 62 | return area.toFixed(2) + ' m2'; 63 | else 64 | return L.GeometryUtil.readableArea(area); 65 | } 66 | }); 67 | 68 | L.Control.MeasureArea = L.Control.extend({ 69 | 70 | statics: { 71 | TITLE: 'Measure area' 72 | }, 73 | options: { 74 | position: 'topleft', 75 | geodesic: true 76 | }, 77 | 78 | initialize: function (options, layers) { 79 | L.Control.prototype.initialize.call(this, options); 80 | 81 | this._layers = {}; 82 | for (var i in layers) { 83 | this.addLayer(layers[i]); 84 | } 85 | }, 86 | 87 | onAdd: function(map) { 88 | var className = 'leaflet-control'; 89 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 90 | var link = L.DomUtil.create('a', className+'-measure', this._container); 91 | link.href = '#'; 92 | link.title = L.Control.MeasureArea.TITLE; 93 | var i = L.DomUtil.create('i', 'fa fa-comment-o', link); 94 | 95 | this.handler = new L.Polygon.Measure(map, this._layers, this.options.geodesic); 96 | 97 | this.handler.on('enabled', function () { 98 | L.DomUtil.addClass(this._container, 'enabled'); 99 | }, this); 100 | 101 | this.handler.on('disabled', function () { 102 | L.DomUtil.removeClass(this._container, 'enabled'); 103 | }, this); 104 | 105 | L.DomEvent 106 | .addListener(link, 'click', L.DomEvent.stopPropagation) 107 | .addListener(link, 'click', L.DomEvent.preventDefault) 108 | .addListener(link, 'click', this.toggle, this); 109 | 110 | return this._container; 111 | }, 112 | 113 | 114 | addLayer: function (layers) { 115 | 116 | if (layers instanceof L.LayerGroup){ 117 | for (var i in layers._layers) { 118 | var layer = layers._layers[i]; 119 | if(layer instanceof L.Path && !(layer instanceof L.Circle)){ 120 | var id = L.stamp(layer); 121 | this._layers[id] = { 122 | layer: layer 123 | }; 124 | } 125 | } 126 | } else { 127 | if(layers instanceof L.Path && !(layers instanceof L.Circle)){ 128 | var id = L.stamp(layers); 129 | this._layers[id] = { 130 | layer: layers 131 | }; 132 | } 133 | } 134 | }, 135 | 136 | removeLayer: function (layers) { 137 | if (layers instanceof L.LayerGroup){ 138 | for (var i in layers._layers) { 139 | var layer = layers._layers[i]; 140 | var id = L.stamp(layer); 141 | delete this._layers[id]; 142 | } 143 | } else { 144 | var id = L.stamp(layers); 145 | delete this._layers[id]; 146 | } 147 | return this; 148 | }, 149 | 150 | toggle: function() { 151 | if (this.handler.enabled()) { 152 | this.handler.disable.call(this.handler); 153 | } else { 154 | this.handler.enable.call(this.handler); 155 | } 156 | }, 157 | }); 158 | 159 | L.Control.measureAreaControl = function (options, layers) { 160 | return new L.Control.MeasureArea(options, layers); 161 | }; 162 | 163 | -------------------------------------------------------------------------------- /output/app/common/leaflet-plugin/L.MeasureAreaControl.js: -------------------------------------------------------------------------------- 1 | L.Polygon.Measure = L.Handler.extend({ 2 | includes: L.Mixin.Events, 3 | 4 | initialize: function(map, layers, isGeodesic){ 5 | L.Handler.prototype.initialize.call(this, map); 6 | this._layers = layers || null; 7 | this.isGeodesic = isGeodesic; 8 | }, 9 | 10 | enable: function(){ 11 | if(!this._enabled){ 12 | this.fire('enabled'); 13 | L.Handler.prototype.enable.call(this); 14 | } 15 | }, 16 | 17 | disable: function(){ 18 | if(this._enabled){ 19 | this.fire('disabled'); 20 | L.Handler.prototype.disable.call(this); 21 | } 22 | }, 23 | 24 | addHooks: function () { 25 | if (this._map) { 26 | this.bindEventListener(); 27 | } 28 | }, 29 | 30 | removeHooks: function () { 31 | if (this._map) { 32 | this.removeEventListener(); 33 | } 34 | }, 35 | 36 | bindEventListener: function () { 37 | var data = this._layers; 38 | for (var i in data) { 39 | data[i].layer.on('click', this.onElementClick, this); 40 | } 41 | }, 42 | 43 | removeEventListener: function(){ 44 | var data = this._layers; 45 | for (var i in data) { 46 | data[i].layer.off('click', this.onElementClick, this); 47 | } 48 | }, 49 | 50 | onElementClick: function(e) { 51 | var area = this.getArea(e); 52 | var popup = L.popup() 53 | .setLatLng(e.latlng) 54 | .setContent('' + area + '
') 55 | .openOn(this._map); 56 | }, 57 | 58 | getArea: function(e){ 59 | var obj = e.target; 60 | var area = L.GeometryUtil.geodesicArea(obj.getLatLngs()); 61 | if(this.isGeodesic) 62 | return area.toFixed(2) + ' m2'; 63 | else 64 | return L.GeometryUtil.readableArea(area); 65 | } 66 | }); 67 | 68 | L.Control.MeasureArea = L.Control.extend({ 69 | 70 | statics: { 71 | TITLE: 'Measure area' 72 | }, 73 | options: { 74 | position: 'topleft', 75 | geodesic: true 76 | }, 77 | 78 | initialize: function (options, layers) { 79 | L.Control.prototype.initialize.call(this, options); 80 | 81 | this._layers = {}; 82 | for (var i in layers) { 83 | this.addLayer(layers[i]); 84 | } 85 | }, 86 | 87 | onAdd: function(map) { 88 | var className = 'leaflet-control'; 89 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 90 | var link = L.DomUtil.create('a', className+'-measure', this._container); 91 | link.href = '#'; 92 | link.title = L.Control.MeasureArea.TITLE; 93 | var i = L.DomUtil.create('i', 'fa fa-comment-o', link); 94 | 95 | this.handler = new L.Polygon.Measure(map, this._layers, this.options.geodesic); 96 | 97 | this.handler.on('enabled', function () { 98 | L.DomUtil.addClass(this._container, 'enabled'); 99 | }, this); 100 | 101 | this.handler.on('disabled', function () { 102 | L.DomUtil.removeClass(this._container, 'enabled'); 103 | }, this); 104 | 105 | L.DomEvent 106 | .addListener(link, 'click', L.DomEvent.stopPropagation) 107 | .addListener(link, 'click', L.DomEvent.preventDefault) 108 | .addListener(link, 'click', this.toggle, this); 109 | 110 | return this._container; 111 | }, 112 | 113 | 114 | addLayer: function (layers) { 115 | 116 | if (layers instanceof L.LayerGroup){ 117 | for (var i in layers._layers) { 118 | var layer = layers._layers[i]; 119 | if(layer instanceof L.Path && !(layer instanceof L.Circle)){ 120 | var id = L.stamp(layer); 121 | this._layers[id] = { 122 | layer: layer 123 | }; 124 | } 125 | } 126 | } else { 127 | if(layers instanceof L.Path && !(layers instanceof L.Circle)){ 128 | var id = L.stamp(layers); 129 | this._layers[id] = { 130 | layer: layers 131 | }; 132 | } 133 | } 134 | }, 135 | 136 | removeLayer: function (layers) { 137 | if (layers instanceof L.LayerGroup){ 138 | for (var i in layers._layers) { 139 | var layer = layers._layers[i]; 140 | var id = L.stamp(layer); 141 | delete this._layers[id]; 142 | } 143 | } else { 144 | var id = L.stamp(layers); 145 | delete this._layers[id]; 146 | } 147 | return this; 148 | }, 149 | 150 | toggle: function() { 151 | if (this.handler.enabled()) { 152 | this.handler.disable.call(this.handler); 153 | } else { 154 | this.handler.enable.call(this.handler); 155 | } 156 | }, 157 | }); 158 | 159 | L.Control.measureAreaControl = function (options, layers) { 160 | return new L.Control.MeasureArea(options, layers); 161 | }; 162 | 163 | -------------------------------------------------------------------------------- /app/common/plugin/leaflet.baidu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Projection class for Baidu Spherical Mercator 3 | * 4 | * @class BaiduSphericalMercator 5 | */ 6 | L.Projection.BaiduSphericalMercator = { 7 | /** 8 | * Project latLng to point coordinate 9 | * 10 | * @method project 11 | * @param {Object} latLng coordinate for a point on earth 12 | * @return {Object} leafletPoint point coordinate of L.Point 13 | */ 14 | project: function(latLng) { 15 | var projection = new BMap.MercatorProjection(); 16 | var originalPoint = new BMap.Point(latLng.lng, latLng.lat); 17 | //var baiduPoint = window.translatePoint(originalPoint); 18 | var point = projection.lngLatToPoint(originalPoint); 19 | var leafletPoint = new L.Point(point.x, point.y); 20 | return leafletPoint; 21 | }, 22 | 23 | /** 24 | * unproject point coordinate to latLng 25 | * 26 | * @method unproject 27 | * @param {Object} bpoint baidu point coordinate 28 | * @return {Object} latitude and longitude 29 | */ 30 | unproject: function (bpoint) { 31 | var projection= new BMap.MercatorProjection(); 32 | var point = projection.pointToLngLat( 33 | new BMap.Pixel(bpoint.x, bpoint.y) 34 | ); 35 | var latLng = new L.LatLng(point.lat, point.lng); 36 | return latLng; 37 | }, 38 | 39 | /** 40 | * Don't know how it used currently. 41 | * 42 | * However, I guess this is the range of coordinate. 43 | * Range of pixel coordinate is gotten from 44 | * BMap.MercatorProjection.lngLatToPoint(180, -90) and (180, 90) 45 | * After getting max min value of pixel coordinate, use 46 | * pointToLngLat() get the max lat and Lng. 47 | */ 48 | bounds: (function () { 49 | var MAX_X= 20037726.37; 50 | var MIN_Y= -11708041.66; 51 | var MAX_Y= 12474104.17; 52 | var bounds = L.bounds( 53 | [-MAX_X, MIN_Y], //-180, -71.988531 54 | [MAX_X, MAX_Y] //180, 74.000022 55 | ); 56 | var MAX = 33554432; 57 | bounds = new L.Bounds( 58 | [-MAX, -MAX], 59 | [MAX, MAX] 60 | ); 61 | return bounds; 62 | })() 63 | }; 64 | 65 | /** 66 | * Coordinate system for Baidu EPSGB3857 67 | * 68 | * @class EPSGB3857 69 | */ 70 | L.CRS.EPSGB3857 = L.extend({}, L.CRS, { 71 | code: 'EPSG:B3857', 72 | projection: L.Projection.BaiduSphericalMercator, 73 | 74 | transformation: (function () { 75 | var z = -18 - 8; 76 | var scale = Math.pow(2, z); 77 | return new L.Transformation(scale, 0.5, -scale, 0.5); 78 | }()) 79 | }); 80 | 81 | /** 82 | * Tile layer for Baidu Map 83 | * 84 | * @class BaiduLayer 85 | */ 86 | L.TileLayer.BaiduLayer = L.TileLayer.extend({ 87 | statics: { 88 | attribution: '© 2014 Baidu - GS(2012)6003;- Data © NavInfo & CenNavi & DaoDaoTong' 89 | }, 90 | 91 | options: { 92 | minZoom: 3, 93 | maxZoom: 19 94 | }, 95 | 96 | initialize: function (type, options) { 97 | var desc = L.TileLayer.BaiduLayer.desc; 98 | type = type || 'Normal.Map'; 99 | var parts = type.split('.'); 100 | var mapName = parts[0], 101 | mapType = parts[1], 102 | mapStyle = parts[2]; 103 | var url = desc[mapName][mapType]; 104 | if(mapName === 'CustomStyle') { 105 | if(mapStyle) { 106 | url = url+'&customid='+mapStyle; 107 | }else if(options.styles) { 108 | url = url+'&styles='+options.styles; 109 | } 110 | } 111 | options = options || {}; 112 | options.subdomains = desc[mapName].subdomains || desc.subdomains; 113 | options.attribution = L.TileLayer.BaiduLayer.attribution; 114 | L.TileLayer.prototype.initialize.call(this, url, options); 115 | }, 116 | 117 | getTileUrl: function (coords) { 118 | var offset = Math.pow(2, coords.z - 1), 119 | x = coords.x - offset, 120 | y = offset - coords.y - 1, 121 | baiduCoords = L.point(x, y); 122 | baiduCoords.z = coords.z; 123 | return L.TileLayer.prototype.getTileUrl.call(this, baiduCoords); 124 | } 125 | }); 126 | 127 | L.TileLayer.BaiduLayer.desc = { 128 | Normal: { 129 | Map: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl' 130 | }, 131 | Satellite: { 132 | Map: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', 133 | Road: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl' 134 | }, 135 | CustomStyle: { 136 | Map: 'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}', 137 | subdomains: '012' 138 | }, 139 | subdomains: '0123456789' 140 | }; 141 | 142 | L.tileLayer.baiduLayer = function (type, options) { 143 | return new L.TileLayer.BaiduLayer(type, options); 144 | }; -------------------------------------------------------------------------------- /output/app/common/plugin/leaflet.baidu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Projection class for Baidu Spherical Mercator 3 | * 4 | * @class BaiduSphericalMercator 5 | */ 6 | L.Projection.BaiduSphericalMercator = { 7 | /** 8 | * Project latLng to point coordinate 9 | * 10 | * @method project 11 | * @param {Object} latLng coordinate for a point on earth 12 | * @return {Object} leafletPoint point coordinate of L.Point 13 | */ 14 | project: function(latLng) { 15 | var projection = new BMap.MercatorProjection(); 16 | var originalPoint = new BMap.Point(latLng.lng, latLng.lat); 17 | //var baiduPoint = window.translatePoint(originalPoint); 18 | var point = projection.lngLatToPoint(originalPoint); 19 | var leafletPoint = new L.Point(point.x, point.y); 20 | return leafletPoint; 21 | }, 22 | 23 | /** 24 | * unproject point coordinate to latLng 25 | * 26 | * @method unproject 27 | * @param {Object} bpoint baidu point coordinate 28 | * @return {Object} latitude and longitude 29 | */ 30 | unproject: function (bpoint) { 31 | var projection= new BMap.MercatorProjection(); 32 | var point = projection.pointToLngLat( 33 | new BMap.Pixel(bpoint.x, bpoint.y) 34 | ); 35 | var latLng = new L.LatLng(point.lat, point.lng); 36 | return latLng; 37 | }, 38 | 39 | /** 40 | * Don't know how it used currently. 41 | * 42 | * However, I guess this is the range of coordinate. 43 | * Range of pixel coordinate is gotten from 44 | * BMap.MercatorProjection.lngLatToPoint(180, -90) and (180, 90) 45 | * After getting max min value of pixel coordinate, use 46 | * pointToLngLat() get the max lat and Lng. 47 | */ 48 | bounds: (function () { 49 | var MAX_X= 20037726.37; 50 | var MIN_Y= -11708041.66; 51 | var MAX_Y= 12474104.17; 52 | var bounds = L.bounds( 53 | [-MAX_X, MIN_Y], //-180, -71.988531 54 | [MAX_X, MAX_Y] //180, 74.000022 55 | ); 56 | var MAX = 33554432; 57 | bounds = new L.Bounds( 58 | [-MAX, -MAX], 59 | [MAX, MAX] 60 | ); 61 | return bounds; 62 | })() 63 | }; 64 | 65 | /** 66 | * Coordinate system for Baidu EPSGB3857 67 | * 68 | * @class EPSGB3857 69 | */ 70 | L.CRS.EPSGB3857 = L.extend({}, L.CRS, { 71 | code: 'EPSG:B3857', 72 | projection: L.Projection.BaiduSphericalMercator, 73 | 74 | transformation: (function () { 75 | var z = -18 - 8; 76 | var scale = Math.pow(2, z); 77 | return new L.Transformation(scale, 0.5, -scale, 0.5); 78 | }()) 79 | }); 80 | 81 | /** 82 | * Tile layer for Baidu Map 83 | * 84 | * @class BaiduLayer 85 | */ 86 | L.TileLayer.BaiduLayer = L.TileLayer.extend({ 87 | statics: { 88 | attribution: '© 2014 Baidu - GS(2012)6003;- Data © NavInfo & CenNavi & DaoDaoTong' 89 | }, 90 | 91 | options: { 92 | minZoom: 3, 93 | maxZoom: 19 94 | }, 95 | 96 | initialize: function (type, options) { 97 | var desc = L.TileLayer.BaiduLayer.desc; 98 | type = type || 'Normal.Map'; 99 | var parts = type.split('.'); 100 | var mapName = parts[0], 101 | mapType = parts[1], 102 | mapStyle = parts[2]; 103 | var url = desc[mapName][mapType]; 104 | if(mapName === 'CustomStyle') { 105 | if(mapStyle) { 106 | url = url+'&customid='+mapStyle; 107 | }else if(options.styles) { 108 | url = url+'&styles='+options.styles; 109 | } 110 | } 111 | options = options || {}; 112 | options.subdomains = desc[mapName].subdomains || desc.subdomains; 113 | options.attribution = L.TileLayer.BaiduLayer.attribution; 114 | L.TileLayer.prototype.initialize.call(this, url, options); 115 | }, 116 | 117 | getTileUrl: function (coords) { 118 | var offset = Math.pow(2, coords.z - 1), 119 | x = coords.x - offset, 120 | y = offset - coords.y - 1, 121 | baiduCoords = L.point(x, y); 122 | baiduCoords.z = coords.z; 123 | return L.TileLayer.prototype.getTileUrl.call(this, baiduCoords); 124 | } 125 | }); 126 | 127 | L.TileLayer.BaiduLayer.desc = { 128 | Normal: { 129 | Map: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl' 130 | }, 131 | Satellite: { 132 | Map: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', 133 | Road: 'http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl' 134 | }, 135 | CustomStyle: { 136 | Map: 'http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}', 137 | subdomains: '012' 138 | }, 139 | subdomains: '0123456789' 140 | }; 141 | 142 | L.tileLayer.baiduLayer = function (type, options) { 143 | return new L.TileLayer.BaiduLayer(type, options); 144 | }; -------------------------------------------------------------------------------- /app/common/leaflet-plugin/leaflet.measurecontrol.js: -------------------------------------------------------------------------------- 1 | (function (factory, window) { 2 | // define an AMD module that relies on 'leaflet' 3 | if (typeof define === 'function' && define.amd) { 4 | define(['leaflet'], function (L) { 5 | factory(L, window.toGeoJSON); 6 | }); 7 | 8 | // define a Common JS module that relies on 'leaflet' 9 | } else if (typeof exports === 'object') { 10 | module.exports = function (L) { 11 | if (L === undefined) { 12 | if (typeof window !== 'undefined') { 13 | L = require('leaflet'); 14 | } 15 | } 16 | factory(L); 17 | return L; 18 | }; 19 | } else if (typeof window !== 'undefined' && window.L) { 20 | factory(window.L); 21 | } 22 | }(function (L) { 23 | L.Polyline.Measure = L.Draw.Polyline.extend({ 24 | addHooks: function () { 25 | L.Draw.Polyline.prototype.addHooks.call(this); 26 | if (this._map) { 27 | this._markerGroup = new L.LayerGroup(); 28 | this._map.addLayer(this._markerGroup); 29 | 30 | this._markers = []; 31 | this._map.on('click', this._onClick, this); 32 | this._startShape(); 33 | } 34 | }, 35 | 36 | removeHooks: function () { 37 | L.Draw.Polyline.prototype.removeHooks.call(this); 38 | 39 | this._clearHideErrorTimeout(); 40 | 41 | // !\ Still useful when control is disabled before any drawing (refactor needed?) 42 | this._map 43 | .off('pointermove', this._onMouseMove, this) 44 | .off('mousemove', this._onMouseMove, this) 45 | .off('click', this._onClick, this); 46 | 47 | this._clearGuides(); 48 | this._container.style.cursor = ''; 49 | 50 | this._removeShape(); 51 | }, 52 | 53 | _startShape: function () { 54 | this._drawing = true; 55 | this._poly = new L.Polyline([], this.options.shapeOptions); 56 | // this is added as a placeholder, if leaflet doesn't recieve 57 | // this when the tool is turned off all onclick events are removed 58 | this._poly._onClick = function () {}; 59 | 60 | this._container.style.cursor = 'crosshair'; 61 | 62 | this._updateTooltip(); 63 | this._map 64 | .on('pointermove', this._onMouseMove, this) 65 | .on('mousemove', this._onMouseMove, this); 66 | }, 67 | 68 | _finishShape: function () { 69 | this._drawing = false; 70 | 71 | this._cleanUpShape(); 72 | this._clearGuides(); 73 | 74 | this._updateTooltip(); 75 | 76 | this._map 77 | .off('pointermove', this._onMouseMove, this) 78 | .off('mousemove', this._onMouseMove, this); 79 | 80 | this._container.style.cursor = ''; 81 | }, 82 | 83 | _removeShape: function () { 84 | if (!this._poly) return; 85 | this._map.removeLayer(this._poly); 86 | delete this._poly; 87 | this._markers.splice(0); 88 | this._markerGroup.clearLayers(); 89 | }, 90 | 91 | _onClick: function () { 92 | if (!this._drawing) { 93 | this._removeShape(); 94 | this._startShape(); 95 | return; 96 | } 97 | }, 98 | 99 | _getTooltipText: function () { 100 | var labelText = L.Draw.Polyline.prototype._getTooltipText.call(this); 101 | if (!this._drawing) { 102 | labelText.text = ''; 103 | } 104 | return labelText; 105 | } 106 | }); 107 | 108 | L.Control.MeasureControl = L.Control.extend({ 109 | 110 | statics: { 111 | TITLE: 'Measure distances' 112 | }, 113 | options: { 114 | position: 'topleft', 115 | handler: {} 116 | }, 117 | 118 | toggle: function () { 119 | if (this.handler.enabled()) { 120 | this.handler.disable.call(this.handler); 121 | } else { 122 | this.handler.enable.call(this.handler); 123 | } 124 | }, 125 | 126 | onAdd: function (map) { 127 | var link = null; 128 | var className = 'leaflet-control-draw'; 129 | 130 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 131 | 132 | this.handler = new L.Polyline.Measure(map, this.options.handler); 133 | 134 | this.handler.on('enabled', function () { 135 | this.enabled = true; 136 | L.DomUtil.addClass(this._container, 'enabled'); 137 | }, this); 138 | 139 | this.handler.on('disabled', function () { 140 | delete this.enabled; 141 | L.DomUtil.removeClass(this._container, 'enabled'); 142 | }, this); 143 | 144 | link = L.DomUtil.create('a', className + '-measure', this._container); 145 | link.href = '#'; 146 | link.title = L.Control.MeasureControl.TITLE; 147 | 148 | L.DomEvent 149 | .addListener(link, 'click', L.DomEvent.stopPropagation) 150 | .addListener(link, 'click', L.DomEvent.preventDefault) 151 | .addListener(link, 'click', this.toggle, this); 152 | 153 | return this._container; 154 | } 155 | }); 156 | 157 | 158 | L.Map.mergeOptions({ 159 | measureControl: false 160 | }); 161 | 162 | 163 | L.Map.addInitHook(function () { 164 | if (this.options.measureControl) { 165 | this.measureControl = L.Control.measureControl().addTo(this); 166 | } 167 | }); 168 | 169 | 170 | L.Control.measureControl = function (options) { 171 | return new L.Control.MeasureControl(options); 172 | }; 173 | }, window)); 174 | -------------------------------------------------------------------------------- /output/app/common/leaflet-plugin/leaflet.measurecontrol.js: -------------------------------------------------------------------------------- 1 | (function (factory, window) { 2 | // define an AMD module that relies on 'leaflet' 3 | if (typeof define === 'function' && define.amd) { 4 | define(['leaflet'], function (L) { 5 | factory(L, window.toGeoJSON); 6 | }); 7 | 8 | // define a Common JS module that relies on 'leaflet' 9 | } else if (typeof exports === 'object') { 10 | module.exports = function (L) { 11 | if (L === undefined) { 12 | if (typeof window !== 'undefined') { 13 | L = require('leaflet'); 14 | } 15 | } 16 | factory(L); 17 | return L; 18 | }; 19 | } else if (typeof window !== 'undefined' && window.L) { 20 | factory(window.L); 21 | } 22 | }(function (L) { 23 | L.Polyline.Measure = L.Draw.Polyline.extend({ 24 | addHooks: function () { 25 | L.Draw.Polyline.prototype.addHooks.call(this); 26 | if (this._map) { 27 | this._markerGroup = new L.LayerGroup(); 28 | this._map.addLayer(this._markerGroup); 29 | 30 | this._markers = []; 31 | this._map.on('click', this._onClick, this); 32 | this._startShape(); 33 | } 34 | }, 35 | 36 | removeHooks: function () { 37 | L.Draw.Polyline.prototype.removeHooks.call(this); 38 | 39 | this._clearHideErrorTimeout(); 40 | 41 | // !\ Still useful when control is disabled before any drawing (refactor needed?) 42 | this._map 43 | .off('pointermove', this._onMouseMove, this) 44 | .off('mousemove', this._onMouseMove, this) 45 | .off('click', this._onClick, this); 46 | 47 | this._clearGuides(); 48 | this._container.style.cursor = ''; 49 | 50 | this._removeShape(); 51 | }, 52 | 53 | _startShape: function () { 54 | this._drawing = true; 55 | this._poly = new L.Polyline([], this.options.shapeOptions); 56 | // this is added as a placeholder, if leaflet doesn't recieve 57 | // this when the tool is turned off all onclick events are removed 58 | this._poly._onClick = function () {}; 59 | 60 | this._container.style.cursor = 'crosshair'; 61 | 62 | this._updateTooltip(); 63 | this._map 64 | .on('pointermove', this._onMouseMove, this) 65 | .on('mousemove', this._onMouseMove, this); 66 | }, 67 | 68 | _finishShape: function () { 69 | this._drawing = false; 70 | 71 | this._cleanUpShape(); 72 | this._clearGuides(); 73 | 74 | this._updateTooltip(); 75 | 76 | this._map 77 | .off('pointermove', this._onMouseMove, this) 78 | .off('mousemove', this._onMouseMove, this); 79 | 80 | this._container.style.cursor = ''; 81 | }, 82 | 83 | _removeShape: function () { 84 | if (!this._poly) return; 85 | this._map.removeLayer(this._poly); 86 | delete this._poly; 87 | this._markers.splice(0); 88 | this._markerGroup.clearLayers(); 89 | }, 90 | 91 | _onClick: function () { 92 | if (!this._drawing) { 93 | this._removeShape(); 94 | this._startShape(); 95 | return; 96 | } 97 | }, 98 | 99 | _getTooltipText: function () { 100 | var labelText = L.Draw.Polyline.prototype._getTooltipText.call(this); 101 | if (!this._drawing) { 102 | labelText.text = ''; 103 | } 104 | return labelText; 105 | } 106 | }); 107 | 108 | L.Control.MeasureControl = L.Control.extend({ 109 | 110 | statics: { 111 | TITLE: 'Measure distances' 112 | }, 113 | options: { 114 | position: 'topleft', 115 | handler: {} 116 | }, 117 | 118 | toggle: function () { 119 | if (this.handler.enabled()) { 120 | this.handler.disable.call(this.handler); 121 | } else { 122 | this.handler.enable.call(this.handler); 123 | } 124 | }, 125 | 126 | onAdd: function (map) { 127 | var link = null; 128 | var className = 'leaflet-control-draw'; 129 | 130 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 131 | 132 | this.handler = new L.Polyline.Measure(map, this.options.handler); 133 | 134 | this.handler.on('enabled', function () { 135 | this.enabled = true; 136 | L.DomUtil.addClass(this._container, 'enabled'); 137 | }, this); 138 | 139 | this.handler.on('disabled', function () { 140 | delete this.enabled; 141 | L.DomUtil.removeClass(this._container, 'enabled'); 142 | }, this); 143 | 144 | link = L.DomUtil.create('a', className + '-measure', this._container); 145 | link.href = '#'; 146 | link.title = L.Control.MeasureControl.TITLE; 147 | 148 | L.DomEvent 149 | .addListener(link, 'click', L.DomEvent.stopPropagation) 150 | .addListener(link, 'click', L.DomEvent.preventDefault) 151 | .addListener(link, 'click', this.toggle, this); 152 | 153 | return this._container; 154 | } 155 | }); 156 | 157 | 158 | L.Map.mergeOptions({ 159 | measureControl: false 160 | }); 161 | 162 | 163 | L.Map.addInitHook(function () { 164 | if (this.options.measureControl) { 165 | this.measureControl = L.Control.measureControl().addTo(this); 166 | } 167 | }); 168 | 169 | 170 | L.Control.measureControl = function (options) { 171 | return new L.Control.MeasureControl(options); 172 | }; 173 | }, window)); 174 | -------------------------------------------------------------------------------- /app/common/leaflet-plugin/Leaflet.dvf/css/dvf.css: -------------------------------------------------------------------------------- 1 | div.leaflet-div-icon { 2 | text-align: center; 3 | vertical-align: middle; 4 | border-radius: 4px; 5 | padding: 2px 2px 0px 2px; 6 | font-size: small; 7 | margin: 0px auto; 8 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | width: auto; 10 | background: '#fff'; 11 | background-color: #f5f5f5; 12 | background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 13 | background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 14 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 15 | background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 16 | background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 17 | background-image: linear-gradient(top, #ffffff, #e6e6e6); 18 | background-repeat: repeat-x; 19 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 20 | border-color: #e6e6e6 #e6e6e6 #bfbfbf; 21 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 22 | border: 1px solid #cccccc; 23 | border-bottom-color: #b3b3b3; 24 | -webkit-border-radius: 10px; 25 | -moz-border-radius: 10px; 26 | border-radius: 10px; 27 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 28 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 29 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 30 | } 31 | 32 | div.leaflet-div-icon div { 33 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 34 | margin: 0px; 35 | padding: 0px; 36 | line-height: 12px; 37 | } 38 | 39 | div.leaflet-div-icon div div { 40 | display: block; 41 | font-size: xx-small; 42 | } 43 | 44 | div.legend-content { 45 | margin: 0px; 46 | padding: 0px; 47 | } 48 | 49 | div.legend-box { 50 | width: 10px; 51 | height: 10px; 52 | display: inline-block; 53 | margin-right: 8px; 54 | border: solid 1px #000; 55 | margin-bottom: 0px; 56 | } 57 | 58 | div.leaflet-div-icon div div.legend-box { 59 | width: 5px; 60 | height: 5px; 61 | display: inline-block; 62 | margin-right: 4px; 63 | margin-bottom: 0px; 64 | } 65 | 66 | div.leaflet-div-icon div div.key { 67 | margin: 2px 4px 0px 0px; 68 | font-weight: bold; 69 | line-height: 10px; 70 | display: inline-block; 71 | } 72 | 73 | .data-layer-legend div { 74 | display: inline-block; 75 | font-size: small; 76 | } 77 | 78 | .data-layer-legend .legend-box, .data-layer-legend .key { 79 | vertical-align: middle; 80 | } 81 | 82 | .choropleth-text { 83 | font-size: x-small; 84 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 85 | vertical-align: middle; 86 | text-align: center; 87 | } 88 | 89 | .scale-bars i { 90 | vertical-align: bottom; 91 | display: inline-block; 92 | background-color: silver; 93 | height: 14px; 94 | } 95 | 96 | .min-value, .max-value { 97 | vertical-align: middle; 98 | width: 50px; 99 | } 100 | 101 | .min-value { 102 | text-align: right; 103 | margin-right: 6px; 104 | } 105 | 106 | .max-value { 107 | text-align: left; 108 | margin-left: 6px; 109 | } 110 | 111 | .scale-value { 112 | text-align: center; 113 | position: relative; 114 | } 115 | 116 | .data-layer-legend { 117 | padding: 8px 0px 0px 0px; 118 | } 119 | 120 | .scale-bars { 121 | vertical-align: middle; 122 | line-height: 10px; 123 | } 124 | 125 | .legend-title { 126 | font-weight: bold; 127 | } 128 | 129 | .leaflet-popup-content { 130 | overflow: auto; 131 | max-height: 300px; 132 | } 133 | 134 | .palette-element { 135 | display: inline-block; 136 | width: 12px; 137 | height: 14px; 138 | } 139 | 140 | .leaflet-control-legend { 141 | background-color: rgba(255, 255, 255, 0.7); 142 | padding: 0px; 143 | border-radius: 4px; 144 | -webkit-border-radius: 4px; 145 | -moz-border-radius: 4px; 146 | max-height: 70px; 147 | width: 268px; 148 | box-shadow: 0 1px 7px #999; 149 | overflow: hidden; 150 | } 151 | 152 | .leaflet-control-legend.larger { 153 | max-height: 50%; 154 | overflow: auto; 155 | } 156 | 157 | .leaflet-control-legend .legend { 158 | padding: 10px; 159 | } 160 | 161 | .leaflet-control-legend i { 162 | background-image: none; 163 | vertical-align: text-bottom; 164 | } 165 | 166 | .photo { 167 | width: 100%; 168 | height: 100%; 169 | padding: 2px; 170 | background-color: white; 171 | box-shadow: 2px 2px 3px rgba(100, 100, 100, 0.5); 172 | opacity: 0; 173 | -moz-transition: opacity 1s; /* Firefox 4 */ 174 | -webkit-transition: opacity 1s; /* Safari and Chrome */ 175 | -o-transition: opacity 1s; 176 | transition: opacity 1s; 177 | } 178 | 179 | .photo-info { 180 | background-color: rgba(0, 0, 0, 0.6); 181 | padding: 10px; 182 | position: absolute; 183 | top: 0px; 184 | color: white; 185 | margin: 2px; 186 | } 187 | 188 | .photo-link { 189 | float: right; 190 | height: 14px; 191 | } 192 | 193 | .author-link { 194 | margin-left: 2px; 195 | width: 400px; 196 | display: block; 197 | font-style: italic; 198 | font-weight: bold; 199 | } 200 | 201 | text.leaflet-svg-text { 202 | alignment-baseline: central; 203 | dominant-baseline: central; 204 | text-anchor: middle; 205 | } -------------------------------------------------------------------------------- /app/common/plugin/measureAreaControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 面积量算 3 | * 依赖 leaflet-draw(包括js和css) 4 | * by zry 5 | * @Date 2017-04-19 6 | */ 7 | import L from 'leaflet'; 8 | import draw from 'leaflet-draw'; //矢量画图工具 9 | import '../css/leaflet.draw.css'; 10 | import './measureAreaControl.css'; 11 | 12 | L.Polygon.Measure = L.Draw.Polygon.extend({ 13 | options: { 14 | showArea: true, 15 | shapeOptions: { 16 | stroke: true, 17 | color: '#ff0000', 18 | weight: 4, 19 | opacity: 0.5, 20 | fill: true, 21 | fillColor: null, //same as color by default 22 | fillOpacity: 0.2, 23 | clickable: true 24 | }, 25 | metric: true // Whether to use the metric measurement system or imperial 26 | }, 27 | addHooks: function() { 28 | L.Draw.Polyline.prototype.addHooks.call(this); 29 | if (this._map) { 30 | this._markerGroup = new L.LayerGroup(); 31 | this._map.addLayer(this._markerGroup); 32 | 33 | this._markers = []; 34 | this._bindAreaDrawListener(); 35 | } 36 | }, 37 | removeHooks: function() { 38 | L.Draw.Polyline.prototype.removeHooks.call(this); 39 | 40 | this._clearHideErrorTimeout(); 41 | 42 | this._clearGuides(); 43 | this._container.style.cursor = ''; 44 | this._unbindAreaDrawListener(); 45 | }, 46 | _bindAreaDrawListener:function(){ 47 | this._map.on(L.Draw.Event.CREATED, function(e) { 48 | this._showArea(e); 49 | },this); 50 | }, 51 | _unbindAreaDrawListener:function(){ 52 | this._map.off(L.Draw.Event.CREATED, function(e) { 53 | this._showArea(e); 54 | },this); 55 | }, 56 | _showArea:function(e){ 57 | var self = this; 58 | var type = e.layerType, 59 | layer = e.layer; 60 | window.ee =e; 61 | if (type === 'rectangle' || type === 'polygon') { 62 | if(!e.layer._latlngs) return; 63 | var pos = e.layer._latlngs[0] ; 64 | var area = L.GeometryUtil.readableArea(L.GeometryUtil.geodesicArea(pos),this.options.metric); 65 | console.log("area:",area); 66 | /*var tooltip = L.marker(pos[pos.length-1].lat,pos[pos.length-1].lng) 67 | .bindTooltip("hello").openTooltip();*/ 68 | var popup = L.popup() 69 | .setLatLng(pos[0]) 70 | .setContent('' + "面积："+area + '
') 71 | .openOn(self._map); 72 | } 73 | }, 74 | _getTooltipText: function() { 75 | var text, subtext; 76 | 77 | if (this._markers.length === 0) { 78 | text = "开始"||L.drawLocal.draw.handlers.polygon.tooltip.start; 79 | } else if (this._markers.length < 3) { 80 | text = "继续点击"||L.drawLocal.draw.handlers.polygon.tooltip.cont; 81 | } else { 82 | text = "双击结束"||L.drawLocal.draw.handlers.polygon.tooltip.end; 83 | subtext = ""; 84 | } 85 | 86 | return { 87 | text: text, 88 | } 89 | }, 90 | }); 91 | 92 | L.Control.MeasureAreaControl = L.Control.extend({ 93 | 94 | statics: { 95 | TITLE: '测量面积' 96 | }, 97 | options: { 98 | position: 'topleft', 99 | handler: {}, 100 | showArea: true 101 | }, 102 | 103 | toggle: function() { 104 | if (this.handler.enabled()) { 105 | this.handler.disable.call(this.handler); 106 | } else { 107 | this.handler.enable.call(this.handler); 108 | } 109 | }, 110 | //addTo(map) -->onAdd(map) 111 | onAdd: function(map) { 112 | var link = null; 113 | var className = 'leaflet-control-draw'; 114 | 115 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 116 | 117 | this.handler = new L.Polygon.Measure(map, this.options); 118 | 119 | this.handler.on('enabled', function() { 120 | this.enabled = true; 121 | L.DomUtil.addClass(this._container, 'enabled'); 122 | }, this); 123 | 124 | this.handler.on('disabled', function() { 125 | delete this.enabled; 126 | L.DomUtil.removeClass(this._container, 'enabled'); 127 | }, this); 128 | 129 | link = L.DomUtil.create('a', className + '-measure-area', this._container); 130 | link.href = '#'; 131 | link.title = L.Control.MeasureAreaControl.TITLE; 132 | 133 | L.DomEvent 134 | .addListener(link, 'click', L.DomEvent.stopPropagation) 135 | .addListener(link, 'click', L.DomEvent.preventDefault) 136 | .addListener(link, 'click', this.toggle, this); 137 | 138 | console.log("this.handler:", this.handler); 139 | return this._container; 140 | } 141 | }); 142 | 143 | 144 | L.Map.mergeOptions({ 145 | measureAreaControl: false 146 | }); 147 | 148 | /** 149 | * 如果配置中有measureAreaControl的话 150 | * 例如：var map = L.map('map', {measureAreaControl:true}); 151 | */ 152 | L.Map.addInitHook(function() { 153 | if (this.options.measureAreaControl) { 154 | this.measureAreaControl = L.Control.measureAreaControl().addTo(this); 155 | } 156 | }); 157 | 158 | 159 | L.control.measureAreaControl = function(options) { 160 | return new L.Control.MeasureAreaControl(options); 161 | }; 162 | 163 | export default L.control.measureAreaControl; 164 | -------------------------------------------------------------------------------- /output/app/common/leaflet-plugin/Leaflet.dvf/css/dvf.css: -------------------------------------------------------------------------------- 1 | div.leaflet-div-icon { 2 | text-align: center; 3 | vertical-align: middle; 4 | border-radius: 4px; 5 | padding: 2px 2px 0px 2px; 6 | font-size: small; 7 | margin: 0px auto; 8 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | width: auto; 10 | background: '#fff'; 11 | background-color: #f5f5f5; 12 | background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 13 | background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 14 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 15 | background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 16 | background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 17 | background-image: linear-gradient(top, #ffffff, #e6e6e6); 18 | background-repeat: repeat-x; 19 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 20 | border-color: #e6e6e6 #e6e6e6 #bfbfbf; 21 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 22 | border: 1px solid #cccccc; 23 | border-bottom-color: #b3b3b3; 24 | -webkit-border-radius: 10px; 25 | -moz-border-radius: 10px; 26 | border-radius: 10px; 27 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 28 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 29 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 30 | } 31 | 32 | div.leaflet-div-icon div { 33 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 34 | margin: 0px; 35 | padding: 0px; 36 | line-height: 12px; 37 | } 38 | 39 | div.leaflet-div-icon div div { 40 | display: block; 41 | font-size: xx-small; 42 | } 43 | 44 | div.legend-content { 45 | margin: 0px; 46 | padding: 0px; 47 | } 48 | 49 | div.legend-box { 50 | width: 10px; 51 | height: 10px; 52 | display: inline-block; 53 | margin-right: 8px; 54 | border: solid 1px #000; 55 | margin-bottom: 0px; 56 | } 57 | 58 | div.leaflet-div-icon div div.legend-box { 59 | width: 5px; 60 | height: 5px; 61 | display: inline-block; 62 | margin-right: 4px; 63 | margin-bottom: 0px; 64 | } 65 | 66 | div.leaflet-div-icon div div.key { 67 | margin: 2px 4px 0px 0px; 68 | font-weight: bold; 69 | line-height: 10px; 70 | display: inline-block; 71 | } 72 | 73 | .data-layer-legend div { 74 | display: inline-block; 75 | font-size: small; 76 | } 77 | 78 | .data-layer-legend .legend-box, .data-layer-legend .key { 79 | vertical-align: middle; 80 | } 81 | 82 | .choropleth-text { 83 | font-size: x-small; 84 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 85 | vertical-align: middle; 86 | text-align: center; 87 | } 88 | 89 | .scale-bars i { 90 | vertical-align: bottom; 91 | display: inline-block; 92 | background-color: silver; 93 | height: 14px; 94 | } 95 | 96 | .min-value, .max-value { 97 | vertical-align: middle; 98 | width: 50px; 99 | } 100 | 101 | .min-value { 102 | text-align: right; 103 | margin-right: 6px; 104 | } 105 | 106 | .max-value { 107 | text-align: left; 108 | margin-left: 6px; 109 | } 110 | 111 | .scale-value { 112 | text-align: center; 113 | position: relative; 114 | } 115 | 116 | .data-layer-legend { 117 | padding: 8px 0px 0px 0px; 118 | } 119 | 120 | .scale-bars { 121 | vertical-align: middle; 122 | line-height: 10px; 123 | } 124 | 125 | .legend-title { 126 | font-weight: bold; 127 | } 128 | 129 | .leaflet-popup-content { 130 | overflow: auto; 131 | max-height: 300px; 132 | } 133 | 134 | .palette-element { 135 | display: inline-block; 136 | width: 12px; 137 | height: 14px; 138 | } 139 | 140 | .leaflet-control-legend { 141 | background-color: rgba(255, 255, 255, 0.7); 142 | padding: 0px; 143 | border-radius: 4px; 144 | -webkit-border-radius: 4px; 145 | -moz-border-radius: 4px; 146 | max-height: 70px; 147 | width: 268px; 148 | box-shadow: 0 1px 7px #999; 149 | overflow: hidden; 150 | } 151 | 152 | .leaflet-control-legend.larger { 153 | max-height: 50%; 154 | overflow: auto; 155 | } 156 | 157 | .leaflet-control-legend .legend { 158 | padding: 10px; 159 | } 160 | 161 | .leaflet-control-legend i { 162 | background-image: none; 163 | vertical-align: text-bottom; 164 | } 165 | 166 | .photo { 167 | width: 100%; 168 | height: 100%; 169 | padding: 2px; 170 | background-color: white; 171 | box-shadow: 2px 2px 3px rgba(100, 100, 100, 0.5); 172 | opacity: 0; 173 | -moz-transition: opacity 1s; /* Firefox 4 */ 174 | -webkit-transition: opacity 1s; /* Safari and Chrome */ 175 | -o-transition: opacity 1s; 176 | transition: opacity 1s; 177 | } 178 | 179 | .photo-info { 180 | background-color: rgba(0, 0, 0, 0.6); 181 | padding: 10px; 182 | position: absolute; 183 | top: 0px; 184 | color: white; 185 | margin: 2px; 186 | } 187 | 188 | .photo-link { 189 | float: right; 190 | height: 14px; 191 | } 192 | 193 | .author-link { 194 | margin-left: 2px; 195 | width: 400px; 196 | display: block; 197 | font-style: italic; 198 | font-weight: bold; 199 | } 200 | 201 | text.leaflet-svg-text { 202 | alignment-baseline: central; 203 | dominant-baseline: central; 204 | text-anchor: middle; 205 | } -------------------------------------------------------------------------------- /output/app/common/plugin/measureAreaControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 面积量算 3 | * 依赖 leaflet-draw(包括js和css) 4 | * by zry 5 | * @Date 2017-04-19 6 | */ 7 | import L from 'leaflet'; 8 | import draw from 'leaflet-draw'; //矢量画图工具 9 | import '../css/leaflet.draw.css'; 10 | import './measureAreaControl.css'; 11 | 12 | L.Polygon.Measure = L.Draw.Polygon.extend({ 13 | options: { 14 | showArea: true, 15 | shapeOptions: { 16 | stroke: true, 17 | color: '#ff0000', 18 | weight: 4, 19 | opacity: 0.5, 20 | fill: true, 21 | fillColor: null, //same as color by default 22 | fillOpacity: 0.2, 23 | clickable: true 24 | }, 25 | metric: true // Whether to use the metric measurement system or imperial 26 | }, 27 | addHooks: function() { 28 | L.Draw.Polyline.prototype.addHooks.call(this); 29 | if (this._map) { 30 | this._markerGroup = new L.LayerGroup(); 31 | this._map.addLayer(this._markerGroup); 32 | 33 | this._markers = []; 34 | this._bindAreaDrawListener(); 35 | } 36 | }, 37 | removeHooks: function() { 38 | L.Draw.Polyline.prototype.removeHooks.call(this); 39 | 40 | this._clearHideErrorTimeout(); 41 | 42 | this._clearGuides(); 43 | this._container.style.cursor = ''; 44 | this._unbindAreaDrawListener(); 45 | }, 46 | _bindAreaDrawListener:function(){ 47 | this._map.on(L.Draw.Event.CREATED, function(e) { 48 | this._showArea(e); 49 | },this); 50 | }, 51 | _unbindAreaDrawListener:function(){ 52 | this._map.off(L.Draw.Event.CREATED, function(e) { 53 | this._showArea(e); 54 | },this); 55 | }, 56 | _showArea:function(e){ 57 | var self = this; 58 | var type = e.layerType, 59 | layer = e.layer; 60 | window.ee =e; 61 | if (type === 'rectangle' || type === 'polygon') { 62 | if(!e.layer._latlngs) return; 63 | var pos = e.layer._latlngs[0] ; 64 | var area = L.GeometryUtil.readableArea(L.GeometryUtil.geodesicArea(pos),this.options.metric); 65 | console.log("area:",area); 66 | /*var tooltip = L.marker(pos[pos.length-1].lat,pos[pos.length-1].lng) 67 | .bindTooltip("hello").openTooltip();*/ 68 | var popup = L.popup() 69 | .setLatLng(pos[0]) 70 | .setContent('' + "面积："+area + '
') 71 | .openOn(self._map); 72 | } 73 | }, 74 | _getTooltipText: function() { 75 | var text, subtext; 76 | 77 | if (this._markers.length === 0) { 78 | text = "开始"||L.drawLocal.draw.handlers.polygon.tooltip.start; 79 | } else if (this._markers.length < 3) { 80 | text = "继续点击"||L.drawLocal.draw.handlers.polygon.tooltip.cont; 81 | } else { 82 | text = "双击结束"||L.drawLocal.draw.handlers.polygon.tooltip.end; 83 | subtext = ""; 84 | } 85 | 86 | return { 87 | text: text, 88 | } 89 | }, 90 | }); 91 | 92 | L.Control.MeasureAreaControl = L.Control.extend({ 93 | 94 | statics: { 95 | TITLE: '测量面积' 96 | }, 97 | options: { 98 | position: 'topleft', 99 | handler: {}, 100 | showArea: true 101 | }, 102 | 103 | toggle: function() { 104 | if (this.handler.enabled()) { 105 | this.handler.disable.call(this.handler); 106 | } else { 107 | this.handler.enable.call(this.handler); 108 | } 109 | }, 110 | //addTo(map) -->onAdd(map) 111 | onAdd: function(map) { 112 | var link = null; 113 | var className = 'leaflet-control-draw'; 114 | 115 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 116 | 117 | this.handler = new L.Polygon.Measure(map, this.options); 118 | 119 | this.handler.on('enabled', function() { 120 | this.enabled = true; 121 | L.DomUtil.addClass(this._container, 'enabled'); 122 | }, this); 123 | 124 | this.handler.on('disabled', function() { 125 | delete this.enabled; 126 | L.DomUtil.removeClass(this._container, 'enabled'); 127 | }, this); 128 | 129 | link = L.DomUtil.create('a', className + '-measure-area', this._container); 130 | link.href = '#'; 131 | link.title = L.Control.MeasureAreaControl.TITLE; 132 | 133 | L.DomEvent 134 | .addListener(link, 'click', L.DomEvent.stopPropagation) 135 | .addListener(link, 'click', L.DomEvent.preventDefault) 136 | .addListener(link, 'click', this.toggle, this); 137 | 138 | console.log("this.handler:", this.handler); 139 | return this._container; 140 | } 141 | }); 142 | 143 | 144 | L.Map.mergeOptions({ 145 | measureAreaControl: false 146 | }); 147 | 148 | /** 149 | * 如果配置中有measureAreaControl的话 150 | * 例如：var map = L.map('map', {measureAreaControl:true}); 151 | */ 152 | L.Map.addInitHook(function() { 153 | if (this.options.measureAreaControl) { 154 | this.measureAreaControl = L.Control.measureAreaControl().addTo(this); 155 | } 156 | }); 157 | 158 | 159 | L.control.measureAreaControl = function(options) { 160 | return new L.Control.MeasureAreaControl(options); 161 | }; 162 | 163 | export default L.control.measureAreaControl; 164 | -------------------------------------------------------------------------------- /app/common/plugin/clickMeasureAreaControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 点击元素量算面积 基于L.MeasureAreaControl.js 3 | * [https://github.com/zvaraondrej/Leaflet.MeasureAreaControl] 4 | * by zry 5 | * @Date 2017-04-19 6 | */ 7 | import L from 'leaflet'; 8 | import './measureAreaControl.css'; 9 | 10 | L.Polygon.Measure = L.Handler.extend({ 11 | includes: L.Mixin.Events, 12 | 13 | initialize: function(map, layers, isGeodesic) { 14 | L.Handler.prototype.initialize.call(this, map); 15 | this._layers = layers || null; 16 | this.isGeodesic = isGeodesic; 17 | }, 18 | 19 | enable: function() { 20 | if (!this._enabled) { 21 | this.fire('enabled'); 22 | L.Handler.prototype.enable.call(this); 23 | } 24 | }, 25 | 26 | disable: function() { 27 | if (this._enabled) { 28 | this.fire('disabled'); 29 | L.Handler.prototype.disable.call(this); 30 | } 31 | }, 32 | 33 | addHooks: function() { 34 | if (this._map) { 35 | this.bindEventListener(); 36 | } 37 | }, 38 | 39 | removeHooks: function() { 40 | if (this._map) { 41 | this.removeEventListener(); 42 | } 43 | }, 44 | 45 | bindEventListener: function() { 46 | var data = this._layers; 47 | for (var i in data) { 48 | data[i].layer.on('click', this.onElementClick, this); 49 | } 50 | }, 51 | 52 | removeEventListener: function() { 53 | var data = this._layers; 54 | for (var i in data) { 55 | data[i].layer.off('click', this.onElementClick, this); 56 | } 57 | }, 58 | 59 | onElementClick: function(e) { 60 | var area = this.getArea(e); 61 | var popup = L.popup() 62 | .setLatLng(e.latlng) 63 | .setContent('' + area + '
') 64 | .openOn(this._map); 65 | }, 66 | 67 | getArea: function(e) { 68 | var obj = e.target; 69 | var area = L.GeometryUtil.geodesicArea(obj.getLatLngs()); 70 | if (this.isGeodesic) 71 | return area.toFixed(2) + ' m2'; 72 | else 73 | return L.GeometryUtil.readableArea(area); 74 | } 75 | }); 76 | 77 | L.Control.MeasureArea = L.Control.extend({ 78 | 79 | statics: { 80 | TITLE: 'Measure area' 81 | }, 82 | options: { 83 | position: 'topleft', 84 | geodesic: true 85 | }, 86 | 87 | initialize: function(options, layers) { 88 | L.Control.prototype.initialize.call(this, options); 89 | 90 | this._layers = {}; 91 | for (var i in layers) { 92 | this.addLayer(layers[i]); 93 | } 94 | }, 95 | 96 | onAdd: function(map) { 97 | var className = 'leaflet-control'; 98 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 99 | var link = L.DomUtil.create('a', className + '-measure', this._container); 100 | link.href = '#'; 101 | link.title = L.Control.MeasureArea.TITLE; 102 | var i = L.DomUtil.create('i', 'fa fa-comment-o', link); 103 | 104 | this.handler = new L.Polygon.Measure(map, this._layers, this.options.geodesic); 105 | 106 | this.handler.on('enabled', function() { 107 | L.DomUtil.addClass(this._container, 'enabled'); 108 | }, this); 109 | 110 | this.handler.on('disabled', function() { 111 | L.DomUtil.removeClass(this._container, 'enabled'); 112 | }, this); 113 | 114 | L.DomEvent 115 | .addListener(link, 'click', L.DomEvent.stopPropagation) 116 | .addListener(link, 'click', L.DomEvent.preventDefault) 117 | .addListener(link, 'click', this.toggle, this); 118 | 119 | return this._container; 120 | }, 121 | 122 | 123 | addLayer: function(layers) { 124 | 125 | if (layers instanceof L.LayerGroup) { 126 | for (var i in layers._layers) { 127 | var layer = layers._layers[i]; 128 | if (layer instanceof L.Path && !(layer instanceof L.Circle)) { 129 | var id = L.stamp(layer); 130 | this._layers[id] = { 131 | layer: layer 132 | }; 133 | } 134 | } 135 | } else { 136 | if (layers instanceof L.Path && !(layers instanceof L.Circle)) { 137 | var id = L.stamp(layers); 138 | this._layers[id] = { 139 | layer: layers 140 | }; 141 | } 142 | } 143 | }, 144 | 145 | removeLayer: function(layers) { 146 | if (layers instanceof L.LayerGroup) { 147 | for (var i in layers._layers) { 148 | var layer = layers._layers[i]; 149 | var id = L.stamp(layer); 150 | delete this._layers[id]; 151 | } 152 | } else { 153 | var id = L.stamp(layers); 154 | delete this._layers[id]; 155 | } 156 | return this; 157 | }, 158 | 159 | toggle: function() { 160 | if (this.handler.enabled()) { 161 | this.handler.disable.call(this.handler); 162 | } else { 163 | this.handler.enable.call(this.handler); 164 | } 165 | }, 166 | }); 167 | 168 | /** 169 | * 如果配置中有measureAreaControl的话 170 | * 例如：var map = L.map('map', {measureAreaControl:true}); 171 | */ 172 | L.Map.addInitHook(function() { 173 | if (this.options.measureControl) { 174 | this.measureControl = L.Control.measureAreaControl().addTo(this); 175 | } 176 | }); 177 | 178 | L.Control.measureAreaControl = function(options, layers) { 179 | return new L.Control.MeasureArea(options, layers); 180 | }; 181 | 182 | export default L.control.measureAreaControl; 183 | -------------------------------------------------------------------------------- /output/app/common/plugin/clickMeasureAreaControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 点击元素量算面积 基于L.MeasureAreaControl.js 3 | * [https://github.com/zvaraondrej/Leaflet.MeasureAreaControl] 4 | * by zry 5 | * @Date 2017-04-19 6 | */ 7 | import L from 'leaflet'; 8 | import './measureAreaControl.css'; 9 | 10 | L.Polygon.Measure = L.Handler.extend({ 11 | includes: L.Mixin.Events, 12 | 13 | initialize: function(map, layers, isGeodesic) { 14 | L.Handler.prototype.initialize.call(this, map); 15 | this._layers = layers || null; 16 | this.isGeodesic = isGeodesic; 17 | }, 18 | 19 | enable: function() { 20 | if (!this._enabled) { 21 | this.fire('enabled'); 22 | L.Handler.prototype.enable.call(this); 23 | } 24 | }, 25 | 26 | disable: function() { 27 | if (this._enabled) { 28 | this.fire('disabled'); 29 | L.Handler.prototype.disable.call(this); 30 | } 31 | }, 32 | 33 | addHooks: function() { 34 | if (this._map) { 35 | this.bindEventListener(); 36 | } 37 | }, 38 | 39 | removeHooks: function() { 40 | if (this._map) { 41 | this.removeEventListener(); 42 | } 43 | }, 44 | 45 | bindEventListener: function() { 46 | var data = this._layers; 47 | for (var i in data) { 48 | data[i].layer.on('click', this.onElementClick, this); 49 | } 50 | }, 51 | 52 | removeEventListener: function() { 53 | var data = this._layers; 54 | for (var i in data) { 55 | data[i].layer.off('click', this.onElementClick, this); 56 | } 57 | }, 58 | 59 | onElementClick: function(e) { 60 | var area = this.getArea(e); 61 | var popup = L.popup() 62 | .setLatLng(e.latlng) 63 | .setContent('' + area + '
') 64 | .openOn(this._map); 65 | }, 66 | 67 | getArea: function(e) { 68 | var obj = e.target; 69 | var area = L.GeometryUtil.geodesicArea(obj.getLatLngs()); 70 | if (this.isGeodesic) 71 | return area.toFixed(2) + ' m2'; 72 | else 73 | return L.GeometryUtil.readableArea(area); 74 | } 75 | }); 76 | 77 | L.Control.MeasureArea = L.Control.extend({ 78 | 79 | statics: { 80 | TITLE: 'Measure area' 81 | }, 82 | options: { 83 | position: 'topleft', 84 | geodesic: true 85 | }, 86 | 87 | initialize: function(options, layers) { 88 | L.Control.prototype.initialize.call(this, options); 89 | 90 | this._layers = {}; 91 | for (var i in layers) { 92 | this.addLayer(layers[i]); 93 | } 94 | }, 95 | 96 | onAdd: function(map) { 97 | var className = 'leaflet-control'; 98 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 99 | var link = L.DomUtil.create('a', className + '-measure', this._container); 100 | link.href = '#'; 101 | link.title = L.Control.MeasureArea.TITLE; 102 | var i = L.DomUtil.create('i', 'fa fa-comment-o', link); 103 | 104 | this.handler = new L.Polygon.Measure(map, this._layers, this.options.geodesic); 105 | 106 | this.handler.on('enabled', function() { 107 | L.DomUtil.addClass(this._container, 'enabled'); 108 | }, this); 109 | 110 | this.handler.on('disabled', function() { 111 | L.DomUtil.removeClass(this._container, 'enabled'); 112 | }, this); 113 | 114 | L.DomEvent 115 | .addListener(link, 'click', L.DomEvent.stopPropagation) 116 | .addListener(link, 'click', L.DomEvent.preventDefault) 117 | .addListener(link, 'click', this.toggle, this); 118 | 119 | return this._container; 120 | }, 121 | 122 | 123 | addLayer: function(layers) { 124 | 125 | if (layers instanceof L.LayerGroup) { 126 | for (var i in layers._layers) { 127 | var layer = layers._layers[i]; 128 | if (layer instanceof L.Path && !(layer instanceof L.Circle)) { 129 | var id = L.stamp(layer); 130 | this._layers[id] = { 131 | layer: layer 132 | }; 133 | } 134 | } 135 | } else { 136 | if (layers instanceof L.Path && !(layers instanceof L.Circle)) { 137 | var id = L.stamp(layers); 138 | this._layers[id] = { 139 | layer: layers 140 | }; 141 | } 142 | } 143 | }, 144 | 145 | removeLayer: function(layers) { 146 | if (layers instanceof L.LayerGroup) { 147 | for (var i in layers._layers) { 148 | var layer = layers._layers[i]; 149 | var id = L.stamp(layer); 150 | delete this._layers[id]; 151 | } 152 | } else { 153 | var id = L.stamp(layers); 154 | delete this._layers[id]; 155 | } 156 | return this; 157 | }, 158 | 159 | toggle: function() { 160 | if (this.handler.enabled()) { 161 | this.handler.disable.call(this.handler); 162 | } else { 163 | this.handler.enable.call(this.handler); 164 | } 165 | }, 166 | }); 167 | 168 | /** 169 | * 如果配置中有measureAreaControl的话 170 | * 例如：var map = L.map('map', {measureAreaControl:true}); 171 | */ 172 | L.Map.addInitHook(function() { 173 | if (this.options.measureControl) { 174 | this.measureControl = L.Control.measureAreaControl().addTo(this); 175 | } 176 | }); 177 | 178 | L.Control.measureAreaControl = function(options, layers) { 179 | return new L.Control.MeasureArea(options, layers); 180 | }; 181 | 182 | export default L.control.measureAreaControl; 183 | -------------------------------------------------------------------------------- /app/common/leaflet-plugin/Control.OSMGeocoder.js: -------------------------------------------------------------------------------- 1 | if (typeof console == "undefined") { 2 | this.console = { log: function (msg) { /* do nothing since it would otherwise break IE */} }; 3 | } 4 | 5 | 6 | L.Control.OSMGeocoder = L.Control.extend({ 7 | options: { 8 | collapsed: true, 9 | position: 'topright', 10 | text: 'Locate', 11 | placeholder: '', 12 | bounds: null, // L.LatLngBounds 13 | email: null, // String 14 | callback: function (results) { 15 | if (results.length == 0) { 16 | console.log("ERROR: didn't find a result"); 17 | return; 18 | } 19 | var bbox = results[0].boundingbox, 20 | first = new L.LatLng(bbox[0], bbox[2]), 21 | second = new L.LatLng(bbox[1], bbox[3]), 22 | bounds = new L.LatLngBounds([first, second]); 23 | this._map.fitBounds(bounds); 24 | } 25 | }, 26 | 27 | _callbackId: 0, 28 | 29 | initialize: function (options) { 30 | L.Util.setOptions(this, options); 31 | }, 32 | 33 | onAdd: function (map) { 34 | this._map = map; 35 | 36 | var className = 'leaflet-control-geocoder', 37 | container = this._container = L.DomUtil.create('div', className); 38 | 39 | L.DomEvent.disableClickPropagation(container); 40 | 41 | var form = this._form = L.DomUtil.create('form', className + '-form'); 42 | 43 | var input = this._input = document.createElement('input'); 44 | input.type = "text"; 45 | input.placeholder = this.options.placeholder || ''; 46 | 47 | var submit = document.createElement('input'); 48 | submit.type = "submit"; 49 | submit.value = this.options.text; 50 | 51 | form.appendChild(input); 52 | form.appendChild(submit); 53 | 54 | L.DomEvent.addListener(form, 'submit', this._geocode, this); 55 | 56 | if (this.options.collapsed) { 57 | L.DomEvent.addListener(container, 'mouseover', this._expand, this); 58 | L.DomEvent.addListener(container, 'mouseout', this._collapse, this); 59 | 60 | var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container); 61 | link.href = '#'; 62 | link.title = 'Nominatim Geocoder'; 63 | 64 | L.DomEvent.addListener(link, L.Browser.touch ? 'click' : 'focus', this._expand, this); 65 | 66 | this._map.on('movestart', this._collapse, this); 67 | } else { 68 | this._expand(); 69 | } 70 | 71 | container.appendChild(form); 72 | 73 | return container; 74 | }, 75 | 76 | /* helper functions for cordinate extraction */ 77 | _createSearchResult : function(lat, lon) { 78 | //creates an position description similar to the result of a Nominatim search 79 | var diff = 0.005; 80 | var result = []; 81 | result[0] = {}; 82 | result[0]["boundingbox"] = [parseFloat(lat)-diff,parseFloat(lat)+diff,parseFloat(lon)-diff,parseFloat(lon)+diff]; 83 | result[0]["class"]="boundary"; 84 | result[0]["display_name"]="Position: "+lat+" "+lon; 85 | result[0]["lat"] = lat; 86 | result[0]["lon"] = lon; 87 | return result; 88 | }, 89 | _isLatLon : function (q) { 90 | //"lon lat" => xx.xxx x.xxxxx 91 | var re = /(-?\d+\.\d+)\s(-?\d+\.\d+)/; 92 | var m = re.exec(q); 93 | if (m != undefined) return m; 94 | 95 | //lat...xx.xxx...lon...x.xxxxx 96 | re = /lat\D*(-?\d+\.\d+)\D*lon\D*(-?\d+\.\d+)/; 97 | m = re.exec(q); 98 | //showRegExpResult(m); 99 | if (m != undefined) return m; 100 | else return null; 101 | }, 102 | _isLatLon_decMin : function (q) { 103 | console.log("is LatLon?: "+q); 104 | //N 53° 13.785' E 010° 23.887' 105 | //re = /[NS]\s*(\d+)\D*(\d+\.\d+).?\s*[EW]\s*(\d+)\D*(\d+\.\d+)\D*/; 106 | re = /([ns])\s*(\d+)\D*(\d+\.\d+).?\s*([ew])\s*(\d+)\D*(\d+\.\d+)/i; 107 | m = re.exec(q.toLowerCase()); 108 | //showRegExpResult(m); 109 | if ((m != undefined)) return m; 110 | else return null; 111 | // +- dec min +- dec min 112 | }, 113 | 114 | _geocode : function (event) { 115 | L.DomEvent.preventDefault(event); 116 | var q = this._input.value; 117 | //try to find corrdinates 118 | if (this._isLatLon(q) != null) 119 | { 120 | var m = this._isLatLon(q); 121 | console.log("LatLon: "+m[1]+" "+m[2]); 122 | //m = {lon, lat} 123 | this.options.callback.call(this, this._createSearchResult(m[1],m[2])); 124 | return; 125 | } 126 | else if (this._isLatLon_decMin(q) != null) 127 | { 128 | var m = this._isLatLon_decMin(q); 129 | //m: [ns, lat dec, lat min, ew, lon dec, lon min] 130 | var temp = new Array(); 131 | temp['n'] = 1; 132 | temp['s'] = -1; 133 | temp['e'] = 1; 134 | temp['w'] = -1; 135 | this.options.callback.call(this,this._createSearchResult( 136 | temp[m[1]]*(Number(m[2]) + m[3]/60), 137 | temp[m[4]]*(Number(m[5]) + m[6]/60) 138 | )); 139 | return; 140 | } 141 | 142 | //and now Nominatim 143 | //http://wiki.openstreetmap.org/wiki/Nominatim 144 | console.log(this._callbackId); 145 | window[("_l_osmgeocoder_"+this._callbackId)] = L.Util.bind(this.options.callback, this); 146 | 147 | 148 | /* Set up params to send to Nominatim */ 149 | var params = { 150 | // Defaults 151 | q: this._input.value, 152 | json_callback : ("_l_osmgeocoder_"+this._callbackId++), 153 | format: 'json' 154 | }; 155 | 156 | if (this.options.bounds && this.options.bounds != null) { 157 | if( this.options.bounds instanceof L.LatLngBounds ) { 158 | params.viewbox = this.options.bounds.toBBoxString(); 159 | params.bounded = 1; 160 | } 161 | else { 162 | console.log('bounds must be of type L.LatLngBounds'); 163 | return; 164 | } 165 | } 166 | 167 | if (this.options.email && this.options.email != null) { 168 | if (typeof this.options.email == 'string') { 169 | params.email = this.options.email; 170 | } 171 | else{ 172 | console.log('email must be a string'); 173 | } 174 | } 175 | 176 | var protocol = location.protocol; 177 | if (protocol == "file:") protocol = "https:"; 178 | var url = protocol + "//nominatim.openstreetmap.org/search" + L.Util.getParamString(params), 179 | script = document.createElement("script"); 180 | 181 | 182 | 183 | 184 | script.type = "text/javascript"; 185 | script.src = url; 186 | script.id = this._callbackId; 187 | document.getElementsByTagName("head")[0].appendChild(script); 188 | }, 189 | 190 | _expand: function () { 191 | L.DomUtil.addClass(this._container, 'leaflet-control-geocoder-expanded'); 192 | }, 193 | 194 | _collapse: function () { 195 | this._container.className = this._container.className.replace(' leaflet-control-geocoder-expanded', ''); 196 | } 197 | }); -------------------------------------------------------------------------------- /output/app/common/leaflet-plugin/Control.OSMGeocoder.js: -------------------------------------------------------------------------------- 1 | if (typeof console == "undefined") { 2 | this.console = { log: function (msg) { /* do nothing since it would otherwise break IE */} }; 3 | } 4 | 5 | 6 | L.Control.OSMGeocoder = L.Control.extend({ 7 | options: { 8 | collapsed: true, 9 | position: 'topright', 10 | text: 'Locate', 11 | placeholder: '', 12 | bounds: null, // L.LatLngBounds 13 | email: null, // String 14 | callback: function (results) { 15 | if (results.length == 0) { 16 | console.log("ERROR: didn't find a result"); 17 | return; 18 | } 19 | var bbox = results[0].boundingbox, 20 | first = new L.LatLng(bbox[0], bbox[2]), 21 | second = new L.LatLng(bbox[1], bbox[3]), 22 | bounds = new L.LatLngBounds([first, second]); 23 | this._map.fitBounds(bounds); 24 | } 25 | }, 26 | 27 | _callbackId: 0, 28 | 29 | initialize: function (options) { 30 | L.Util.setOptions(this, options); 31 | }, 32 | 33 | onAdd: function (map) { 34 | this._map = map; 35 | 36 | var className = 'leaflet-control-geocoder', 37 | container = this._container = L.DomUtil.create('div', className); 38 | 39 | L.DomEvent.disableClickPropagation(container); 40 | 41 | var form = this._form = L.DomUtil.create('form', className + '-form'); 42 | 43 | var input = this._input = document.createElement('input'); 44 | input.type = "text"; 45 | input.placeholder = this.options.placeholder || ''; 46 | 47 | var submit = document.createElement('input'); 48 | submit.type = "submit"; 49 | submit.value = this.options.text; 50 | 51 | form.appendChild(input); 52 | form.appendChild(submit); 53 | 54 | L.DomEvent.addListener(form, 'submit', this._geocode, this); 55 | 56 | if (this.options.collapsed) { 57 | L.DomEvent.addListener(container, 'mouseover', this._expand, this); 58 | L.DomEvent.addListener(container, 'mouseout', this._collapse, this); 59 | 60 | var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container); 61 | link.href = '#'; 62 | link.title = 'Nominatim Geocoder'; 63 | 64 | L.DomEvent.addListener(link, L.Browser.touch ? 'click' : 'focus', this._expand, this); 65 | 66 | this._map.on('movestart', this._collapse, this); 67 | } else { 68 | this._expand(); 69 | } 70 | 71 | container.appendChild(form); 72 | 73 | return container; 74 | }, 75 | 76 | /* helper functions for cordinate extraction */ 77 | _createSearchResult : function(lat, lon) { 78 | //creates an position description similar to the result of a Nominatim search 79 | var diff = 0.005; 80 | var result = []; 81 | result[0] = {}; 82 | result[0]["boundingbox"] = [parseFloat(lat)-diff,parseFloat(lat)+diff,parseFloat(lon)-diff,parseFloat(lon)+diff]; 83 | result[0]["class"]="boundary"; 84 | result[0]["display_name"]="Position: "+lat+" "+lon; 85 | result[0]["lat"] = lat; 86 | result[0]["lon"] = lon; 87 | return result; 88 | }, 89 | _isLatLon : function (q) { 90 | //"lon lat" => xx.xxx x.xxxxx 91 | var re = /(-?\d+\.\d+)\s(-?\d+\.\d+)/; 92 | var m = re.exec(q); 93 | if (m != undefined) return m; 94 | 95 | //lat...xx.xxx...lon...x.xxxxx 96 | re = /lat\D*(-?\d+\.\d+)\D*lon\D*(-?\d+\.\d+)/; 97 | m = re.exec(q); 98 | //showRegExpResult(m); 99 | if (m != undefined) return m; 100 | else return null; 101 | }, 102 | _isLatLon_decMin : function (q) { 103 | console.log("is LatLon?: "+q); 104 | //N 53° 13.785' E 010° 23.887' 105 | //re = /[NS]\s*(\d+)\D*(\d+\.\d+).?\s*[EW]\s*(\d+)\D*(\d+\.\d+)\D*/; 106 | re = /([ns])\s*(\d+)\D*(\d+\.\d+).?\s*([ew])\s*(\d+)\D*(\d+\.\d+)/i; 107 | m = re.exec(q.toLowerCase()); 108 | //showRegExpResult(m); 109 | if ((m != undefined)) return m; 110 | else return null; 111 | // +- dec min +- dec min 112 | }, 113 | 114 | _geocode : function (event) { 115 | L.DomEvent.preventDefault(event); 116 | var q = this._input.value; 117 | //try to find corrdinates 118 | if (this._isLatLon(q) != null) 119 | { 120 | var m = this._isLatLon(q); 121 | console.log("LatLon: "+m[1]+" "+m[2]); 122 | //m = {lon, lat} 123 | this.options.callback.call(this, this._createSearchResult(m[1],m[2])); 124 | return; 125 | } 126 | else if (this._isLatLon_decMin(q) != null) 127 | { 128 | var m = this._isLatLon_decMin(q); 129 | //m: [ns, lat dec, lat min, ew, lon dec, lon min] 130 | var temp = new Array(); 131 | temp['n'] = 1; 132 | temp['s'] = -1; 133 | temp['e'] = 1; 134 | temp['w'] = -1; 135 | this.options.callback.call(this,this._createSearchResult( 136 | temp[m[1]]*(Number(m[2]) + m[3]/60), 137 | temp[m[4]]*(Number(m[5]) + m[6]/60) 138 | )); 139 | return; 140 | } 141 | 142 | //and now Nominatim 143 | //http://wiki.openstreetmap.org/wiki/Nominatim 144 | console.log(this._callbackId); 145 | window[("_l_osmgeocoder_"+this._callbackId)] = L.Util.bind(this.options.callback, this); 146 | 147 | 148 | /* Set up params to send to Nominatim */ 149 | var params = { 150 | // Defaults 151 | q: this._input.value, 152 | json_callback : ("_l_osmgeocoder_"+this._callbackId++), 153 | format: 'json' 154 | }; 155 | 156 | if (this.options.bounds && this.options.bounds != null) { 157 | if( this.options.bounds instanceof L.LatLngBounds ) { 158 | params.viewbox = this.options.bounds.toBBoxString(); 159 | params.bounded = 1; 160 | } 161 | else { 162 | console.log('bounds must be of type L.LatLngBounds'); 163 | return; 164 | } 165 | } 166 | 167 | if (this.options.email && this.options.email != null) { 168 | if (typeof this.options.email == 'string') { 169 | params.email = this.options.email; 170 | } 171 | else{ 172 | console.log('email must be a string'); 173 | } 174 | } 175 | 176 | var protocol = location.protocol; 177 | if (protocol == "file:") protocol = "https:"; 178 | var url = protocol + "//nominatim.openstreetmap.org/search" + L.Util.getParamString(params), 179 | script = document.createElement("script"); 180 | 181 | 182 | 183 | 184 | script.type = "text/javascript"; 185 | script.src = url; 186 | script.id = this._callbackId; 187 | document.getElementsByTagName("head")[0].appendChild(script); 188 | }, 189 | 190 | _expand: function () { 191 | L.DomUtil.addClass(this._container, 'leaflet-control-geocoder-expanded'); 192 | }, 193 | 194 | _collapse: function () { 195 | this._container.className = this._container.className.replace(' leaflet-control-geocoder-expanded', ''); 196 | } 197 | }); -------------------------------------------------------------------------------- /app/common/plugin/measureControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 距离量算 3 | * 修改参考：https://github.com/makinacorpus/Leaflet.MeasureControl 4 | * 依赖 leaflet-draw(包括js和css) 5 | * by zry 6 | * @Date 2017-04-05 7 | */ 8 | import L from 'leaflet'; 9 | import draw from 'leaflet-draw';//矢量画图工具 10 | import '../css/leaflet.draw.css'; 11 | import './measureControl.css'; 12 | 13 | L.Polyline.Measure = L.Draw.Polyline.extend({ 14 | addHooks: function() { 15 | L.Draw.Polyline.prototype.addHooks.call(this); 16 | if (this._map) { 17 | this._markerGroup = new L.LayerGroup(); 18 | this._map.addLayer(this._markerGroup); 19 | 20 | this._markers = []; 21 | this._map.on('click', this._onClick, this); 22 | this._startShape(); 23 | } 24 | }, 25 | 26 | removeHooks: function() { 27 | L.Draw.Polyline.prototype.removeHooks.call(this); 28 | 29 | this._clearHideErrorTimeout(); 30 | 31 | // !\ Still useful when control is disabled before any drawing (refactor needed?) 32 | this._map 33 | .off('pointermove', this._onMouseMove, this) 34 | .off('mousemove', this._onMouseMove, this) 35 | .off('click', this._onClick, this); 36 | 37 | this._clearGuides(); 38 | this._container.style.cursor = ''; 39 | 40 | this._removeShape(); 41 | }, 42 | 43 | _startShape: function() { 44 | this._drawing = true; 45 | this._poly = new L.Polyline([], this.options.shapeOptions); 46 | // this is added as a placeholder, if leaflet doesn't recieve 47 | // this when the tool is turned off all onclick events are removed 48 | this._poly._onClick = function() {}; 49 | 50 | this._container.style.cursor = 'crosshair'; 51 | 52 | this._updateTooltip(); 53 | 54 | this._map 55 | .on('pointermove', this._onMouseMove, this) //移动端支持 56 | .on('mousemove', this._onMouseMove, this); 57 | }, 58 | 59 | _finishShape: function() { 60 | this._drawing = false; 61 | 62 | this._cleanUpShape(); 63 | this._clearGuides(); 64 | 65 | this._updateTooltip(); 66 | this._map 67 | .off('pointermove', this._onMouseMove, this) 68 | .off('mousemove', this._onMouseMove, this); 69 | 70 | this._container.style.cursor = ''; 71 | }, 72 | 73 | _removeShape: function() { 74 | if (!this._poly) return; 75 | this._map.removeLayer(this._poly); 76 | delete this._poly; 77 | this._markers.splice(0); 78 | this._markerGroup.clearLayers(); 79 | }, 80 | 81 | _onClick: function() { 82 | if (!this._drawing) { 83 | this._removeShape(); 84 | this._startShape(); 85 | return; 86 | } 87 | }, 88 | 89 | _getTooltipText: function() { 90 | 91 | var showLength = this.options.showLength, 92 | labelText, distanceStr; 93 | 94 | if (this._markers.length === 0) { 95 | labelText = { 96 | text: "开始"||L.drawLocal.draw.handlers.polyline.tooltip.start 97 | }; 98 | } else { 99 | distanceStr = showLength ? this._getMeasurementString() : ''; 100 | 101 | if (this._markers.length === 1) { 102 | labelText = { 103 | text: "下一个点"||L.drawLocal.draw.handlers.polyline.tooltip.cont, 104 | subtext: distanceStr 105 | }; 106 | } else { 107 | labelText = { 108 | text: "点击最后一个点结束"||L.drawLocal.draw.handlers.polyline.tooltip.end, 109 | subtext: distanceStr 110 | }; 111 | } 112 | } 113 | 114 | if (!this._drawing) { 115 | labelText.text = ''; 116 | } 117 | return labelText; 118 | }, 119 | //设定单位 120 | _getMeasurementString: function () { 121 | var currentLatLng = this._currentLatLng, 122 | previousLatLng = this._markers[this._markers.length - 1].getLatLng(), 123 | distance; 124 | 125 | // calculate the distance from the last fixed point to the mouse position 126 | distance = this._measurementRunningTotal + currentLatLng.distanceTo(previousLatLng); 127 | 128 | return L.GeometryUtil.readableDistance(distance, this.options.metric/*, this.options.feet*/); 129 | } 130 | }); 131 | 132 | L.Control.MeasureControl = L.Control.extend({ 133 | 134 | statics: { 135 | TITLE: '测量距离' 136 | }, 137 | options: { 138 | position: 'topleft', 139 | handler: {}, 140 | }, 141 | 142 | toggle: function() { 143 | if (this.handler.enabled()) { 144 | this.handler.disable.call(this.handler); 145 | } else { 146 | this.handler.enable.call(this.handler); 147 | } 148 | }, 149 | //addTo(map) -->onAdd(map) 150 | onAdd: function(map) { 151 | var link = null; 152 | var className = 'leaflet-control-draw'; 153 | 154 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 155 | 156 | this.handler = new L.Polyline.Measure(map, this.options.handler); 157 | 158 | this.handler.on('enabled', function() { 159 | this.enabled = true; 160 | L.DomUtil.addClass(this._container, 'enabled'); 161 | }, this); 162 | 163 | this.handler.on('disabled', function() { 164 | delete this.enabled; 165 | L.DomUtil.removeClass(this._container, 'enabled'); 166 | }, this); 167 | 168 | link = L.DomUtil.create('a', className + '-measure', this._container); 169 | link.href = '#'; 170 | link.title = L.Control.MeasureControl.TITLE; 171 | 172 | L.DomEvent 173 | .addListener(link, 'click', L.DomEvent.stopPropagation) 174 | .addListener(link, 'click', L.DomEvent.preventDefault) 175 | .addListener(link, 'click', this.toggle, this); 176 | 177 | return this._container; 178 | } 179 | }); 180 | 181 | 182 | L.Map.mergeOptions({ 183 | measureControl: false 184 | }); 185 | 186 | /** 187 | * 如果配置中有measureControl的话 188 | * 例如：var map = L.map('map', {measureControl:true}); 189 | */ 190 | L.Map.addInitHook(function() { 191 | if (this.options.measureControl) { 192 | this.measureControl = L.Control.measureControl().addTo(this); 193 | } 194 | }); 195 | 196 | 197 | L.control.measureControl = function(options) { 198 | return new L.Control.MeasureControl(options); 199 | }; 200 | 201 | export default L.control.measureControl; -------------------------------------------------------------------------------- /output/app/common/plugin/measureControl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 距离量算 3 | * 修改参考：https://github.com/makinacorpus/Leaflet.MeasureControl 4 | * 依赖 leaflet-draw(包括js和css) 5 | * by zry 6 | * @Date 2017-04-05 7 | */ 8 | import L from 'leaflet'; 9 | import draw from 'leaflet-draw';//矢量画图工具 10 | import '../css/leaflet.draw.css'; 11 | import './measureControl.css'; 12 | 13 | L.Polyline.Measure = L.Draw.Polyline.extend({ 14 | addHooks: function() { 15 | L.Draw.Polyline.prototype.addHooks.call(this); 16 | if (this._map) { 17 | this._markerGroup = new L.LayerGroup(); 18 | this._map.addLayer(this._markerGroup); 19 | 20 | this._markers = []; 21 | this._map.on('click', this._onClick, this); 22 | this._startShape(); 23 | } 24 | }, 25 | 26 | removeHooks: function() { 27 | L.Draw.Polyline.prototype.removeHooks.call(this); 28 | 29 | this._clearHideErrorTimeout(); 30 | 31 | // !\ Still useful when control is disabled before any drawing (refactor needed?) 32 | this._map 33 | .off('pointermove', this._onMouseMove, this) 34 | .off('mousemove', this._onMouseMove, this) 35 | .off('click', this._onClick, this); 36 | 37 | this._clearGuides(); 38 | this._container.style.cursor = ''; 39 | 40 | this._removeShape(); 41 | }, 42 | 43 | _startShape: function() { 44 | this._drawing = true; 45 | this._poly = new L.Polyline([], this.options.shapeOptions); 46 | // this is added as a placeholder, if leaflet doesn't recieve 47 | // this when the tool is turned off all onclick events are removed 48 | this._poly._onClick = function() {}; 49 | 50 | this._container.style.cursor = 'crosshair'; 51 | 52 | this._updateTooltip(); 53 | 54 | this._map 55 | .on('pointermove', this._onMouseMove, this) //移动端支持 56 | .on('mousemove', this._onMouseMove, this); 57 | }, 58 | 59 | _finishShape: function() { 60 | this._drawing = false; 61 | 62 | this._cleanUpShape(); 63 | this._clearGuides(); 64 | 65 | this._updateTooltip(); 66 | this._map 67 | .off('pointermove', this._onMouseMove, this) 68 | .off('mousemove', this._onMouseMove, this); 69 | 70 | this._container.style.cursor = ''; 71 | }, 72 | 73 | _removeShape: function() { 74 | if (!this._poly) return; 75 | this._map.removeLayer(this._poly); 76 | delete this._poly; 77 | this._markers.splice(0); 78 | this._markerGroup.clearLayers(); 79 | }, 80 | 81 | _onClick: function() { 82 | if (!this._drawing) { 83 | this._removeShape(); 84 | this._startShape(); 85 | return; 86 | } 87 | }, 88 | 89 | _getTooltipText: function() { 90 | 91 | var showLength = this.options.showLength, 92 | labelText, distanceStr; 93 | 94 | if (this._markers.length === 0) { 95 | labelText = { 96 | text: "开始"||L.drawLocal.draw.handlers.polyline.tooltip.start 97 | }; 98 | } else { 99 | distanceStr = showLength ? this._getMeasurementString() : ''; 100 | 101 | if (this._markers.length === 1) { 102 | labelText = { 103 | text: "下一个点"||L.drawLocal.draw.handlers.polyline.tooltip.cont, 104 | subtext: distanceStr 105 | }; 106 | } else { 107 | labelText = { 108 | text: "点击最后一个点结束"||L.drawLocal.draw.handlers.polyline.tooltip.end, 109 | subtext: distanceStr 110 | }; 111 | } 112 | } 113 | 114 | if (!this._drawing) { 115 | labelText.text = ''; 116 | } 117 | return labelText; 118 | }, 119 | //设定单位 120 | _getMeasurementString: function () { 121 | var currentLatLng = this._currentLatLng, 122 | previousLatLng = this._markers[this._markers.length - 1].getLatLng(), 123 | distance; 124 | 125 | // calculate the distance from the last fixed point to the mouse position 126 | distance = this._measurementRunningTotal + currentLatLng.distanceTo(previousLatLng); 127 | 128 | return L.GeometryUtil.readableDistance(distance, this.options.metric/*, this.options.feet*/); 129 | } 130 | }); 131 | 132 | L.Control.MeasureControl = L.Control.extend({ 133 | 134 | statics: { 135 | TITLE: '测量距离' 136 | }, 137 | options: { 138 | position: 'topleft', 139 | handler: {}, 140 | }, 141 | 142 | toggle: function() { 143 | if (this.handler.enabled()) { 144 | this.handler.disable.call(this.handler); 145 | } else { 146 | this.handler.enable.call(this.handler); 147 | } 148 | }, 149 | //addTo(map) -->onAdd(map) 150 | onAdd: function(map) { 151 | var link = null; 152 | var className = 'leaflet-control-draw'; 153 | 154 | this._container = L.DomUtil.create('div', 'leaflet-bar'); 155 | 156 | this.handler = new L.Polyline.Measure(map, this.options.handler); 157 | 158 | this.handler.on('enabled', function() { 159 | this.enabled = true; 160 | L.DomUtil.addClass(this._container, 'enabled'); 161 | }, this); 162 | 163 | this.handler.on('disabled', function() { 164 | delete this.enabled; 165 | L.DomUtil.removeClass(this._container, 'enabled'); 166 | }, this); 167 | 168 | link = L.DomUtil.create('a', className + '-measure', this._container); 169 | link.href = '#'; 170 | link.title = L.Control.MeasureControl.TITLE; 171 | 172 | L.DomEvent 173 | .addListener(link, 'click', L.DomEvent.stopPropagation) 174 | .addListener(link, 'click', L.DomEvent.preventDefault) 175 | .addListener(link, 'click', this.toggle, this); 176 | 177 | return this._container; 178 | } 179 | }); 180 | 181 | 182 | L.Map.mergeOptions({ 183 | measureControl: false 184 | }); 185 | 186 | /** 187 | * 如果配置中有measureControl的话 188 | * 例如：var map = L.map('map', {measureControl:true}); 189 | */ 190 | L.Map.addInitHook(function() { 191 | if (this.options.measureControl) { 192 | this.measureControl = L.Control.measureControl().addTo(this); 193 | } 194 | }); 195 | 196 | 197 | L.control.measureControl = function(options) { 198 | return new L.Control.MeasureControl(options); 199 | }; 200 | 201 | export default L.control.measureControl; -------------------------------------------------------------------------------- /app/common/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 工具函数 3 | * @Date 2017-04-05 4 | */ 5 | let util = { 6 | /** 7 | * [adapt 屏幕自适应] 8 | * @param {Number} designWidth [标准设计稿尺寸] 9 | * @param {Number} rem2px [标准设计稿下1rem等于多少px] 10 | * @return {[null]} [] 11 | */ 12 | adapt(designWidth = 640,rem2px = 100){ 13 | let doc = window.document, 14 | d = doc.createElement('div'); 15 | d.style.width ='1rem'; 16 | d.style.display = 'none'; 17 | let head = doc.getElementsByTagName('head')[0]; 18 | head.appendChild(d); 19 | let defaultFontSize = parseFloat(window.getComputedStyle(d,null).getPropertyValue('width')); 20 | d.remove(); 21 | doc.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px /defaultFontSize * 100 +'%'; 22 | let st = doc.createElement('style'); 23 | let portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"; 24 | let landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}" 25 | st.innerHTML = portrait + landscape; 26 | head.appendChild(st); 27 | }, 28 | /** 29 | * [debounce 防反跳] 30 | * @param {[Function]} func [防反跳的函数] 31 | * @param {[Number]} threshold [时间间隔] 32 | * @param {[Boolean]} execAsap [是否立即执行，true立即执行，默认为false] 33 | * @param {[Function]} fun [如果存在，一定会执行的函数] 34 | * @return {[null]} 35 | */ 36 | debounce(func, threshold = 100, execAsap = false, fun){ 37 | let timeout; 38 | return function debounced(){ 39 | let self = this, args = arguments; 40 | function delayed(){ 41 | if(!execAsap) func.apply(self,args); 42 | timeout = null; 43 | } 44 | 45 | if(timeout){ 46 | clearTimeout(timeout); 47 | }else if(execAsap){ 48 | func.apply(self,args); 49 | } 50 | timeout = setTimeout(delayed,threshold); 51 | 52 | if(fun) fun.apply(self,args); 53 | } 54 | }, 55 | /** 56 | * [debounceAdapt 动态计算媒体查询] 57 | * @param {Number} designWidth [标准设计稿尺寸] 58 | * @param {Number} rem2px [标准设计稿下1rem等于多少px] 59 | */ 60 | debounceAdapt(designWidth = 640,rem2px = 100) { 61 | this.adapt(designWidth,rem2px);//屏幕自适应处理 62 | window.onresize = this.debounce(() => { 63 | this.adapt(designWidth,rem2px); 64 | },200,false); 65 | }, 66 | /** 67 | * [adaptHeight 高度自适应] 68 | * @param {[String]} domId [控制dom高度的id] 69 | * @param {[Number]} otherHeight [除了domId其余部分高度] 70 | * @param {[Number]} threshold [时间间隔] 71 | */ 72 | adaptHeight(domId,otherHeight,threshold = 300){ 73 | let mapDom,bodyHeight ; 74 | otherHeight = parseFloat(otherHeight)||0; 75 | mapDom = document.getElementById(domId); 76 | mapDom.style.height = getHeight()+"px"; 77 | 78 | window.onresize = this.debounce(()=>{ 79 | if(__DEV__) console.log(mapDom.style.height); 80 | mapDom.style.height = getHeight()+"px"; 81 | },threshold); 82 | 83 | function getHeight(){ 84 | var height = 500;//最好设置个最小 85 | if(document.documentElement.clientHeight > 500) 86 | height = document.documentElement.clientHeight - otherHeight; 87 | return height; 88 | } 89 | }, 90 | /** 91 | * [getJSON 获取json文件] 92 | * @param {[String]} url [url地址] 93 | * @return {[Promise]} [promise] 94 | */ 95 | getJson(url){ 96 | let promise = new Promise((resolve, reject)=>{ 97 | let client = new XMLHttpRequest(); 98 | client.open("GET", url); 99 | client.onreadystatechange = handler; 100 | client.responseType = "json"; 101 | client.setRequestHeader("Accept", "application/json"); 102 | client.send(); 103 | 104 | function handler() { 105 | if (this.readyState !== 4) { 106 | return; 107 | } 108 | if (this.status === 200) { 109 | resolve(this.response); 110 | } else { 111 | reject(new Error(this.statusText)); 112 | } 113 | }; 114 | }); 115 | 116 | return promise; 117 | 118 | }, 119 | /*showTipWin(text,time = 500,style={width:"100px",height:"100px"}){ 120 | let div = document.createElement('div'); 121 | div.style.display = "absolute"; 122 | div.style.width = style.width; 123 | div.style.height = style.height; 124 | div.style. 125 | },*/ 126 | /** 127 | * [cloneObj 深拷贝对象] 128 | * @param {[Object]} obj [被拷贝的对象] 129 | * @return {[Object]} [返回拷贝后的对象] 130 | */ 131 | cloneObj(obj){ 132 | let newObj,s; 133 | if(typeof obj!== 'object') return; 134 | newObj = obj.constructor === Object ? {} : []; 135 | if(window.JSON){ 136 | s = JSON.stringify(obj); 137 | newObj = JSON.parse(s); 138 | }else{ 139 | if(newObj.constructor === Array){ 140 | newObj.concat(obj); 141 | }else{ 142 | for(let o in obj){ 143 | newObj[i] = obj[i]; 144 | } 145 | } 146 | } 147 | 148 | return newObj; 149 | }, 150 | byClassName(className,index){ 151 | if(index !== undefined) return document.getElementsByClassName(className)[index]; 152 | return document.getElementsByClassName(className); 153 | }, 154 | ByIdName(id){ 155 | return document.getElementById(id); 156 | }, 157 | /** 158 | * [getScript 异步加载script] 159 | * @param {[String]} url [script地址] 160 | * @return {[Promise]} [promise] 161 | */ 162 | getScript(url){ 163 | let promise = new Promise((resolve,reject)=>{ 164 | let script = document.createElement('script'); 165 | script.type = 'text/javascript'; 166 | 167 | script.onreadystatechange = ()=>{ 168 | if(this.readyState=='complete'){ 169 | resolve(); 170 | } 171 | } 172 | script.onload = ()=>{ 173 | resolve(); 174 | } 175 | script.onerror = ()=>{ 176 | reject(); 177 | } 178 | script.src = url; 179 | document.getElementsByTagName('head')[0].appendChild(script); 180 | }) 181 | 182 | return promise; 183 | } 184 | 185 | } 186 | 187 | 188 | export default util; -------------------------------------------------------------------------------- /output/app/common/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 工具函数 3 | * @Date 2017-04-05 4 | */ 5 | let util = { 6 | /** 7 | * [adapt 屏幕自适应] 8 | * @param {Number} designWidth [标准设计稿尺寸] 9 | * @param {Number} rem2px [标准设计稿下1rem等于多少px] 10 | * @return {[null]} [] 11 | */ 12 | adapt(designWidth = 640,rem2px = 100){ 13 | let doc = window.document, 14 | d = doc.createElement('div'); 15 | d.style.width ='1rem'; 16 | d.style.display = 'none'; 17 | let head = doc.getElementsByTagName('head')[0]; 18 | head.appendChild(d); 19 | let defaultFontSize = parseFloat(window.getComputedStyle(d,null).getPropertyValue('width')); 20 | d.remove(); 21 | doc.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px /defaultFontSize * 100 +'%'; 22 | let st = doc.createElement('style'); 23 | let portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"; 24 | let landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}" 25 | st.innerHTML = portrait + landscape; 26 | head.appendChild(st); 27 | }, 28 | /** 29 | * [debounce 防反跳] 30 | * @param {[Function]} func [防反跳的函数] 31 | * @param {[Number]} threshold [时间间隔] 32 | * @param {[Boolean]} execAsap [是否立即执行，true立即执行，默认为false] 33 | * @param {[Function]} fun [如果存在，一定会执行的函数] 34 | * @return {[null]} 35 | */ 36 | debounce(func, threshold = 100, execAsap = false, fun){ 37 | let timeout; 38 | return function debounced(){ 39 | let self = this, args = arguments; 40 | function delayed(){ 41 | if(!execAsap) func.apply(self,args); 42 | timeout = null; 43 | } 44 | 45 | if(timeout){ 46 | clearTimeout(timeout); 47 | }else if(execAsap){ 48 | func.apply(self,args); 49 | } 50 | timeout = setTimeout(delayed,threshold); 51 | 52 | if(fun) fun.apply(self,args); 53 | } 54 | }, 55 | /** 56 | * [debounceAdapt 动态计算媒体查询] 57 | * @param {Number} designWidth [标准设计稿尺寸] 58 | * @param {Number} rem2px [标准设计稿下1rem等于多少px] 59 | */ 60 | debounceAdapt(designWidth = 640,rem2px = 100) { 61 | this.adapt(designWidth,rem2px);//屏幕自适应处理 62 | window.onresize = this.debounce(() => { 63 | this.adapt(designWidth,rem2px); 64 | },200,false); 65 | }, 66 | /** 67 | * [adaptHeight 高度自适应] 68 | * @param {[String]} domId [控制dom高度的id] 69 | * @param {[Number]} otherHeight [除了domId其余部分高度] 70 | * @param {[Number]} threshold [时间间隔] 71 | */ 72 | adaptHeight(domId,otherHeight,threshold = 300){ 73 | let mapDom,bodyHeight ; 74 | otherHeight = parseFloat(otherHeight)||0; 75 | mapDom = document.getElementById(domId); 76 | mapDom.style.height = getHeight()+"px"; 77 | 78 | window.onresize = this.debounce(()=>{ 79 | if(__DEV__) console.log(mapDom.style.height); 80 | mapDom.style.height = getHeight()+"px"; 81 | },threshold); 82 | 83 | function getHeight(){ 84 | var height = 500;//最好设置个最小 85 | if(document.documentElement.clientHeight > 500) 86 | height = document.documentElement.clientHeight - otherHeight; 87 | return height; 88 | } 89 | }, 90 | /** 91 | * [getJSON 获取json文件] 92 | * @param {[String]} url [url地址] 93 | * @return {[Promise]} [promise] 94 | */ 95 | getJson(url){ 96 | let promise = new Promise((resolve, reject)=>{ 97 | let client = new XMLHttpRequest(); 98 | client.open("GET", url); 99 | client.onreadystatechange = handler; 100 | client.responseType = "json"; 101 | client.setRequestHeader("Accept", "application/json"); 102 | client.send(); 103 | 104 | function handler() { 105 | if (this.readyState !== 4) { 106 | return; 107 | } 108 | if (this.status === 200) { 109 | resolve(this.response); 110 | } else { 111 | reject(new Error(this.statusText)); 112 | } 113 | }; 114 | }); 115 | 116 | return promise; 117 | 118 | }, 119 | /*showTipWin(text,time = 500,style={width:"100px",height:"100px"}){ 120 | let div = document.createElement('div'); 121 | div.style.display = "absolute"; 122 | div.style.width = style.width; 123 | div.style.height = style.height; 124 | div.style. 125 | },*/ 126 | /** 127 | * [cloneObj 深拷贝对象] 128 | * @param {[Object]} obj [被拷贝的对象] 129 | * @return {[Object]} [返回拷贝后的对象] 130 | */ 131 | cloneObj(obj){ 132 | let newObj,s; 133 | if(typeof obj!== 'object') return; 134 | newObj = obj.constructor === Object ? {} : []; 135 | if(window.JSON){ 136 | s = JSON.stringify(obj); 137 | newObj = JSON.parse(s); 138 | }else{ 139 | if(newObj.constructor === Array){ 140 | newObj.concat(obj); 141 | }else{ 142 | for(let o in obj){ 143 | newObj[i] = obj[i]; 144 | } 145 | } 146 | } 147 | 148 | return newObj; 149 | }, 150 | byClassName(className,index){ 151 | if(index !== undefined) return document.getElementsByClassName(className)[index]; 152 | return document.getElementsByClassName(className); 153 | }, 154 | ByIdName(id){ 155 | return document.getElementById(id); 156 | }, 157 | /** 158 | * [getScript 异步加载script] 159 | * @param {[String]} url [script地址] 160 | * @return {[Promise]} [promise] 161 | */ 162 | getScript(url){ 163 | let promise = new Promise((resolve,reject)=>{ 164 | let script = document.createElement('script'); 165 | script.type = 'text/javascript'; 166 | 167 | script.onreadystatechange = ()=>{ 168 | if(this.readyState=='complete'){ 169 | resolve(); 170 | } 171 | } 172 | script.onload = ()=>{ 173 | resolve(); 174 | } 175 | script.onerror = ()=>{ 176 | reject(); 177 | } 178 | script.src = url; 179 | document.getElementsByTagName('head')[0].appendChild(script); 180 | }) 181 | 182 | return promise; 183 | } 184 | 185 | } 186 | 187 | 188 | export default util; --------------------------------------------------------------------------------