mapbox制作动态地图——storytelling（附html代码）

相信大家不管是在日常工作，还是制作自己的博客，都希望有炫酷且能准确get到使用者的页面，大家可以参考以下代码：

config.js：

var config = {style: 'mapbox://styles/branigan/cjzsvonse027m1co4nkxp13b3',accessToken: 'pk.eyJ1IjoibWJ4c29sdXRpb25zIiwiYSI6ImNrMm01aG9hdTBlZGwzbXQ1ZXVrNHNmejAifQ.QHQA0N6XPWddCXtvoODHZg',showMarkers: false,theme: 'light',title: '',subtitle: '',byline: '',footer: '',chapters: [{id: 'phl',alignment: 'right',title: 'Philadelphia Bicycle Infrastructure',image: '',description: 'Getting around Philadelphia on two wheels is fast, fun, and cheap. As a typical East Coast large city, the urban core is dense, so there is a lot within reach of a 15 minute ride... even mountain bike trails. Paired with the public transit infrastructure, cycling can be more efficient and much less expensive than driving (and parking) a car.',location: {center: [-75.13080, 39.97790],zoom: 9.83,pitch: 0.00,bearing: 0.00},onChapterEnter: [{layer: 'phl-city-limits',opacity: .45}],onChapterExit: [{layer: 'phl-city-limits',opacity: 0}]},{id: 'bike-lanes',alignment: 'right',title: 'Bike Lanes',image: '',description: 'Philadelphia has XX miles of bike lanes, XX miles of which are protected. Drivers are getting more used to sharing the road, but ride defensively.',location: {center: [-75.13901, 39.97085],zoom: 11.62,pitch: 55.50,bearing: -7.20},onChapterEnter: [{layer: 'phl-bike-network',opacity: 1}],onChapterExit: []},{id: 'indego',alignment: 'right',title: 'Indego Bike Share',image: '',description: 'Indego has been operating in Philadelphia since 20XX. The system initally was focused on Center City, but has expanded service to neighboring areas to support equitable mobility options to the city\'s residents.',location: {center: [-75.16468, 39.94503],zoom: 13.15,pitch: 60.00,bearing: -16.80},onChapterEnter: [{layer: 'indego-stations',opacity: 0.8}],onChapterExit: [{layer: 'indego-stations',opacity: 0}]},{id: 'belmont',alignment: 'right',title: 'Belmont Plateau Trails',image: '',description: 'A short ride along the Schuylkill River Trail from the Art Museum, Belmont is a twisty, log-ridden rollercoaster of a trail network. It is easy to get turned around, the underbrush is at times impenetrable, and short steep sections come out of nowhere. In other words, it\'s really fun',location: {center: [-75.20325, 39.99574],zoom: 14.99,pitch: 44.00,bearing: -40.00},onChapterEnter: [{layer: 'belmont',opacity: 1}],onChapterExit: [{layer: 'belmont',opacity: 0}]},{id: 'wiss',alignment: 'right',title: 'Wissahickon Park Trails',image: '',description: 'This steep, rocky gorge can be surprisingly technical. Follow the orange and yellow trails to repeatedly climb and descend through the schist hillsides (careful of the cliffs), or stick to the gravel Forbidden Drive for a relaxing ride along the creek. You\'ll forget you\'re in a city.',location: {center: [-75.21223, 40.05028],zoom: 13.08,pitch: 47.50,bearing: 32.80},onChapterEnter: [{layer: 'wissahickon',opacity: 1}],onChapterExit: [{layer: 'wissahickon',opacity: 0}]},{id: 'pennypack',alignment: 'right',title: 'Pennypack Park Trails',image: '',description: 'Pennypack is a great introduction trail system. Not too steep and not too technical, the beautiful wooded park also provides a great escape from urban life. The south side trails are originally bridle trails, so be nice to equestrians and dismount when you approach them.',location: {center: [-75.05685, 40.06839],zoom: 13.73,pitch: 43.50,bearing: 96.80},onChapterEnter: [{layer: 'pennypack',opacity: 1}],onChapterExit: [{layer: 'pennypack',opacity: 0}]}]
};

index.html

<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title>Mapbox Storytelling</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' /><script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script><script src="https://unpkg.com/scrollama"></script><style>body {margin:0;padding:0;font-family: sans-serif;}a, a:hover, a:visited {color: #0071bc;}#map {top:0;height: 100vh;width:100vw;position: fixed;}#header {margin: auto;width: 100%;position: relative;z-index: 5;}#header h1, #header h2, #header p {margin: 0;padding: 2vh 2vw;text-align: center;}#footer {width: 100%;min-height: 5vh;padding-top: 2vh;padding-bottom: 2vh;text-align: center;line-height: 25px;font-size: 13px;position: relative;z-index: 5;}#features {padding-top: 10vh;padding-bottom: 10vh;}.hidden {visibility: hidden;}.centered {width: 50vw;margin: 0 auto;}.lefty {width: 33vw;margin-left: 5vw;}.righty {width: 33vw;margin-left: 62vw;}.fully {width: 100%;margin: auto;}.light {color: #444;background-color: #fafafa;}.dark {color: #fafafa;background-color: #444;}.step {padding-bottom: 50vh;/* margin-bottom: 10vh; */opacity: 0.25;}.step.active {opacity: 0.9;}.step div {padding:  25px 50px;line-height: 25px;font-size: 13px;}.step img {width: 100%;}@media (max-width: 750px) {.centered, .lefty, .righty, .fully {width: 90vw;margin: 0 auto;}}/* Fix issue on mobile browser where scroll breaks  */.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {touch-action: unset;}</style>
</head>
<body><div id="map"></div>
<div id="story"></div>
<script src="./config.js"></script>
<script>
var layerTypes = {'fill': ['fill-opacity'],'line': ['line-opacity'],'circle': ['circle-opacity', 'circle-stroke-opacity'],'symbol': ['icon-opacity', 'text-opacity'],'raster': ['raster-opacity'],'fill-extrusion': ['fill-extrusion-opacity'],'heatmap': ['heatmap-opacity']
}var alignments = {'left': 'lefty','center': 'centered','right': 'righty','full': 'fully'
}function getLayerPaintType(layer) {var layerType = map.getLayer(layer).type;return layerTypes[layerType];
}function setLayerOpacity(layer) {var paintProps = getLayerPaintType(layer.layer);paintProps.forEach(function(prop) {var options = {};if (layer.duration) {var transitionProp = prop + "-transition";options = { "duration": layer.duration };map.setPaintProperty(layer.layer, transitionProp, options);}map.setPaintProperty(layer.layer, prop, layer.opacity, options);});
}var story = document.getElementById('story');
var features = document.createElement('div');
features.setAttribute('id', 'features');var header = document.createElement('div');if (config.title) {var titleText = document.createElement('h1');titleText.innerText = config.title;header.appendChild(titleText);
}if (config.subtitle) {var subtitleText = document.createElement('h2');subtitleText.innerText = config.subtitle;header.appendChild(subtitleText);
}if (config.byline) {var bylineText = document.createElement('p');bylineText.innerText = config.byline;header.appendChild(bylineText);
}if (header.innerText.length > 0) {header.classList.add(config.theme);header.setAttribute('id', 'header');story.appendChild(header);
}config.chapters.forEach((record, idx) => {var container = document.createElement('div');var chapter = document.createElement('div');if (record.title) {var title = document.createElement('h3');title.innerText = record.title;chapter.appendChild(title);}if (record.image) {var image = new Image();image.src = record.image;chapter.appendChild(image);}if (record.description) {var story = document.createElement('p');story.innerHTML = record.description;chapter.appendChild(story);}container.setAttribute('id', record.id);container.classList.add('step');if (idx === 0) {container.classList.add('active');}chapter.classList.add(config.theme);container.appendChild(chapter);container.classList.add(alignments[record.alignment] || 'centered');if (record.hidden) {container.classList.add('hidden');}features.appendChild(container);
});story.appendChild(features);var footer = document.createElement('div');if (config.footer) {var footerText = document.createElement('p');footerText.innerHTML = config.footer;footer.appendChild(footerText);
}if (footer.innerText.length > 0) {footer.classList.add(config.theme);footer.setAttribute('id', 'footer');story.appendChild(footer);
}mapboxgl.accessToken = config.accessToken;const transformRequest = (url) => {const hasQuery = url.indexOf("?") !== -1;const suffix = hasQuery ? "&pluginName=scrollytellingV2" : "?pluginName=scrollytellingV2";return {url: url + suffix}
}var map = new mapboxgl.Map({container: 'map',style: config.style,center: config.chapters[0].location.center,zoom: config.chapters[0].location.zoom,bearing: config.chapters[0].location.bearing,pitch: config.chapters[0].location.pitch,interactive: false,transformRequest: transformRequest
});if (config.showMarkers) {var marker = new mapboxgl.Marker({ color: config.markerColor });marker.setLngLat(config.chapters[0].location.center).addTo(map);
}// instantiate the scrollama
var scroller = scrollama();map.on("load", function() {if (config.use3dTerrain) {map.addSource('mapbox-dem', {'type': 'raster-dem','url': 'mapbox://mapbox.mapbox-terrain-dem-v1','tileSize': 512,'maxzoom': 14});// add the DEM source as a terrain layer with exaggerated heightmap.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });// add a sky layer that will show when the map is highly pitchedmap.addLayer({'id': 'sky','type': 'sky','paint': {'sky-type': 'atmosphere','sky-atmosphere-sun': [0.0, 0.0],'sky-atmosphere-sun-intensity': 15}});};// setup the instance, pass callback functionsscroller.setup({step: '.step',offset: 0.5,progress: true}).onStepEnter(response => {var chapter = config.chapters.find(chap => chap.id === response.element.id);response.element.classList.add('active');map[chapter.mapAnimation || 'flyTo'](chapter.location);if (config.showMarkers) {marker.setLngLat(chapter.location.center);}if (chapter.onChapterEnter.length > 0) {chapter.onChapterEnter.forEach(setLayerOpacity);}if (chapter.callback) {window[chapter.callback]();}if (chapter.rotateAnimation) {map.once('moveend', function() {const rotateNumber = map.getBearing();map.rotateTo(rotateNumber + 90, {duration: 24000, easing: function (t) {return t;}});});}}).onStepExit(response => {var chapter = config.chapters.find(chap => chap.id === response.element.id);response.element.classList.remove('active');if (chapter.onChapterExit.length > 0) {chapter.onChapterExit.forEach(setLayerOpacity);}});
});// setup resize event
window.addEventListener('resize', scroller.resize);</script></body>
</html>

效果如图：

mapbox制作动态地图——storytelling（附html代码）相关推荐

Python 使用Tkinter制作签名（附完整代码）
思路: 先选择在线签名网站,找到接口模拟请求,然后将生成的签名图片显示在 Tkinter 生成的 GUI 窗口上,最后保存生成的签名图片选择网址为:http://www.uustv.com/ 首先了 ...
python代码手机壁纸_Python制作微信好友背景墙教程（附完整代码）
引言前段时间,微信朋友圈开始出现了一种晒照片新形式,微信好友墙,即在一张大图片中展示出自己的所有微信好友的头像. 效果如下图,出于隐私考虑,这里作了模糊处理. 是不是很炫,而且这还是独一无二的,毕竟 ...
HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
myday6-day07 网页的制作实战(附自己的代码)(仿一个网站的网页) 网页效果图自己的代码实现: <!DOCTYPE html> <html lang="en&q ...
玩转树莓派---详解树莓派的系统烧录，基础使用及基于树莓派制作手势控制的小车(附详细代码及演示效果)
目录一.写在前面二.系统实现: Author:qyan.li Date:2022.6.10 Topic:详解树莓派的使用及基于树莓派制作手势控制的小车 Reference:如何给树莓派安装操作系统 ...
Python：制作一个模拟扔硬币的程序（附完整代码）
Python:制作一个模拟扔硬币的程序(附完整代码) 在这个项目中,我们将编写一个Python程序来模拟扔硬币的方式.我们会使用Python内置的随机模块,实现随机出现正面或反面的效果. 首先,我们需 ...
mapbox 修改初始位置_一行代码教你如何随心所欲初始化Bert参数(附Pytorch代码详细解读)...
微信公众号:NLP从入门到放弃微信文章在这里(排版更漂亮,但是内置链接不太行,看大家喜欢哪个点哪个看吧): 一行代码带你随心所欲重新初始化bert的参数(附Pytorch代码详细解读)mp.wei ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...
python随机森林变量重要性_推荐：一文读懂随机森林的解释和实现（附python代码）...
原标题:推荐 :一文读懂随机森林的解释和实现(附python代码) 作者:WilliamKoehrsen:翻译:和中华:校对:李润嘉本文约6000字,建议阅读15分钟. 本文从单棵决策树讲起,然后逐 ...
水塔水位测量c语言程序,基于51单片机水塔水箱水位检测系统控制器设计(附程序代码)...
基于51单片机水塔水箱水位检测系统控制器设计(附程序代码)(任务书,开题报告,外文翻译,论文18000字) 摘要为了能实现水位监测与控制,以STC89C52作为核心控制芯片,进行了水位检测系统控 ...

mapbox制作动态地图——storytelling（附html代码）

mapbox制作动态地图——storytelling（附html代码）相关推荐

最新文章

热门文章