@curupira/vue-mapbox
Version:
A wrapper for Mapbox using Vue, with advanced features and abstractions
2 lines (1 loc) • 5.55 kB
JavaScript
import lineSliceAlong from '@turf/line-slice-along'; import bbox from '@turf/bbox'; import length from '@turf/length'; var turf = { lineSliceAlong: lineSliceAlong, bbox: bbox, length: length }; export default { name: 'layer', render: function (createElement) { return !1 }, data: () => ({ _geoJSON: !1, layerAdded: !1, zoomRange: !1, loadDelay: 0, icons: {}, obj: { total: 0 }, sourceOptions: {}, nameLayerFromData: void 0 }), tweenMaster: (new TimelineMax()).pause(), computed: { geoJSON: function () { return !1 }, race: function () { return this.$store.getters.currentRace }, map: function () { for (var parent = this.$parent; parent;) { if (_.hasIn(parent, 'map')) return parent.map; parent = parent.$parent } return !1 }, sourceName: function () { return _.get(this, 'nameLayerFromData', this.$options.name) + '_source' }, layerName: function () { return _.get(this, 'nameLayerFromData', this.$options.name) + '_layer' }, tween: function () { return (new TimelineMax()).pause() }, beforeLayer: function () { var layers = this.$store.state.layers; var index; var layerBeforeName = layers[_.indexOf(layers, this.layerName) + 1] || ''; var layer; return this.map.getLayer(layerBeforeName) ? layerBeforeName : '' } }, watch: { geoJSON: function (val) { this.tween.kill(), this.tween.clear(), this._geoJSON = val, setTimeout(this.setSource, 200) } }, beforeCreate: function () { this._geoJSON = !1 }, mounted: function () { if (!this.$options.name) throw Error('Name of layer not defined'); this._geoJSON = this.geoJSON, _.isEmpty(this.icons) || _.each(this.icons, (v, k) => { this.map.loadImage(v, (error, image) => { if (error) throw error; this.map.addImage(k, image) }) }), this.$store.commit('addLayer', this.layerName), setTimeout(() => { this.setSource(), this.addLayer() }, 1e3 * this.loadDelay) }, beforeDestroy: function () { this.map.removeLayer(this.layerName), this.map.removeSource(this.sourceName), console.log('REMOVENDO:' + this.layerName) }, methods: { addLayer: function () { if (this.map && !this.layerAdded) { this.layerAdded = !0; var layerStyle = this.getLayerStyle(); this.map.addLayer(layerStyle), this.setZoomRange(), setTimeout(() => this.setLayerOrder(), 500) } }, getSourceDefinition: function () { var sourceProperties = _.get(this.$options, 'source'); var data; return sourceProperties ? (_.isFunction(sourceProperties) && (sourceProperties = sourceProperties.apply(this)), { ...sourceProperties, ...this.sourceOptions }) : { type: 'geojson', data: this._geoJSON || geojsonTemplate, ...this.sourceOptions } }, setSource: function () { if (!this.map) return !1; var sourceDefinition = this.getSourceDefinition(); var sourceObject = this.map.getSource(this.sourceName); sourceObject ? _.isFunction(sourceObject.setData) && sourceDefinition.data && sourceObject.setData(sourceDefinition.data) : (delete sourceDefinition.id, this.map.addSource(this.sourceName, sourceDefinition)) }, setZoomRange: function () { _.isArray(this.zoomRange) && this.map.setLayerZoomRange(this.layerName, this.zoomRange[0], this.zoomRange[1]) }, setLayerOrder: function () { var layerBefore = this.beforeLayer; layerBefore != '' && this.map.moveLayer(this.layerName, layerBefore) }, getLayerStyle: function () { if (_.isFunction(this.$options.style)) var style = this.$options.style.apply(this); else var style = this.$options.style; return style.source || (style.source = this.sourceName), style.id = this.layerName, style }, animateLine: function (time, follow = !1) { if (!this.geoJSON) return !1; var distance = 0; var geoJsonTemp; var distanceTotal = turf.length(this.geoJSON); if (this.map.resize(), follow) { var paddingHorizontal = 50; var paddingVertical = 50; var bbox = turf.bbox(this.geoJSON); this.map.fitBounds(bbox, { padding: { top: 50, bottom: 50, left: 50, right: 50 }, duration: 0.8 * time * 1e3 }) } var startDistane = 0; var obj = { distance: 0 }; this.tween.to(obj, time, { distance: distanceTotal, onUpdate: () => { geoJsonTemp = obj.distance > distanceTotal ? this.geoJSON : turf.lineSliceAlong(this.geoJSON, 0, obj.distance), this._geoJSON = geoJsonTemp, this.setSource() } }), this.tween.play() }, animateFeatures: function (time, follow = !1) { if (!_.hasIn(this.geoJSON, 'features')) return !1; var geoJsonTemp = { ...this.geoJSON }; var featuresOriginal = [...this.geoJSON.features]; var totalFeatures = featuresOriginal.length; var _t = this; var obj = { total: 0 }; this.tween.add(TweenMax.to(obj, time, { total: totalFeatures, ease: SteppedEase.config(totalFeatures), onUpdate: function () { obj.total > totalFeatures ? geoJsonTemp = { ..._t.geoJSON } : geoJsonTemp.features = [...featuresOriginal.slice(0, parseInt(obj.total))], _t._geoJSON = geoJsonTemp, _t.setSource() } })), this.tween.play() } }, style: function () { return { type: 'symbol', layout: { 'icon-image': 'marker_km', 'icon-anchor': 'bottom', 'icon-allow-overlap': !1, 'text-field': '{name}', 'text-anchor': 'bottom', 'text-line-height': 1, 'text-optional': !0, 'text-offset': { base: 1, stops: [[10, [0, -1]], [14, [0, -1]]] }, 'text-padding': 0, 'text-size': { base: 1, stops: [[10, 6], [14, 12]] }, 'icon-size': { base: 1, stops: [[9, 0.1], [10, 0.2], [14, 1]] } }, paint: { 'text-color': 'white', 'text-halo-color': 'white', 'text-halo-width': 0.4, 'text-halo-blur': 0.2, 'text-opacity': { base: 1, stops: [[11.4, 0], [13, 1]] }, 'icon-opacity': { base: 1, stops: [[11.3, 0], [11.4, 1]] } } } } }; var geojsonTemplate = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0]] } }] }