引用插件
Leaflet.Polyline.SnakeAnim
npm i leaflet.polyline.snakeanim
vue中使用
//latlngs为坐标数组[[34.268043518066406, 90.56607055664062]。。。。。]
var line = L.polyline(latlngs, {snakingSpeed: 200});
line.addTo(map).snakeIn();
var route = L.layerGroup([
L.marker(airport1),
L.polyline([airport1, airport2]),
L.marker(airport2)
], { snakingPause: 200 });
route.addTo(map).snakeIn();
html代码示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水流模拟</title>
<!--leaflet原生样式-->
<link href="../../libs/leaflet/leaflet.css" rel="stylesheet" />
<!--引入当前页面样式表-->
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<!--引入leaflet脚本库-->
<script src="../../libs/leaflet/leaflet.js" type="text/javascript"></script>
<!--引入水流模拟插件库-->
<script src="../../libs/leaflet/plugins/leaflet-Polyline-SnakeAnim/L.Polyline.SnakeAnim.js" type="text/javascript"></script>
<!--引入水流模拟的路径数据-->
<script src="../../libs/leaflet/plugins/leaflet-Polyline-SnakeAnim/lujing.js" type="text/javascript"></script>
<style type="text/css">
body {
height: 700px;
}
</style>
<script type="text/javascript">
//使用严格模式
"use strict";
//水流路径
var path;
//地图对象
var map;
/**显示地图
*/
function init() {
//地图容器
map = L.map('leaf_map', {
//参考坐标系
crs: L.CRS.EPSG3857,
//显示中心
center: [30.53, 114.3],
//最小显示等级
minZoom: 1,
//最大显示等级
maxZoom: 15,
//当前显示等级
zoom: 6
});
//加载天地图矢量图层
var vecLayer = L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610", { noWrap: true }).addTo(map);
//加载天地图矢量注记图层
var cvaLayer = L.tileLayer("http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=55b4d4eaef95384c946e9bd1b99c5610", { noWrap: true }).addTo(map);
//线坐标数组 [[34.268043518066406, 90.56607055664062]。。。。。]
var latlngs = new Array();
//获取线数据
console.log(route);
for (var i = 0, len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
console.log(latlngs);
//创建线图层
path = L.polyline(latlngs, { snakingSpeed: 30 });
//在起点处添加一个标注
map.addLayer(L.marker(latlngs[0]));
//在终点处添加一个标注
map.addLayer(L.marker(latlngs[len - 1]));
}
/**开启水流模拟
*/
function startSnake() {
//将线图层添加至地图中
map.addLayer(path);
//启动模拟
path.snakeIn();
}
</script>
</head>
<body onload="init()">
<div class="ToolLib">
<input type="button" class="ButtonLib" value="开启水流模拟" onclick="startSnake()" />
</div>
<div id="leaf_map" style="width:100%;height:95%;background-color:#666;">
</div>
</body>
</html>
vue环境下注意 以下中心模式才生效
this.map = this.$utils.map.createMap("map-container", {
//参考坐标系
crs: L.CRS.EPSG3857,
//显示中心
center: [30.82993, 120.92559],
//不允许地图拖拽
dragging: false,
//最小显示等级
minZoom: 1,
//最大显示等级
maxZoom: 18,
//当前显示等级
zoom: 18
});
