欢迎光临散文网 会员登陆 & 注册

mapbox-gl:创建Marker

2022-07-01 09:16 作者:地理信息技术杂谈  | 我要投稿

mapbox-gl提供了两种在地图上创建poi方式:使用图层(Layers)中的symbol样式,另一种是使用Marker的形式,图层的数据源是geojson数据,Marker是以坐标点的形式加载到地图上。

这两者的区别是:图层(Layers)适用于批量加载poi数据,poi只能在地图显示成图标或者文字,或者是两者的混合,poi加载的数据量可以达到很多;Marker是一个一个的根据坐标加载到地图上,poi的样式比较丰富,完全根据html中排版和css样式进行设计,poi的加载数据量比较小。

在地图上创建一个基本自带Marker:


var marker = new mapboxgl.Marker()

.setLngLat([30.5, 50.5])

.addTo(map);

通过浏览的开发调试,可以发现在页面上加载了一个html元素,在地图移动时,通过css中的translate rotate等变换参数进行变化,达到跟随上地图相应的坐标点。


在Marker的api中,通过element的属性,可以设置自定义的html元素,从页面文档中选取,或者通过createElement进行元素创建:

var el = document.createElement('div');

el.className = 'marker';

同时,在html的元素上加载css3,能实现一些更良好的效果,同时能加上动态的标签效果。

毕竟Marker是通过html元素的形式进行加载的,当同一地方聚集很多的时候,页面会有些卡顿,而使用图层就不会存在这种问题。

mapbox-gl:创建Marker的评论 (共 条)

分享到微博请遵守国家法律