Mapbox HTML可视化点，线，多线，面带底图
2024-05-19 19:54:12
Mapbox HTML可视化点，线，多线，面带底图
- 1. 效果图
- 2. 源码
- 参考
1. 效果图
如下所示：可显示蓝色点、红色线、红色多线、浅紫色多边形面；
2. 源码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Add multiple geometries from one GeoJSON source</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/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>
<script>mapboxgl.accessToken = 'pk.eyJ1IjoibGl1bWsiLCJhIjoiY2phY2pyZWp6MGFtMjJ6cGw2YnhqM2F6aCJ9.7ganszcmTQ4q_yRYeLc99g';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [120.06022, 30.37818], //地图中心点zoom: 10});map.on('load', function () {map.addSource('national-park', {'type': 'geojson','data': {'type': 'FeatureCollection','features': [{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[120.198229, 30.29721],[120.198229, 30.279224],[120.18019, 30.27023],[120.162151, 30.279224],[120.162151, 30.29721],[120.18019, 30.306204],[120.198229, 30.29721]]]}},{'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[120.429802, 30.412075],[120.410863, 30.361801],[120.349577, 30.361801],[120.330638, 30.412075],[120.38022, 30.443147],[120.429802, 30.412075]]]}},{'type': 'Feature','geometry': {'type': 'MultiLineString','coordinates': [[[120.14322240845,30.236064370321],[120.1233608862,30.224531990576],[120.0831192649,30.238661839459],[120.07632605996,30.252467111065]],[[120.13018670197,30.238217082645],[120.11140448008,30.242484465583],[120.11367153178,30.249148432492]],[[120.070383, 30.44959],[120.099372, 30.441705],[120.108054, 30.437115], [120.116023, 30.431647],[120.12316, 30.425381],[120.138587, 30.402787],[120.141479, 30.394364], [120.14316, 30.3857],[120.143604, 30.376924], [120.137544, 30.351228],[120.13316, 30.3433], [120.127689, 30.335891],[120.121212, 30.329112], [120.113826, 30.323066],[120.105641, 30.31784], [120.096779, 30.313515],[120.087371, 30.310153], [120.077559, 30.307805],[120.067488, 30.306507], [120.05731, 30.306277],[120.037233, 30.30902], [120.027634, 30.311953],[120.010031, 30.320721], [120.002288, 30.326426], [119.995409, 30.332902], [119.989496, 30.340054],[119.984637, 30.347774], [119.980905, 30.355947], [119.978356, 30.364452], [119.977027, 30.373161],[119.976938, 30.381945], [119.97809, 30.390673], [119.980467, 30.399215], [119.984033, 30.407443],[119.988735, 30.415235], [119.994503, 30.422475], [120.00125, 30.429054], [120.008876, 30.434875],[120.017268, 30.43985], [120.0263, 30.443907],[120.035837, 30.446983], [120.045738, 30.449034]]]}},{'type': 'Feature','geometry': {'type': 'LineString','coordinates': [[120.067304, 30.39167],[120.067304, 30.36469],[120.04022, 30.3512],[120.013136, 30.36469],[120.013136, 30.39167],[120.04022, 30.40516]]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.14018999, 30.26821708888]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.15367153178, 30.280148432492]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.270386, 30.243251]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.089994, 30.243251]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.18022, 30.37818]}},{'type': 'Feature','geometry': {'type': 'Point','coordinates': [120.35022, 30.17818]}}]}});map.addLayer({'id': 'park-boundary','type': 'fill','source': 'national-park','paint': {'fill-color': '#AE00F2','fill-opacity': 0.4},'filter': ['==', '$type', 'Polygon']});map.addLayer({'id': 'route','type': 'line','source': 'national-park','layout': {'line-join': 'round','line-cap': 'round'},'paint': {'line-color': '#DC143C','line-width': 7}});map.addLayer({'id': 'park-volcanoes','type': 'circle','source': 'national-park','paint': {'circle-radius': 6,'circle-color': '#0000FF'},'filter': ['==', '$type', 'Point']});});
</script></body>
</html>
参考
- mapbox官网示例多集合图形展示
Mapbox HTML可视化点，线，多线，面带底图相关推荐
- 爆款入门 | 微生物组-扩增子16S分析和可视化(线上/线下同时开课，2022.4)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.转录组的线上/线下同时开课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 .期待和 ...
- R语言axis函数自定义可视化的坐标轴刻度线（axis ticks）
R语言axis函数自定义可视化的坐标轴刻度线(axis ticks) 目录 R语言axis函数自定义可视化的坐标轴刻度线(axis ticks) # 自定义轴刻度
- 爆款入门 | 第 14 期微生物组-扩增子16S分析和可视化(线上/线下同时开课，2022.4)...
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.转录组的线上/线下同时开课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 .期待和 ...
- 微生物组-扩增子16S分析和可视化(线上/线下同时开课，2021.7)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.转录组的线上/线下同时开课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 .期待和 ...
- 微生物组-扩增子16S分析和可视化(线上/线下同时开课，2022.1)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.转录组的线上/线下同时开课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 .期待和 ...
- 最后一周 | 微生物组-扩增子16S分析和可视化(线上/线下同时开课，2021.7)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.转录组的线上/线下同时开课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 .期待和 ...
- 最后两天-微生物组-宏基因组分析(线上/线下同时开课，2020最后一期)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.Python课程和转录组的线上直播课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 ...
- 最后一周报名微生物组-宏基因组分析(线上/线下同步开课，2020最后一期)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.Python课程和转录组的线上直播课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 ...
- 最后一周 | 微生物组-宏基因组分析(线上/线下同时开课，2021.1)
福利公告:为了响应学员的学习需求,经过易生信培训团队的讨论筹备,现决定安排扩增子16S分析.宏基因组.Python课程和转录组的线上直播课.报名参加线上直播课的老师可在1年内选择参加同课程的一次线下课 ...
最新文章
- 二. 主流视频编码标准的发展
- boost::contract模块实现private protected的测试程序
- XCTF-高手进阶区：Web_php_include
- 无限踩坑系列(6)-mySQL数据库链接错误
- linux|常用的脚本：
- rfid技术及应用答案王佳斌_详解工业数据采集中RFID技术的应用
- 2019年2月25日 Range Sum of BST
- Haproxy+keepalived高可用集群实战
- Excel 公式 lenB无效 解决方案
- markdown编辑器------------编辑方法
- java访问控制关键字_Java 访问控制关键字
- 深入理解JVM虚拟机(5)——JVM虚拟机类加载机制概述
- vim command line操作
- wunderlist_Wunderlist的6种开源替代品
- ElmentUI数据表格 序号
- 恒生电子 java笔试_恒生电子笔试题
- Office Word 目录制作页码右对齐方法
- 离散数学_集合论部分_总结
- 计算机应用情话,情话大全浪漫情话 最美的情话莫过于我也爱你
- JavaScript open()