45.（leaflet篇）leaflet图标跳动.zip_leafletzindexoffset资源-CSDN文库

共15个文件

png：8个

js：5个

html：1个

版权申诉

leaflet

5星 · 超过95%的资源 174 浏览量 2021-10-13 09:58:40 上传评论 1 收藏 382KB ZIP 举报

在本教程中，我们将深入探讨Leaflet库中的图标跳动效果。Leaflet是一个轻量级的JavaScript库，专为创建交互式地图而设计。通过它，开发者可以轻松地在网页上构建功能丰富的地图应用。"45.（leaflet篇）leaflet图标跳动.zip"这个压缩包文件提供了一个关于如何实现Leaflet图标动态效果的例子。了解Leaflet的基础知识是必要的。Leaflet具有强大的API，允许用户自定义地图的各种元素，包括地图层、标记、图层组、弹出窗口等。其中，Marker是用于表示地图上特定位置的图标，可以用来展示兴趣点或者定位。要实现图标跳动的效果，我们需要使用Leaflet的动画功能。Leaflet本身不直接支持图标动画，但我们可以利用JavaScript的setTimeout或setInterval函数以及CSS3的transform属性来实现这一效果。下面是一些关键步骤： 1. **引入Leaflet库**：确保在HTML文件中正确引入Leaflet的CDN链接，例如： ```html <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> ``` 2. **创建地图**：使用L.map()初始化地图，并设置视口坐标，如： ```javascript var map = L.map('mapid').setView([51.505, -0.09], 13); ``` 这里'mapid'是地图容器的ID，经纬度用于设定初始中心位置，13是缩放级别。 3. **添加地图瓦片**：为了显示地图背景，我们需要一个地图服务。这里使用默认的OpenStreetMap服务： ```javascript L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); ``` 4. **创建Marker并添加动画**：创建一个Marker对象，然后使用JavaScript定时器改变其CSS样式来实现跳动效果： ```javascript var marker = L.marker([51.5, -0.09]).addTo(map); function bounce() { marker.setZIndexOffset(1000); marker.setIcon(L.divIcon({ className: 'bounce', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], html: '<div class="fa fa-map-marker"></div>' })); setTimeout(function () { marker.setZIndexOffset(0); marker.setIcon(L.divIcon({ className: '', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], html: '<div class="fa fa-map-marker"></div>' })); }, 1000); } setInterval(bounce, 2000); ``` 在这里，我们创建了一个Marker，并在`bounce`函数中通过CSS3的`transform: translateY`实现向上移动，然后在延时后恢复到原位，形成跳动效果。`setInterval`用于每隔一定时间调用`bounce`函数，使图标持续跳动。 5. **自定义图标**：你可以使用自定义的SVG图标或者Font Awesome等图标库，只需要在`L.divIcon`中指定相应的HTML代码。 6. **优化性能**：请注意，频繁的DOM操作可能会影响性能。如果跳动效果对大量Marker同时进行，可以考虑使用Web Workers或者减少动画频率来优化。博客文章"https://blog.csdn.net/QQ98281642/article/details/120737981"提供了更多关于这个主题的详细解释和实际示例，包括如何下载和解压压缩包，以及如何将这些代码应用到自己的项目中。通过实践这些步骤，你将能够创建一个引人注目的Leaflet地图，其中的图标会生动地跳动，增强用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

45.（leaflet篇）leaflet图标跳动.zip （15个子文件）

map

images

marker-icon.png 4KB

poi.png 3KB

people.png 175KB

45.（leaflet篇）leaflet图标跳动.html 3KB

lib

proj4

proj4.js 72KB

proj4leaflet.js 7KB

proj4-compressed.js 72KB

leaflet

images

marker-icon-2x.png 4KB

marker-icon.png 2KB

layers.png 1KB

layers-2x.png 3KB

marker-shadow.png 797B

leaflet.js 136KB

leaflet-src.js 388KB

leaflet.css 13KB

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  <link rel="stylesheet" href="lib/leaflet/leaflet.css" /> <style> body { margin:0; padding:0; } #map { position: absolute; top:0; bottom:0; right:0; left:0; } /* .jump li img{ animation: jump 3s ease infinite; } @keyframes jump{ 0%{ transform:translateY(0) scale(1,1);} 50%{transform:translateY(-50px) scale(0.97,1.03);} 100%{transform:translateY(0) scale(1,1);} } */ /**/ .jumpimg{ animation: jump 3s ease infinite; } @keyframes jump{ 0%{ transform:translateY(0) scale(1,1);} 50%{transform:translateY(-20px) scale(0.97,1.03);} 100%{transform:translateY(0) scale(1,1);} } </style> <script src="lib/leaflet/leaflet-src.js"></script> <script src="lib/proj4/proj4.js"></script> <script src="lib/proj4/proj4leaflet.js"></script> </head> <body> <div id="map"></div> <input type="button" value="图标跳动" onclick="addDivTest()" style="cursor:pointer;position:absolute;left:100px;top:50px;z-index:9999;background:blue;color:white;border:none;font-size:24px"> <script> //L.CRS.EPSG4326 var map = L.map('map'); //高德、google图层，地图服务地址可替换成爬取离线部署的地图服务，如：http://106.53.28.207/baidu_sl/{z}/{x}/{y}.png //高德URL：http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z} //openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png //googleURL:xxxxxx //以上地址如果不能访问到新版地图URL，可通过访问新版地图，通过F12-->network获取 //openstreetmap：https://tile.openstreetmap.org/{z}/{x}/{y}.png //openstreetmap二版：https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png new L.TileLayer('https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png', { maxZoom: 20, minZoom: 1, attribution: 'ⓒ 2012 Daum' }).addTo(map); var center_point=[24.522422570142833,118.11471659369913]; map.setView(center_point, 12); /** * 地图叠加自定义div内容 * */ var points=[ {lat:24.492422570142833,lng:118.10471659369913}, {lat:24.522422570142833,lng:118.11471659369913}, ] function addDivTest() { var html=""; html+='<img class="jumpimg" src="images/marker-icon.png" width="42px" height="42px" alt="">' html+='' var divIcon = L.divIcon({html:html,iconAnchor:[21, 42]}); for(var i=0;i<points.length;i++){ var myDivLayer = L.marker([points[i].lat, points[i].lng], {icon: divIcon}); myDivLayer.addTo(map); } } </script> </body> </html>

评论收藏

内容反馈

版权申诉