一、定位
//跳转
this.map.jumpTo({
center: city.geometry.coordinates });
}, 2000 * index);
//飞行
this.map.flyTo({
center: [114.23774842192483, 30.52603116857425],
essential: true
})
二、获取所有图层
var layers = this.map.getStyle().layers
三、监听地图缩放事件
this.map.on('moveend', () => {
console.log(this.map.getZoom())
// if(e.moveend&&e.moveend=="111"){
// //查询操作
// }
})
四、鹰眼
//引入minimap插件
this.map.addControl(
new mapboxgl.Minimap({
id: 'mapboxgl-minimap',
'320px',
height: '180px',
style: 'mapbox://styles/tyy-sj/ck9c4cqa301rg1ipfeaiywr9x',
center: [114.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'
)
五、热力图
//引入 geojson
this.map.addSource('trees', {
type: 'geojson',
data: 'geojson/trees.geojson'
// data:asd
})
//放大后的热力点
this.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'
)
//缩小时的热力图
this.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'
)
六、显示隐藏
this.map.setLayoutProperty('points', 'visibility', 'none')