kopia lustrzana https://github.com/paraboul/mapchecking
Debounce hash update using vueuse
rodzic
5362f69884
commit
4d7ccbb288
|
@ -9,6 +9,7 @@
|
|||
"@googlemaps/js-api-loader": "^1.4.0",
|
||||
"@types/google.maps": "^3.48.3",
|
||||
"@vitejs/plugin-vue": "^2.2.4",
|
||||
"@vueuse/core": "^8.2.0",
|
||||
"js-base64": "^3.5.2",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"tatween": "^0.2.0",
|
||||
|
|
|
@ -5,12 +5,14 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Loader as MapLoader } from '@googlemaps/js-api-loader';
|
||||
import { Base64 } from 'js-base64'
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { watchDebounced } from '@vueuse/core'
|
||||
|
||||
|
||||
const DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18]
|
||||
|
||||
const loader = new MapLoader({
|
||||
apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
|
||||
|
@ -29,7 +31,7 @@
|
|||
(event: "hashChange", val: string): void
|
||||
}>()
|
||||
|
||||
const mapPosition = ref([48.862895, 2.286978, 18])
|
||||
const mapPosition = ref(DEFAULT_MAP_POSITION)
|
||||
const arrPoly = ref<google.maps.LatLng[]>([])
|
||||
const mapLoaded = ref(false);
|
||||
const pacinput = ref()
|
||||
|
@ -87,7 +89,6 @@
|
|||
streetViewControl: false
|
||||
});
|
||||
|
||||
|
||||
const poly = new google.maps.Polygon({
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 2,
|
||||
|
@ -176,7 +177,7 @@
|
|||
currentMap.setCenter({lat: meta[1], lng: meta[2]});
|
||||
currentMap.setZoom(meta[3]);
|
||||
|
||||
let path = [];
|
||||
const path = [];
|
||||
for (let i = 0; i < data.length; i += 2) {
|
||||
path.push({
|
||||
lat: data[i],
|
||||
|
@ -193,22 +194,20 @@
|
|||
}
|
||||
|
||||
const loadLegacyHash = (hash: string) => {
|
||||
let opt = hash.split(';');
|
||||
|
||||
let curPosition = opt.pop();
|
||||
const opt = hash.split(';');
|
||||
const curPosition = opt.pop();
|
||||
|
||||
if (curPosition) {
|
||||
let cursetting = curPosition.split(',');
|
||||
const cursetting = curPosition.split(',');
|
||||
currentMap.setCenter({lat: parseFloat(cursetting[0]), lng: parseFloat(cursetting[1])});
|
||||
currentMap.setZoom(parseInt(cursetting[2]));
|
||||
}
|
||||
|
||||
let density = parseFloat(opt.pop()) || 1;
|
||||
|
||||
let path = [];
|
||||
const density = parseFloat(opt.pop()) || 1;
|
||||
const path = [];
|
||||
|
||||
for (let i = 0; i < opt.length; i++) {
|
||||
let coord = opt[i].split(',');
|
||||
const coord = opt[i].split(',');
|
||||
path.push({
|
||||
lat: parseFloat(coord[0]),
|
||||
lng: parseFloat(coord[1])
|
||||
|
@ -227,11 +226,8 @@
|
|||
currentPolygon.getPath().clear();
|
||||
}
|
||||
|
||||
|
||||
watch(() => props.density, () => updatePolygonColor());
|
||||
|
||||
const hash = computed(() => {
|
||||
let buf = new Float32Array(arrPoly.value.length*2+4);
|
||||
const buf = new Float32Array(arrPoly.value.length*2+4);
|
||||
buf[0] = props.density;
|
||||
buf.set(mapPosition.value, 1);
|
||||
|
||||
|
@ -242,15 +238,11 @@
|
|||
return 'b' + Base64.fromUint8Array(new Uint8Array(buf.buffer), true);
|
||||
})
|
||||
|
||||
watch(hash, (hashval: string) => {
|
||||
if ($updateHashTimer) {
|
||||
clearTimeout($updateHashTimer);
|
||||
}
|
||||
watch(() => props.density, () => updatePolygonColor());
|
||||
|
||||
$updateHashTimer = setTimeout(() => {
|
||||
emits('hashChange', hashval);
|
||||
}, 300);
|
||||
})
|
||||
watchDebounced(hash,
|
||||
(hashval: string) => emits('hashChange', hashval),
|
||||
{ debounce: 300 })
|
||||
|
||||
defineExpose({
|
||||
reset,
|
||||
|
|
26
yarn.lock
26
yarn.lock
|
@ -161,6 +161,27 @@
|
|||
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
|
||||
integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
|
||||
|
||||
"@vueuse/core@^8.2.0":
|
||||
version "8.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.2.0.tgz#2e9163c0bbe8dcb240fdd89d9c8a52576fce8db7"
|
||||
integrity sha512-89ZfKtFHz5ynfpWyFVXtK0yePJ2MZqFaOxnGeZn7cIp8KFbPRlu6Wsxi3gBkJNpjq+q9qbEh6MjV7QBvqCQ5Og==
|
||||
dependencies:
|
||||
"@vueuse/metadata" "8.2.0"
|
||||
"@vueuse/shared" "8.2.0"
|
||||
vue-demi "*"
|
||||
|
||||
"@vueuse/metadata@8.2.0":
|
||||
version "8.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.0.tgz#f62a02e840220768941b3683dd8171c39581b950"
|
||||
integrity sha512-cbaezEccNuxQC+OiudG9VjZNg9/RbAAHkyuhC6+8Gsgsc+MvDhfn1NrV6NNTaldLlZgJFgUiYOkrf3JGTTTGXQ==
|
||||
|
||||
"@vueuse/shared@8.2.0":
|
||||
version "8.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.2.0.tgz#a8e2b637cfd866ea985615df9ec4913c4355c084"
|
||||
integrity sha512-dTw7EJZgZCgG9DoVAiz4LtmKnIFXuE/idUFzvqRAJLjbPiVJc+qQH5kDUdKHI3W1U9t//1mdasQEKONArburiQ==
|
||||
dependencies:
|
||||
vue-demi "*"
|
||||
|
||||
acorn-node@^1.6.1:
|
||||
version "1.8.2"
|
||||
resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
|
||||
|
@ -1103,6 +1124,11 @@ vite@^2.4.0:
|
|||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
vue-demi@*:
|
||||
version "0.12.4"
|
||||
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"
|
||||
integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
|
||||
|
||||
vue@^3.0.0-rc.1:
|
||||
version "3.2.31"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"
|
||||
|
|
Ładowanie…
Reference in New Issue