@curupira/vue-mapbox/src/mixins/threeBoxLayer.min.js

A wrapper for Mapbox using Vue, with advanced features and abstractions

import length from '@turf/length'; import lineSliceAlong from '@turf/line-slice-along'; import bbox from '@turf/bbox'
import { scaleTime, scaleLinear } from 'd3-scale'; var turf = { length: length, lineSliceAlong: lineSliceAlong }; export default { name: 'layer', render: function (createElement) { return !1 }, data: () => ({ _geoJSON: !1, layerAdded: !1, zoomRange: !1, loadDelay: 20, icons: {}, obj: { total: 0 }, sourceOptions: {}, modelName: 'pontejk', modelDir: '/models3d/', zoom: 15, throttleZoomUpdate: 1 }), tweenMaster: (new TimelineMax()).pause(), computed: { map: function () { for (var parent = this.$parent; parent;) { if (_.hasIn(parent, 'map')) return parent.map; parent = parent.$parent } return !1 }, threebox: function () { for (var parent = this.$parent; parent;) { if (_.hasIn(parent, 'threebox')) return parent.threebox; parent = parent.$parent } return !1 }, sourceName: function () { return this.$options.name + '_source' }, layerName: function () { return this.$options.name + '_layer' }, tween: function () { return (new TimelineMax()).pause() } }, watch: { geoJSON: function (val) { this.tween.kill(), this.tween.clear(), this._geoJSON = val, setTimeout(this.setSource, 0) } }, beforeCreate: function () { this._geoJSON = !1 }, created: function () { this._geoJSON = this.geoJSON, setTimeout(() => { this.setSource(), this.addLayer() }, 1e3 * this.loadDelay) }, methods: { addLayer: function () { this.threebox && !this.layerAdded && (this.zoom = this.map.getZoom(), this.layerAdded = !0, console.log('Adding _geoJSON threebox'), console.log(this._geoJSON), this.layer = this.threebox.addSymbolLayer({ source: this._geoJSON, modelName: this.modelName, modelDirectory: this.modelDir, rotation: { generator: feature => new THREE.Euler(_.degToRad(feature.properties.rotation[0]), _.degToRad(feature.properties.rotation[1]), _.degToRad(feature.properties.rotation[2]), feature.properties.rotation[3]) }, scale: { generator: feature => { var scale = _.get(feature, 'properties.scale', [1, 1, 1]); var zoomScaleFactor = _.get(feature, 'properties.zoomScaleFactor', !1); if (zoomScaleFactor) { var domain = _.map(zoomScaleFactor, o => o[0]); var range = _.map(zoomScaleFactor, o => o[1]); var scaleFunc; var factorValue = scaleLinear().range(range).domain(domain)(this.zoom); factorValue = _.clamp(factorValue, _.last(range), range[0]), scale = _.map(scale, val => val * factorValue) } return [...scale] } }, scaleWithMapProjection: !0, id: { property: 'key' } }), setTimeout(() => { var debounceFunc = _.throttle(() => { this.layer && (this.zoom = this.map.getZoom(), this.setSource()) }, 10); this.map.on('zoom', debounceFunc), debounceFunc() }, 2e3)) }, 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.layer) return !1; this.layer.updateSourceData(this._geoJSON) }, 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 {} } }; var geojsonTemplate = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: [[0, 0]] } }] }