• mapboxgl 绘制3d polygon

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>Add a polygon to a map using a GeoJSON sourcetitle>
    6. 		<meta
    7. 			name="viewport"
    8. 			content="initial-scale=1,maximum-scale=1,user-scalable=no"
    9. 		/>
    10. 		<link
    11. 			href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css"
    12. 			rel="stylesheet"
    13. 		/>
    14. 		<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js">script>
    15. 		<script src="./data/js/china.js">script>
    16. 		<style>
    17. 			body {
    18. 				margin: 0;
    19. 				padding: 0;
    20. 			}
    21. 			#map {
    22. 				position: absolute;
    23. 				top: 0;
    24. 				bottom: 0;
    25. 				width: 100%;
    26. 			}
    27. 		style>
    28. 	head>
    29. 	<body>
    30. 		<div id="map">div>
    31. 		<script>
    32. 			mapboxgl.accessToken =
    33. 				"pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A";
    34. 			const map = new mapboxgl.Map({
    35. 				container: "map", // container ID
    36. 				style: "mapbox://styles/mapbox/streets-v12", // style URL
    37. 				center: [105.39, 39.6], // starting position
    38. 				zoom: 3, // starting zoom
    39. 			});
    40. 			
    41. 			
    42. 			resolveChinaJson();
    43.  
    44. 			map.on("load", () => {
    45. 				map.addSource("maine", {
    46. 					type: "geojson",
    47. 					data: chinaJson,
    48. 				});
    49.  
    50. 				map.addLayer({
    51. 					id: "maine",
    52. 					type: "fill-extrusion",
    53. 					source: "maine", // reference the data source
    54. 					layout: {},
    55. 					paint: {
    56. 						"fill-extrusion-vertical-gradient": true,
    57. 						"fill-extrusion-color": ["get", "color"],
    58. 						// "fill-extrusion-color": '#79D0F0',
    59. 						"fill-extrusion-height": ["get", "count"],
    60. 						"fill-extrusion-base": 0,
    61. 						"fill-extrusion-opacity": 1.0,
    62. 					},
    63. 				});
    64. 				// Add a black outline around the polygon.
    65. 				// map.addLayer({
    66. 				//     'id': 'outline',
    67. 				//     'type': 'line',
    68. 				//     'source': 'maine',
    69. 				//     'layout': {},
    70. 				//     'paint': {
    71. 				//         'line-color': '#000',
    72. 				//         'line-width': 3
    73. 				//     }
    74. 				// });
    75. 			});
    76.  
    77. 			// 获取json数据
    78. 			function resolveChinaJson () {
    79. 			    const countMap = {
    80. 			        '650000': 300,      // 新疆车辆数
    81. 			        '150000': 100,      // 内蒙
    82. 			        '370000': 50,         // 山东  
    83. 			    };
    84. 			    
    85. 			    chinaJson.features.forEach(feature => {
    86. 			        feature.properties.color = getRandomColor();
    87. 			        if(countMap[feature.properties.adcode]){
    88. 			            feature.properties.count = 10000 + countMap[feature.properties.adcode] * 1000;
    89. 			        }else{
    90.                         feature.properties.count = 10000;
    91. 			        }
    92. 			    });
    93. 			}
    94. 			
    95. 			// 生成随机颜色
    96. 			function getRandomColor() {
    97. 				var letters = "0123456789ABCDEF";
    98. 				var color = "#";
    99. 				for (var i = 0; i < 6; i++) {
    100. 					color += letters[Math.floor(Math.random() * 16)];
    101. 				}
    102. 				return color;
    103. 			}
    104. 		script>
    105. 	body>
    106. html>

    效果：

  • 相关阅读:
    开启CentOS/Debian自带的TCP BBR加速
    IPv6进阶：IPv6 过渡技术之 6to4 自动隧道
    excel文档损坏打不开的原因是什么?
    如何选择UMLChina服务
    LabVIEW大量数据的内存管理
    NebulaGraph 的云产品交付实践
    Java 创建事件Event、事件监听EventListener、事件发布publishEvent
    【系统架构设计师考试大纲】
    【C++】继承 ⑧ ( 继承 + 组合 模式的类对象 构造函数 和 析构函数 调用规则 )
    css relative 和absolute布局
  • 原文地址：https://blog.csdn.net/qq_34870529/article/details/132952840