Leaflet 创建一个运动轨迹

 1.  npm i leaflet.markercluster --save 安装这个插件

2.

const data = [
    [36.69224227956309, 110.92799511728634],
    [36.69224227956309, 111.92799511728634],
] 
const peopleIcon = L.icon({
        iconUrl: popleIcon, // 替换为你自己的标记图标路径 './image/img.png'
        iconSize: [25, 41],  //图片大小
        iconAnchor:[25,70]  //图片位置
 })
 setInterval(() => {
        var marker = L.animatedMarker(data, {
        autoStart: true,
        distance: 100, // 运动轨迹的总距离,单位为像素
        interval: 1000, // 每帧之间的时间间隔,单位为毫秒
        icon: peopleIcon ,
        onEnd: function () {
          //移动结束后移除
          map.removeLayer(this);
        }
      }).addTo(map);
}, 2000)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要基于 Leaflet 创建一个地图,您可以按照以下步骤进行: 1. 在 HTML 中添加 Leaflet 库文件和 CSS 样式文件: ```html <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> ``` 2. 创建一个用于显示地图的 div 元素: ```html <div id="mapid" style="height: 500px;"></div> ``` 3. 在 JavaScript 代码中初始化地图: ```javascript // 创建地图对象并设置中心点和缩放级别 var mymap = L.map('mapid').setView([51.505, -0.09], 13); // 添加地图瓦片图层 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18, }).addTo(mymap); // 添加标记点 L.marker([51.5, -0.09]).addTo(mymap) .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup(); // 添加多边形 var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(mymap); // 添加圆形 var circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(mymap); // 添加折线 var polyline = L.polyline([ [51.5, -0.09], [51.51, -0.1], [51.51, -0.12] ], {color: 'red'}).addTo(mymap); // 支持滚轮缩放 mymap.scrollWheelZoom.enable(); ``` 在上述代码中,我们首先创建了一个地图对象并设置了中心点和缩放级别。然后,我们添加了一个 OpenStreetMap 的瓦片图层,并将其添加到地图上。接着,我们添加了一个标记点、多边形、圆形和折线,并设置了它们的样式和位置。最后,我们打开了滚轮缩放的支持。 当您在浏览器中运行上述代码时,就可以看到一个基于 Leaflet 创建的地图了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值