十一 mapbox-gl开发教程:加载线图层

–-gl是一个开源、基于webgl技术的前端地图类库–
在地图应用的开发中,加载线数据,显示道路等信息 , 在-gl对应的是线(line)图层,下边讲一下如何在-gl加载线图层数据 。
-gl加载矢量数据,通过两种数据源 , 一种是矢量切片(),另一种是数据,数据源加载完成后,再进行图层的设置 。
以数据为例:

十一  mapbox-gl开发教程:加载线图层

文章插图
【十一mapbox-gl开发教程:加载线图层】//添加数据源,第一个参数为id
map.addSource('route', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'LineString','coordinates': [[122.483696, 37.833818],[122.483482, 37.833174],[122.483396, 37.8327],[122.483568, 37.832056],[122.48404, 37.831141],[122.48404, 37.830497],[122.483482, 37.82992],[122.483568, 37.829548],[122.48507, 37.829446],[122.4861, 37.828802]]}}});//添加线图层,数据源id对应以上map.addLayer({'id': 'route','type': 'line','source': 'route','layout': {//线连接处的样式'line-join': 'round',//线结束处的样式'line-cap': 'round'},'paint': {//线的颜色'line-color': '#888',//线的宽度'line-width': 8,//线的透明度'line-opacity':1.0}});
线图层属性设置链接:
#line
-gl开发是讲述如何从基础到实际应用进行地图开发的教程,不定时进行持续进行更新,如有疑问,公众号留言进行讨论 。
-gl官网地址: