mapbox在标签下添加新图层

最新推荐文章于 2024-05-14 15:47:45 发布

steamedbread321

最新推荐文章于 2024-05-14 15:47:45 发布

阅读量1.8k

点赞数

分类专栏： mapbox

本文链接：https://blog.csdn.net/weixin_44766633/article/details/109817088

版权

mapbox 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

在这里插入图片描述
如果没有第二个参数那么新加的图层就会在那个图层的紧挨着的下面。

在这里插入图片描述
"fill"：

具有可选描边边框的填充多边形。

"line"：

描边线。

"symbol"：

图标或文本标签。

"circle"：

实心圆。

"heatmap"：

热图。

"fill-extrusion"：

拉伸（3D）多边形。

"raster"：

栅格地图纹理，例如卫星图像。

"hillshade"：

基于DEM数据的客户端山体阴影可视化。目前，该实现仅支持Mapbox Terrain RGB和Mapzen Terrarium磁贴。

"background"：

地图的背景颜色或图案。

完整代码：

<!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/v1.1.1/mapbox-gl.js'></script>
		<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.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>
			mapboxgl.accessToken = 'pk.eyJ1Ijoic3E4ODg1NTUiLCJhIjoiY2toNDdudTN6MDByNjMzbW84cDA2MWJxMSJ9.ol91y8mStuwyy-URFaq5Uw';
			var map = new mapboxgl.Map({
				container: 'map',
				style: 'mapbox://styles/mapbox/streets-v11',
				center: [-88.13734351262877, 35.137451890638886],
				zoom: 4
			});

			map.on('load', function() {

				var layers = map.getStyle().layers; //找到所有的图层
				// 找到地图样式中第一个符号层的索引
				var firstSymbolId; //增加一个第一个图层id的变量，为了存储id
				for (var i = 0; i < layers.length; i++) { //遍历所有的图层找到为symbol（第一层）的id赋值给firstSymbolId
					if (layers[i].type === 'symbol') {
						firstSymbolId = layers[i].id;
						break;
					}
				}
				map.addLayer({ //增加图层
					'id': 'urban-areas-fill',
					'type': 'fill',
					'source': {
						'type': 'geojson',
						'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson'
					},
					'layout': {},
					'paint': {
						'fill-color': 'black',
						'fill-opacity': 0.4
					}
					//这是这个例子的重要部分:addLayer
					//方法有两个参数: 层作为一个对象， 和一个字符串
					//表示另一层的名称。
					//如果另一个图层
					//已经存在于样式表中，新层将被定位
					//就在堆栈的那一层的前面，使它能够放置
					//“覆盖”层堆栈的任何地方。
					//将该层插入到第一个符号层的下面。
				}, firstSymbolId); //firstSymbolId在找到的图层id前面添加图层
			});
		</script>


	</body>
</html>

steamedbread321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mapbox在标签下添加新图层

如果没有第二个参数那么新加的图层就会在那个图层的紧挨着的下面。"fill"：具有可选描边边框的填充多边形。"line"：描边线。"symbol"：图标或文本标签。"circle"：实心圆。"heatmap"：热图。"fill-extrusion"：拉伸（3D）多边形。"raster"：栅格地图纹理，例如卫星图像。"hillshade"：基于DEM数据的客户端山体阴影可视化。目前，该实现仅支持Mapbox Terrain RGB和Mapzen Terrarium磁贴。"b.
复制链接

扫一扫