用 MapVue 渲染三维地形

MapVue 是一个基于Vue3 开发的 MapboxGL 组件库，其目的在于使用更优雅的方式开发 Vue + GIS 应用。今天我们使用 MapVue 渲染一个简单的三维地形场景。
首先，初始化一个 Vue 应用，并且安装 MapVue 组件库。具体方式参考文档。

pnpm create vue@latest
// 初始化后进入项目
pnpm add mapvue

代码如下：

<script setup>
// 这里需要你的 MapboxGL accessToken
const accessToken = import.meta.env.VITE_ACCESS_TOKEN;
</script>

<template>
  <div class="container">
    <v-map
      :accessToken="accessToken"
      :options="{
        style: 'mapbox://styles/mapbox/satellite-v9',
      }"
    >
      <v-fog />
      <v-rasterdem-source id="terrain" url="mapbox://mapbox.terrain-rgb" />
    </v-map>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  width: 100%;
}
</style>

整段代码使用了 v-map、v-fog、v-rasterdem-source 三个组件

• v-map 组件是初始化地图的最顶层组件
• v-fog 组件是加载大气环境的子组件
• v-rasterdem-source 组件是加载三维地形瓦片的子组件

效果如下：

更多组件参考文档，欢迎使用！
MapVue 中文文档