快速上手

案例参考(通过vite工具构建vue3项目：https://io-qos.geovisearth.com/getfile/15/open-platform/mapbox-vue3.x.zip)

通过 npm 安装

npm install mapbox-gl@3.4.0 @gvol-org/open-mapbox-sdk

<script setup lang="ts">
import { onMounted } from "vue";
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
import { geovisWorker } from "@gvol-org/open-mapbox-sdk/geovis-worker-v3.js";
import {
    initGeovisEarth,
    getGeovisInitStyle,
    addGeovisImageLayer,
    addGeovisVectorTilesLayer
} from '@gvol-org/open-mapbox-sdk'

onMounted(() => {
  //星图地球sdk初始化(获得星图地球矢量瓦片加载能力及accessToken设置) - 核心代码
  initGeovisEarth(mapboxgl, geovisWorker, '<mapboxgl accessToken>');

  // 初始化地球 - 可替换代码, 可使用自行创建的mapbox.Map实例
  const map = new mapboxgl.Map({
      container: 'app',
      style: getGeovisInitStyle(),//获取初始化样式
      center: [116.3554, 39.9275],
      zoom: 2,
      projection: 'globe'
  });

  const token = "您申请的token";
  // 影像图
  const url_img = `https://api.open.geovisearth.com/pj/base/v1/img/{z}/{x}/{y}??format=webp&tmsIds=w&token=${token}`
  // 矢量图
  const url_vector = `https://api.open.geovisearth.com/pj/base/v1/vector/{z}/{x}/{y}?format=pbf&token=${token}`

  const sourceId = "tile_source";

  map.on("load", () => {
    /**
     * 添加矢量地图图层 - 核心代码
     */

    // 加载矢量图
    addGeovisVectorTilesLayer({ token: token, map, id: sourceId, url:url_vector });

    // 加载影像图
    // addGeovisImageLayer({token,map,url: url_img, id:sourceId });
    
  });
})
</script>

<template>
  <div class="map-container" id="app"></div>
</template>

<style scoped>
.map-container {
  width: 100vw;
  height: 100vh;
}
</style>