mapbox展示动态图标

mapbox-gl通过为marker设置css动画，实现动态闪烁效果，先放个效果图。

1.主要就是为元素设置一个动画，

myfirst动画让元素随时间放大

 1 .marker {
 2             /* background: url("./image/loc.png"); */
 3             background-position: center center;
 4             width:20px;
 5             height:20px;
 6             display: flex;
 7             display: -webkit-flex;
 8             align-items: center;
 9             justify-content: center;
10         }
11         .marker p{
12             background-color: rgba(250, 0, 0, 0.2);
13             width: 10px;
14             height: 10px;
15             border-radius:50%;
16             animation: myfirst 1.5s infinite;
17             box-shadow: 0px 0px 2px #f00;
18         }
19         @keyframes myfirst{
20             10% {transform: scale(1.2);}
21             20% {transform: scale(2);}
22             40% {transform: scale(3);}
23             60% {transform: scale(4);}
24             80% {transform: scale(6);}
25             100% {transform: scale(8);}
26         }

2.创建一个marker，其元素应用上述样式即可

完整代码如下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset='utf-8' />
  5     <title>Add custom icons with Markers</title>
  6     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  7     <script src="style/MapStyle.js"></script>
  8     <script src="style/dynamic-traffic-info.js"></script>
  9     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
 10     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
 11     <style>
 12         body { margin:0; padding:0; }
 13         #map { position:absolute; top:0; bottom:0; width:100%; }
 14         *{
 15             margin: 0;
 16             padding: 0;
 17         }
 18         .dd{
 19             height: 50px;
 20             background-color: #aaa;
 21         }
 22         .marker {
 23             /* background: url("./image/loc.png"); */
 24             background-position: center center;
 25             width:20px;
 26             height:20px;
 27             display: flex;
 28             display: -webkit-flex;
 29             align-items: center;
 30             justify-content: center;
 31         }
 32         .marker p{
 33             background-color: rgba(250, 0, 0, 0.2);
 34             width: 10px;
 35             height: 10px;
 36             border-radius:50%;
 37             animation: myfirst 1.5s infinite;
 38             box-shadow: 0px 0px 2px #f00;
 39         }
 40         @keyframes myfirst{
 41             10% {transform: scale(1.2);}
 42             20% {transform: scale(2);}
 43             40% {transform: scale(3);}
 44             60% {transform: scale(4);}
 45             80% {transform: scale(6);}
 46             100% {transform: scale(8);}
 47         }
 48     </style>
 49 </head>
 50 <body>
 51 <div id='map'></div>
 52 <script>
 53 mapboxgl.accessToken = 'pk.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ';
 54 var map = new mapboxgl.Map({
 55     container: 'map',
 56     // // style: getTrafficStyle(),
 57     // style: 'mapbox://styles/mapbox/navigation-preview-day-v2',
 58     style: 'mapbox://styles/mapbox/light-v10',
 59     center: [116.270169, 40.087127],
 60     zoom: 4
 61 });
 62 map.on('click', function(event){
 63     let lng = event.lngLat.lng.toFixed(6)
 64     let lat = event.lngLat.lat.toFixed(6)
 65     let zoom = map.getZoom()
 66     console.log('Clicked at : ' + lng + ', ' + lat + '. Zoom: ' + zoom)
 67   // var style = map.getStyle();
 68   //   console.info(JSON.stringify(style));
 69 });
 70 
 71 var geojson = {
 72   "type": "FeatureCollection",
 73   "features": [
 74     {
 75       "type": "Feature",
 76       "geometry": {
 77         "type": "Point",
 78         "coordinates": [
 79           120.1904296875,
 80           30.391830328088137
 81         ]
 82       }
 83     },
 84     {
 85       "type": "Feature",
 86       "geometry": {
 87         "type": "Point",
 88         "coordinates": [
 89           121.44287109374999,
 90           31.16580958786196
 91         ]
 92       }
 93     },
 94     {
 95       "type": "Feature",
 96       "geometry": {
 97         "type": "Point",
 98         "coordinates": [
 99           118.828125,
100           32.18491105051798
101         ]
102       }
103     },
104     {
105       "type": "Feature",
106       "geometry": {
107         "type": "Point",
108         "coordinates": [
109           117.11975097656249,
110           31.812229022640704
111         ]
112       }
113     },
114     {
115       "type": "Feature",
116       "geometry": {
117         "type": "Point",
118         "coordinates": [
119           116.45507812500001,
120           40.07807142745009
121         ]
122       }
123     },
124     {
125       "type": "Feature",
126       "geometry": {
127         "type": "Point",
128         "coordinates": [
129           113.35693359375,
130           23.160563309048314
131         ]
132       }
133     }
134   ]
135 };
136 
137 geojson.features.forEach(function(marker) {
138     var el = document.createElement('div');
139     el.className = 'marker';
140 
141     var el1 = document.createElement('p');
142     el.appendChild(el1);
143     var el2 = document.createElement('span');
144     el1.appendChild(el2);
145 
146     new mapboxgl.Marker(el)
147         .setLngLat(marker.geometry.coordinates)
148         .addTo(map);
149 });
150 </script>
151 
152 </body>
153 </html>

View Code

mapbox展示动态图标

猜你喜欢