Leaflet实现动态线路
2024-08-24 19:14:37
一、引用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());
最新文章
- [机器学习] ——KNN K-最邻近算法
- fstream文件操作
- 烂泥:学习ubuntu之快速搭建LNMP环境
- mysql常用命令(1)
- leetcode 160
- js数组的声明与应用
- csv 文件介绍
- .net mvc笔记2_Essential C# Features
- Vijos 1011 清帝之惑之顺治 记忆录式的动态规划(记忆化搜索)
- React Native绑定微信分享/登录/支付(演示+实现步骤+注意事项)
- 设计模式——备忘录模式(C++实现)
- 部署 apply plugin: &#39;realm-android&#39;
- pip 源
- numpy中的随机数模块
- UITableView 自定义多选
- 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-7 混合概率密度
- python进行数据分析
- QT多线程简单例子
- 【Error】centos7 minimal connect: Network is unreachable
- js 数组 转为树形结构
热门文章
- 第一次写html网页
- Event(事件)的传播与冒泡
- asp.net core系列 36 WebAPI 搭建详细示例
- mysql 架构篇系列 4 复制架构一主一从搭建(半同步复制)
- Python爬虫入门教程 3-100 美空网数据爬取
- mongodb~mapreduce的实现特殊逻辑的统计
- Chapter 4 Invitations——26
- 【c#】RabbitMQ学习文档(三)Publish/Subscribe(发布/订阅)
- [二] JavaIO之File详解 以及FileSystem WinNTFileSystem简介
- 浅谈WPF中的MVVM框架--MVVMFoundation