Vue3项目-Cesium地图初始化

呆呆的小草

已于 2024-10-18 15:23:57 修改

阅读量1.1k

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-08-19 10:59:54 首次发布

本文链接：https://blog.youkuaiyun.com/StupidlyGrass/article/details/141319805

版权

一、方法一

1、安装Cesium

npm install cesium

2、文件拷贝

将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下

3、index.html配置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue</title>
  <link rel="stylesheet" href="./public/Cesium/Widgets/widgets.css">
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script type="text/javascript" src="./public/Cesium/Cesium.js"></script>
</body>

</html>

4、Cesium示例

（1）HTML

<template>
  <div class="cesium_map">
    <!-- cesium -->
    <div id="cesiumContainer"></div>
  </div>
</template>

（2）JavaScript

<script setup>
import { reactive, ref, onMounted } from "vue";

// ---------------------------<<数据>>---------------------------

// ---------------------------<<函数>>---------------------------
function initMap() {
  // 在线地图token
  Cesium.Ion.defaultAccessToken = "map_token";

  // 在线地图
  let imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: &

最低0.47元/天解锁文章