mapbox添加等值面
官网的例子是直接给的颜色，我的颜色在geojson数据里，通过读取geojson的properties获取颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Add a GeoJSON polygon</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = '输入在mapbox注册账号获取的token'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-68.13734351262877, 45.137451890638886], zoom: 5 }); map.on('load', function() { map.addSource('maine', { 'type': 'geojson', 'data': {"type": "FeatureCollection","features":[ { 'properties':{ 'value':"#8A2BE2" }, 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734351262877, 45.137451890638886], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573401557249, 43.090083319667144], [-70.75102474636725, 43.08003225358635], [-70.79761105007827, 43.21973948828747], [-70.98176001655037, 43.36789581966826], [-70.94416541205806, 43.46633942318431], [-71.08482, 45.3052400000002], [-70.6600225491012, 45.46022288673396], [-70.30495378282376, 45.914794623389355], [-70.00014034695016, 46.69317088478567], [-69.23708614772835, 47.44777598732787], [-68.90478084987546, 47.184794623394396], [-68.23430497910454, 47.35462921812177], [-67.79035274928509, 47.066248887716995], [-67.79141211614706, 45.702585354182816], [-67.13734351262877, 45.137451890638886] ] ] } }, { 'properties':{ 'value':"#088" }, 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [127.6214, 26.5], [127.75, 26.6133], [128.0, 26.6933], [128.0, 26.5], [128.0, 26.5], [128.25, 26.5], [128.472, 26.5], [128.5, 26.4421], [128.75, 26.2892], [129.0, 26.2562], [129.0408, 26.25], [129.25, 26.1972], [129.5, 26.1642], [129.75, 26.2302], [129.7894, 26.25], [130.0, 26.3231], [130.25, 26.4303], [130.391, 26.5], [130.5, 26.5525], [130.75, 26.5819], [131.0, 26.5631], [131.1311, 26.5], [131.25, 26.3597], [131.3037, 26.25], [131.25, 26.0533], [131.23, 26.0], [131.0, 25.8435], [130.75, 25.8868], [130.5, 25.8188], [130.4162, 25.75], [130.3567, 25.5], [130.5, 25.4008], [130.5687, 25.25], [130.5, 25.1809], [130.3618, 25.0], [130.25, 24.9104], [130.0854, 24.75], [130.0, 24.7066], [129.75, 24.561], [129.6698, 24.5], [129.5, 24.4461], [129.25, 24.35], [129.0923, 24.25], [129.0, 24.2181], [128.75, 24.1824], [128.5, 24.1683], [128.25, 24.1461], [128.0, 24.0894], [127.8522, 24.0], [127.75, 23.9481], [127.5, 23.9395], [127.25, 23.9662], [127.0662, 24.0], [127.0, 24.0162], [126.75, 24.0675], [126.5, 24.0748], [126.2619, 24.0], [126.25, 23.9972], [126.0, 23.9482], [125.75, 23.9055], [125.5, 23.7645], [125.4842, 23.75], [125.25, 23.6451], [125.0, 23.5819], [124.75, 23.549], [124.5, 23.5081], [124.484, 23.5], [124.25, 23.4399], [124.0, 23.3548], [123.75, 23.3308], [123.5, 23.3737], [123.25, 23.4175], [123.0, 23.4252], [122.8679, 23.5], [122.9736, 23.75], [123.0, 23.8014], [123.25, 23.9057], [123.3055, 24.0], [123.5, 24.1282], [123.5551, 24.25], [123.75, 24.4376], [124.0, 24.466], [124.0983, 24.5], [124.25, 24.6337], [124.5, 24.6643], [124.6347, 24.75], [124.75, 24.8419], [125.0, 24.9835], [125.041, 25.0], [125.25, 25.1001], [125.5, 25.0644], [125.75, 25.1109], [126.0, 25.2026], [126.1199, 25.25], [126.25, 25.302], [126.5, 25.4104], [126.6424, 25.5], [126.75, 25.6041], [126.8986, 25.75], [127.0, 25.8755], [127.0357, 26.0], [127.25, 26.1528], [127.5, 26.246], [127.5, 26.0], [127.5, 26.0], [127.75, 26.0], [128.0, 26.0], [128.0, 26.25], [128.0, 26.5], [127.75, 26.5], [127.6214, 26.5] ] ] } }, ]} }); map.addLayer({ 'id': 'maine', 'type': 'fill', 'source': 'maine', 'layout': {}, 'paint': { "fill-color": ["get",'value'], //读取数据里的properties下的value获取颜色 'fill-opacity': 0.8 } }); }); </script> </body> </html>
posted on 2020-08-07 12:37 jianglusheng 阅读(725) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现