/
Demo.vue
99 lines (93 loc) · 2.37 KB
/
Demo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template lang="pug">
div.bg-dark-grey.py-3.rounded.border-mid-grey
div.text-center
div Scroll to see some map action!
div#map-container
VueMapboxFeature(
:feature='bikeShelters',
:layer-type='"circle"',
:map='mapInstance',
:paint='circlePaint',
:pulse='true',
:uid='"circle-example"'
)
VueMapboxFeature(
:feature='polyGeom',
:layer-type='"fill"',
:map='mapInstance',
:paint='fillPaint',
:pulse='true',
:uid='"poly-example"'
)
VueMapboxFeature(
:feature='lineGeom',
:layer-type='"line"',
:map='mapInstance',
:paint='linePaint',
:pulse='true',
:uid='"line-example"'
)
</template>
<script setup>
import * as turf from '@turf/turf'
import { useWindowScroll } from '@vueuse/core'
import mapboxgl from 'mapbox-gl'
import { computed, markRaw, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import bikeShelters from '../assets/bikeShelters.json'
import VueMapboxFeature from '../../../src/components/VueMapboxFeature.vue'
import 'mapbox-gl/dist/mapbox-gl.css'
const circlePaint = {
'circle-radius': 5,
'circle-color': '#29434e',
'circle-opacity': 0.5,
'circle-stroke-width': 2,
'circle-stroke-color': '#29434e',
'circle-stroke-opacity': 0.8,
}
const linePaint = {
'line-opacity': 1,
'line-color': '#29434e',
'line-width': 4,
'line-dasharray': [1, 2],
'line-blur': 0,
}
const fillPaint = {
'fill-opacity': 0.2,
'fill-color': '#a00037',
}
const { x, y } = useWindowScroll()
const buffer = computed(() => Math.sin(y.value / 100) * 5)
const scene = reactive({
lng: -73.99397182589848,
lat: 40.687436325313655,
zoom: 9,
pitch: 0,
})
mapboxgl.accessToken =
'pk.eyJ1Ijoic2hvbmdvbG9sbyIsImEiOiJja2lubnc4ZWcxNTI2MzJxajhsa3NxcWtxIn0.gg7J040GTgBNook7aNclMQ'
const mapInstance = ref(null)
onMounted(() => {
mapInstance.value = markRaw(
new mapboxgl.Map({
container: 'map-container',
style: 'mapbox://styles/mapbox/light-v9',
center: [scene.lng, scene.lat],
zoom: scene.zoom,
pitch: scene.pitch,
interactive: false,
})
)
})
const polyGeom = computed(() => {
let c = turf.concave(bikeShelters)
return turf.buffer(c, -buffer.value)
})
const lineGeom = computed(() => {
return turf.polygonToLine(polyGeom.value)
})
</script>
<style lang="postcss" scoped>
#map-container {
@apply my-3 h-[400px] max-h-[400px] min-h-[400px] w-full bg-theme;
}
</style>