3d建筑物，mapbox大屏酷炫效果_css大屏动画资源-CSDN文库

共8个文件

js：5个

css：2个

html：1个

html

需积分: 1 169 浏览量 2023-03-14 14:20:52 上传评论收藏 1016KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

3d建筑物.zip （8个子文件）

bigscree

my - 副本.js 35KB

echarts.js 3.13MB

echarts.min.js 989KB

my.js 28KB

jquery.min.js 85KB

智慧大屏.html 4KB

css

my.css 2KB

mapbox.css 32KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Animate the camera along a path</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href='css/mapbox.css' rel='stylesheet' /> <link rel="stylesheet" href="css/my.css"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <div id="parent"> <div class="divhead">智慧电商酷炫系统 </div> <div class="divt"> </div> <div class="divall"> </div>  <div class="div7"> </div> <div class="div8"> </div> <div class="div9"> </div> <div class="div10"> </div> <div class="div11"> </div> <div class="div12"> </div> <div id="da1"> </div> </div> <script src="js/echarts.min.js"></script> <script type="text/javascript" src=" js/jquery.min.js"></script> <script src="./js/my.js"></script> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'pk.eyJ1IjoiZ3V2aXZhIiwiYSI6ImNranBzaTNhNjFmaDkyc3Fwdzl0ZTZ4Z3UifQ.n3irOnfErJxXZRTcpnpQ-w'; var height = 100; var map = new mapboxgl.Map({ container: 'da1', style: 'mapbox://styles/mapbox/dark-v9', center: [121.50113734499996, 31.237367840599973], zoom: 15, pitch: 65, bearing: -17.6 }); var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, }); map.on('load', function () { var layers = map.getStyle().layers; var labelLayerId; for (var i = 0; i < layers.length; i++) { if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { labelLayerId = layers[i].id; break; } } map.addLayer({ 'id': '3d-buildings', 'source': 'composite', 'source-layer': 'building', 'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion', 'minzoom': 15, 'paint': { 'fill-extrusion-color': [ 'interpolate', ['linear'], ['get', 'height'], 0, '#845EC2', 75, '#86A8E7', 150, "#5FFBF1", ], 'fill-extrusion-height': ['get', 'height'], 'fill-extrusion-opacity': .6 } }); map.on('mousemove', '3d-buildings', function (e) { map.getCanvas().style.cursor = 'pointer'; var aggregate = Math.round(Math.random()*100+100); var agg_freq = Math.round(Math.random()*100+200); // .mapboxgl-Popup-content popup.setLngLat(e.lngLat) .setHTML('<strong> 总计收件: </strong>' + aggregate + '<p> <strong> 总计送件: </strong>' + agg_freq + '</p>') .addTo(map); }); map.on('mouseleave', '3d-buildings', function () { map.getCanvas().style.cursor = ''; popup.remove(); }); }); </script> </body> </html>

评论收藏

内容反馈