蚂蚁路径
TIP
蚂蚁路径示例。
代码如下:
点我查看代码
vue
<template>
<div id="map"></div>
</template>
<script lang="ts" setup>
import L from "leaflet";
import { onMounted, onBeforeUnmount } from "vue";
// @ts-ignore
import { antPath } from "leaflet-ant-path";
import route from "./route";
import { ATTRIBUTIONS } from "../../../constants";
let map: L.Map | null = null;
const initMap = () => {
//地图容器
map = L.map("map", {
//参考坐标系
crs: L.CRS.EPSG3857,
//显示中心
center: [30.5217, 114.3948],
//当前显示等级
zoom: 18,
});
//加载天地图矢量图层
L.tileLayer(
"http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610",
{ noWrap: true, attribution: ATTRIBUTIONS }
).addTo(map);
//加载天地图矢量注记图层
L.tileLayer(
"http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610",
{ noWrap: true, attribution: ATTRIBUTIONS }
).addTo(map);
const path = antPath(route, {
delay: 400,
dashArray: [10, 20],
weight: 5,
color: "#0000FF",
pulseColor: "#FFFFFF",
paused: false,
reverse: false,
hardwareAccelerated: true,
});
map.addLayer(path);
map.fitBounds(path.getBounds());
};
onMounted(() => {
initMap();
});
// 销毁地图
onBeforeUnmount(() => {
if (map) {
map.remove();
map = null;
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
height: 650px;
color: #3a3a3a;
}
</style>