快速上手

vue3

vue

<template>
  <div ref="view" class="viewer"></div>
</template>

<script setup lang="ts" name="home">
import {
  createglobe,
  MapContext,
  createMaptile,
  TiandiTu
} from '3umap';
const view = ref();
MapContext.basePath.set('/assets/'); //设置资源目录
MapContext.baseUrl.set('http://127.0.0.1:8483'); //设置授权验证服务地址

onMounted(async () => {
  //创建地球
 const viewer = await createglobe(view.value);
  //添加影像
  maptile = await createMaptile({
    url: {
      target: 'tianditu',
      url: TiandiTu.img,
      key: '申请的key'
    }
  });
});
</script>

<style scoped lang="scss">
.viewer {
  width: 100vw;
  height: 100vh;
}
</style>

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./_3umap/assets/style/index.css" />
    <script src="./_3umap/assets/Cesium/index.js"></script>
    <script src="./_3umap/assets/DependencyPackages/axios/index.js"></script>
    <script src="./_3umap/_3umap.js"></script>
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="view" style="height: 100vh; width: 100vw"></div>
    <script>
      ;(async function () {
        _3umap.MapContext.basePath.set('/assets/'); //设置资源目录
        _3umap.MapContext.baseUrl.set('http://127.0.0.1:8483'); //设置授权验证服务地址
        // 创建地球
        const viewer = await window._3umap.createglobe('view')
        /** 创建影像 */
        const maptile = await _3umap.createMaptile({
          url: { target: 'tianditu', url: _3umap.TiandiTu.img, key: '申请的天地图key' },
          maximumLevel: 18,
          hasAlphaChannel: false //影像是否透明，显示指定提高性能
        })
      })()
    </script>
  </body>
</html>

快速上手 ​

vue3 ​

html ​

快速上手

vue3

html