leaflet-ant-path
leaflet-ant-path copied to clipboard
Bug: strange delay speed for some lines
Type:
- [x] bug
Environment:
- OS: Windows10, Linux
- Browser: firefox(last version), chrome(last version), ...
- Library Version: 1.3.0
Description:
hey everyone I hope your doing great
recently i used this library in my project, but i found a critical bug in delay
option of lines
sometimes some lines will display at a strange and different delay speed after the map and AntPath will loading
I made sure that my code does not have any bug so i wrote this static example for testing
and it does not have any different when the page will refresh or this trigger button will pressed, this bug will happening sometimes anyway
bug:
the vue3 code:
<template>
<div>
<button @click="trigger">{{ display ? 'show' : 'hide' }}</button>
<div v-if="display" id="map" :style="{height: '300px', width: '300px'}"></div>
</div>
</template>
<script setup>
import leaflet from 'leaflet'
import { AntPath } from 'leaflet-ant-path'
import { onMounted, ref, nextTick } from 'vue'
const display = ref(true)
const trigger = () => {
display.value = !display.value
if(display.value) nextTick(() => { init() })
}
const init = () => {
const map = leaflet.map('map', {
minZoom: 3,
maxZoom: 23,
fullscreenControl: true,
drawControl: true
}).setView([35.6996774, 51.3376701], 11);
leaflet.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom:19,
minZoom: 1,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.addLayer(new AntPath([{lat: 35.72488256155388, lng: 51.41975477778468}, {lat: 35.72484256186000, lng: 51.41979000000000}], { delay: 100 }))
map.addLayer(new AntPath([{lat: 35.72484256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41979000000000}], { delay: 10000 }))
map.addLayer(new AntPath([{lat: 35.72494256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41990000000000}], { delay: 100 }))
map.addLayer(new AntPath([{lat: 35.72494256186000, lng: 51.41990000000000}, {lat: 35.72496256186000, lng: 51.41980000000000}], { delay: 10000 }))
map.fitBounds([
{lat: 35.72484256155388, lng: 51.41976477778468}, {lat: 35.72484256186000, lng: 51.41979000000000},
{lat: 35.72494256186000, lng: 51.41979000000000}, {lat: 35.72494256186000, lng: 51.41990000000000}
], { padding: [60, 60] });
}
onMounted(init)
</script>