[Mapbox GL]改变地图风格
2016-12-19 17:12
996 查看
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <style> #menu { position: absolute; background: #fff; padding: 10px; font-family: 'Open Sans', sans-serif; } </style> <div id='map'></div> <div id='menu'> <input id='basic' type='radio' name='rtoggle' value='basic' checked='checked'> <label for='basic'>basic</label> <input id='streets' type='radio' name='rtoggle' value='streets'> <label for='streets'>streets</label> <input id='bright' type='radio' name='rtoggle' value='bright'> <label for='bright'>bright</label> <input id='light' type='radio' name='rtoggle' value='light'> <label for='light'>light</label> <input id='dark' type='radio' name='rtoggle' value='dark'> <label for='dark'>dark</label> <input id='satellite' type='radio' name='rtoggle' value='satellite'> <label for='satellite'>satellite</label> </div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/basic-v9', zoom: 13, center: [4.899, 52.372] }); var layerList = document.getElementById('menu'); //获取menu元素 var inputs = layerList.getElementsByTagName('input'); //获取menu元素中input标签数组 function switchLayer(layer) { var layerId = layer.target.id; map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9'); //setStyle()函数设置地图风格 } for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; //设置input标签的onclick回调函数 } </script> </body> </html>
原文:https://www.mapbox.com/mapbox-gl-js/example/setstyle/
相关文章推荐
- [Mapbox GL]改变地图语言
- [Mapbox GL]点击标志改变地图视图中心
- 从Qt5的改变看最佳头文件包含风格?QT5找不到#include<QApplication>头文件在哪里
- XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子
- 改变窗体风格
- VS 2008 显示代码行数/改变程序格式风格
- CComboBox改变风格
- supermap 学习系列(三)——在地图上绘制线段(鼠标放在上面时改变其颜色)
- 改变风格(css)的四种方法
- [转]VC动态改变CComboBox风格
- Java编程风格的改变
- 微信小程序<map>改变地图缩放级别
- 换肤功能的实现(实时改变ext、页面的风格样式)
- 全面改变windows风格
- XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子
- openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置
- [Mapbox GL]限制地图可以拖拽到的区域
- 改变 PropertyGrid 控件的编辑风格(1)——加入日期控件-.NET教程,组件控件开发
- Android高德地图的自定义底图(午夜蓝主题风格地图)
- 如何改变字体风格