1. 获取所有图层

map.getStyle().layers

2. 控制图层的显示与隐藏

// 获取属性
map.getLayoutProperty('maqiaojiedao', 'visibility')
//  设置隐藏
map.setLayoutProperty('maqiaojiedao', 'visibility', 'none')
// 设置显示
map.setLayoutProperty('maqiaojiedao', 'visibility', 'visible')

3. 监听地图的缩放

map.on('moveend', () => {console.log(this.map.getZoom())})

4. 鹰眼

//引入minimap插件
map.addControl(new mapboxgl.Minimap({id: 'mapboxgl-minimap','320px',height: '180px',style: 'mapbox://styles/tyy-sj/ck9c4cqa301rg1ipfeaiywr9x',center: [119.23774842192483, 30.52603116857425],zoom: 15,// 应该是一个函数；将被绑定到小地图zoomAdjust: null,zoomLevels: [[18, 11, 15],[16, 10, 12],[14, 8, 11],[12, 6, 8],[10, 4, 6]],lineColor: '#08F',lineWidth: 1,lineOpacity: 1,fillColor: '#F80',fillOpacity: 0.25,dragPan: false,scrollZoom: false,boxZoom: false,dragRotate: false,keyboard: false,doubleClickZoom: false,touchZoomRotate: false}),'bottom-left'
)

5. 热力图

//引入 geojson
map.addSource('trees', {type: 'geojson',data: 'geojson/trees.geojson'// data:asd})//放大后的热力点
map.addLayer({id: 'trees-heat',type: 'heatmap',source: 'trees',maxzoom: 15,paint: {'heatmap-weight': {property: 'dbh',type: 'exponential',stops: [[1, 0],[62, 1]]},'heatmap-intensity': {stops: [[11, 1],[15, 3]]},'heatmap-color': ['interpolate',['linear'],['heatmap-density'],0,'rgba(236,222,239,0)',0.2,'rgb(208,209,230)',0.4,'rgb(166,189,219)',0.6,'rgb(103,169,207)',0.8,'#ec1010'],'heatmap-radius': {stops: [[11, 15],[15, 20]]},'heatmap-opacity': {default: 1,stops: [[14, 1],[15, 0]]}}},'waterway-label')
//缩小时的热力图
map.addLayer({id: 'trees-point',type: 'circle',source: 'trees',minzoom: 14,paint: {'circle-radius': {property: 'dbh',type: 'exponential',stops: [[{zoom: 15, value: 1 }, 5],[{zoom: 15, value: 62 }, 10],[{zoom: 22, value: 1 }, 20],[{zoom: 22, value: 62 }, 50]]},'circle-color': {property: 'dbh',type: 'exponential',stops: [[0, 'rgba(236,222,239,0)'],[10, 'rgba(242, 29, 196, 0)'],[20, 'rgb(208,209,230)'],[30, 'rgb(166,189,219)'],[40, 'rgb(103,169,207)'],[50, 'rgb(28,144,153)'],[60, '#ec1010']]},'circle-stroke-color': 'white','circle-stroke-width': 1,'circle-opacity': {stops: [[14, 0],[15, 1]]}}},'waterway-label')

mapbox基本使用相关推荐

点、线、面生成mvt（MapBox Vector Tile）格式的瓦片总结
矢量切片可以以三种形式呈现:GeoJSON.TopoJSON 和 MapBox Vector Tile(.mvt),矢量切片技术继承了矢量数据和切片地图的双重优势,有以下优点: 瓦片以mvt格式的存储 ...
Mapbox gl tile瓦片渲染点以及图片Icon
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图 2. 源码参考 1. 效果图点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示. 2. 源 ...
Mapbox HTML可视化点，线，多线，面带底图
Mapbox HTML可视化点,线,多线,面带底图 1. 效果图 2. 源码参考 1. 效果图如下所示:可显示蓝色点.红色线.红色多线.浅紫色多边形面: 2. 源码 <!DOCTYPE ht ...
android自定义离线地图,MapBox GL Android：已下载但未使用的自定义磁贴源的离线地图...
对于我们的应用程序,我目前正在将地图框与自定义地图图块集成(如 here所述).使用OfflineManager和OfflineTilePyramidRegionDefinition,一切都运行正常, ...
android mapbox 添加多个点,使用Android Mapbox SDK显示多个标记的自定义infoWindow
我想要在地图上可视化多个标记.它的完美展示和onMarkerTap从数据库检索的显示信息为JSON.我想要做的是在自定义布局或底部工作表中显示信息.当用户点击标记时,底部表单将出现,并显示与该标记相关 ...
win32 api setwindowlong 第2个参数_FME与MapBox 01：等时圈（Isochrone）API
MapBox是非常优秀的国外地图提供商,MapBox中在知乎设有专栏(https://www.zhihu.com/org/mapboxzhong-guo)介绍其成果及各种有趣的玩法.MapBox的AP ...
[译] 解密 Mapbox 卫星影像处理神器 Robosat
英文原文地址:https://www.openstreetmap.org... 英文原文作者:daniel 前言最近,Mapbox 开源了端到端的卫星影像特征提取工具 RoboSat.下面我将以来自 ...
plotly使用mapbox实现地图可视化
plotly mapbox地图可视化 plotly mapbox地图可视化,可以分为两个步骤,第一步设置 mapbox token,第二步制作数据,第三步编写代码. first set mapbo ...
开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...
superset可视化-deck.gl Scatterplot与MapBox
数据集注意: 仔细看这里的LON和LAT哈,都有一大堆的小数,如果前面导入的设置不注意Decimal(15,10)的话, 这里会全部变成122,最后可视化得到的就只有地图上的一个点了．左侧设置 d ...

mapbox基本使用

1. 获取所有图层

2. 控制图层的显示与隐藏

3. 监听地图的缩放

4. 鹰眼

5. 热力图

mapbox基本使用相关推荐

最新文章

热门文章