Leaflet实现动态线路

最新推荐文章于 2024-09-29 22:00:00 发布

weixin_30502965

最新推荐文章于 2024-09-29 22:00:00 发布

阅读量1.2k

点赞数 1

原文链接：http://www.cnblogs.com/tangchun/p/10318800.html

版权

本文详细介绍如何使用Leaflet及LeafletAntPath插件在地图上绘制动态线段。首先，引入必要的脚本和样式文件；其次，初始化地图并设置中心点与缩放级别；最后，通过动态线段插件绘制并展示线段动画，调整参数实现不同视觉效果。

摘要由CSDN通过智能技术生成

一、引用Leaflet脚本样式，和Leaflet Ant Path 插件

下载地址：

Leaflet：https://leafletjs.com/download.html

Leaflet Ant Path：https://github.com/rubenspgcavalcante/leaflet-ant-path

使用Leaflet Ant Path 插件要求Leaflet的版本大于等于1.0

<link href="~/Scripts/leafletjs/1.4.0/leaflet.css" rel="stylesheet" />
<script src="~/Scripts/leafletjs/1.4.0/leaflet.js"></script>
<script src="~/Scripts/leafletjs/1.4.0/leaflet-ant-path.js"></script>

二、地图初始化

 /**
       * 地图初始化
       */
        function mapInit() {
            var amapNormalUrl = '/api/Map/GetMap?type=783085212&zoom={z}&x={x}&y={y}';
            var amapNormalLayer = new L.TileLayer(amapNormalUrl, {
                minZoom: 1,
                maxZoom: 18,
                attribution: ''
            });

            var mapCenter = new L.LatLng(****，****);
            gMap = new L.Map('MapContainer', {
                center: mapCenter,
                zoom: 16,
                minZoom: 1,
                maxZoom: 18,
                layers: [amapNormalLayer]
            });
        }

三、画动态线段

//清楚上一次画的线段
if (gPath) {
                gMap.removeLayer(gPath);
            }
var longLatList =[[****,****],[*****,****]];//经纬度数组
                        var antPath = L.polyline.antPath;
                        gPath = antPath(longLatList, {
                            "paused": false,   　　//暂停  初始化状态
                            "reverse": false,　　//方向反转
                            "delay": 3000,　　　　//延迟，数值越大效果越缓慢
                            "dashArray": [10, 20],　//间隔样式
                            "weight": 3,　　　　//线宽
                            "opacity": 0.5,　　//透明度
                            //"color": "#0000FF",　//颜色
                            //"pulseColor": "#FFFFFF"　　//块颜色
                        });
                        gPath.addTo(gMap); 

                        // 缩放地图到折线所在区域
                        gMap.fitBounds(gPath.getBounds());