<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>
Type:
Environment:
Description:
hey everyone I hope your doing great
recently i used this library in my project, but i found a critical bug in
delayoption of linessometimes 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: