mapbox gl添加symbol图层

最新推荐文章于 2025-11-14 10:43:23 发布

原创

最新推荐文章于 2025-11-14 10:43:23 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文通过实例代码展示了如何在Mapbox GL中添加Symbol图层，包括创建DOM和定义样式，最终呈现效果。

话不多说，直接上代码，就是个小例子：

<script>
			mapboxgl.accessToken = '';//mopbox 密钥

			
			var map = new mapboxgl.Map({
				container: 'map',
				// style: 'mapbox://styles/mapbox/streets-v11',
				 style: 'mapbox://styles/mapbox/streets-v11',
				center: [114.131818, 30.631181],
				zoom: 13, // starting zoom
			});

			// 设置语言
			// 英文标注转换为中文
			mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
			map.addControl(new MapboxLanguage({
			  defaultLanguage: 'zh-Hans'
			}));


			map.addControl(new mapboxgl.NavigationControl());
			map.on("zoomend", function() {
				console.log(map.getZoom());
			})
			//图片路径
			var icon1 = "img/icon1.png";
			var icon2 = "img/icon2.png";
			var icon3 = "img/icon3.png";
			//加载图片
			loadImg(icon1, "icon1");
			loadImg(icon2, "icon2");
			loadImg(icon3, "icon3");

			function loadImg(iconUrl, iconId) {
				var url = iconUrl;
				//先判断是否加载过这张图片