携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，[点击查看活动详情]
获取坐标，设置默认中心位置
通常来说我们创建好地图后，都会将默认的中心位置修改到我们比较关心的地区。这时候一般设置Map.options中center属性就可以。按照以前我们可能会去网上搜索我们关心地区的经纬度坐标，但是现在我们已经有了一个地图，就完全可以尝试在我们自己的地图上去获取想要的地点坐标了。
这里的逻辑主要就是，鼠标点击地图某个点，然后获取该点经纬度坐标，最后显示到页面上。
mapbox-gl 地图的点击事件
map.on("click", (e) => {
let lngLat = [e.lngLat.lng, e.lngLat.lat];
ElNotification({
title: "提示",
dangerouslyUseHTMLString: true,
message: `
<p>经纬度:</p>
<b>${lngLat}</b>
`,
});
});
打印这个参数e，可以看到其中包含一个lngLat经纬度坐标，这个坐标既当前点击点的坐标。
flyTo 视角回到默认位置
直接设置中心位置感觉不明显，我们设置一个按钮；点击这个按钮，例用flyto方法回到我们保存的中心位置。
// state.map：new mapboxgl.Map() 返回的实例
state.map.flyTo({
center: state.center,
zoom: 12,
duration: 8000,
essential: true
});
做一个热门景点的地图游览
其实有了flyTo我们就可以做一个有趣的应用了。我们可以去搜集几个热门景点，并通获取其相应坐标，然后切换不同景点时，再例用flyTo转到该景点在地图上的位置。
gif效果不太好，这里需要一个线上预览的TODO
地形、3D建筑
现在地图看起来太平了，我们可以换一种角度来看地图，并且给祖国的大好河山添加一点高度。
- Map options 中添加 pitch 配置，修改地图倾斜度。
- setTerrain 设置地形。
- fill-extrusion 设置3d 建筑。
为了好看一点，我们可以换成卫星街道样式的地图。
map.on("style.load", () => {
// 地形
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.terrain-rgb",
});
map.setTerrain({
source: "mapbox-dem",
exaggeration: 1.5,
});
// 3D 建筑
map.addLayer(
{
"id": 'add-3d-buildings',
"source": 'composite',
"source-layer": "building",
"filter": ["==", "extrude", "true"],
"type": "fill-extrusion",
"minzoom": 15,
"paint": {
"fill-extrusion-color": "#aaa",
"fill-extrusion-height": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "height"]
],
"fill-extrusion-base": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "min_height"]
],
"fill-extrusion-opacity": 0.9
}
}
)
});
interpolate 插值
interpolate 是mapbox-gl中的插值表达式，可以对颜色和数字进行插值计算。
通常用于热力图、轨迹图的渲染。这里我们我们在对地图层级进行缩放时，利用其对建筑物的高度进行插值计算。
interpolate 表达式至少需要5个参数：
- 表达式名称，这里就是 interpolate
- 插值类型，linear \ exponential \ cubic-bezier
- 输入值
- 判断值
- 输出值
判断值和输出值成对出现，可以有多组。
"fill-extrusion-height": [ "interpolate", ["linear"],
["zoom"],
15, 0,
15.05, ["get", "height"]
]
解释上面的代码就是：通过插值表达式（interpolate），以线性（linear）插值的方式，来计算高度值；插值的依据是zoom值（地图缩放层级），判断条件是：
- zoom <= 15，高度返回 0
- zoom >= 15.05， 高度返回 获取到的 height 值
- 15 < zoom < 15.05，高度返回 0 和 height 值之间
