vue使用cesium

1、安装：
npm install cesium@1.95.0 --save

2、在node_modules/cesium下面复制Widgets文件夹在src下面
3、main.js中引入css样式

import "./Widgets/widgets.css"

4、在node_modules/cesium下面复制Assets、ThirdParty、Widgets、Workers文件夹到public文件夹下面

5、使用vue-cli工具不需要对cesium做vue.config.js配置
6、封装自己的cesium方法，例如在src创建utils文件夹，在utils文件夹下面创建mCesium.js

import * as Cesium from 'cesium'
Cesium.Ion.defaultAccessToken ="token"; //这里的token是自己申请的token
window.CESIUM_BASE_URL = "/";class mMap{constructor(id){this.id = id; //地图容器this.viewer = null;this.scene = null;}//初始化地图initMap(){console.log(this.id)this.viewer = new Cesium.Viewer(this.id,{geocoder: false,                //是否显示地名查找控件sceneModePicker: false,         //是否显示投影方式控件navigationHelpButton: false,    //是否显示帮助信息控件baseLayerPicker: false,         //是否显示图层选择控件homeButton: false,              //是否显示Home按钮fullscreenButton: false,        //是否显示全屏按钮animation: false, //左下角的动画控件的显示shouldAnimate: false, //控制模型动画timeline: false, //底部的时间轴selectionIndicator: false,infoBox: false});//定位到指定位置this.viewer.camera.flyTo({destination : Cesium.Cartesian3.fromDegrees(112.876942, 28.235312, 1500.0)});//去cesium logo水印 或 cssthis.viewer.cesiumWidget.creditContainer.style.display = "none";//创建场景this.scene = this.viewer.scene;if(!this.scene.pickPositionSupported){window.alert("此浏览器不支持拾取位置！")}this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas); }}export function createMap(id){window.map = new mMap(id)}

7、使用

<template><div id="mMap"></div>
</template>
import { createMap} from './utils/cesium/mcesium'
mounted() {createMap(“mMap”);window.map.initMap()},

注：如果地图没有加载出来很可能是div没有设置宽高，另外不要在created函数中使用createMap(“mMap”),会报错找不到元素

注：vue版本2.6.14 cesium.js版本1.95.0

vue使用cesium相关推荐

vue 使用 cesium 接入 gltf 模型
vue 使用 cesium 接入 gltf 模型这个其实说简单也简单,但是说复杂也不容易搞.尤其是转化成vue语法或者是在vue项目接入的时候会有些许的坑,我在接入的时候也是有很多问题,好在最后把模 ...
Vue集成Cesium之二 —— 相机（Camera）
上一篇文章初步写了一下 vue 集成 cesium 方法和注意的地方. 最近因为项目中用到的地图资源并不是拿来就能用,需要调整显示的角度.缩放等设置.所以把 cesium 所有的相机(也就是视角)设置 ...
从零开始vue使用cesium开发3d地形terrainProvider（二）
从零开始vue使用cesium通过nginx发布3d地形数据并展示(续二)_yinzisang的博客-CSDN博客基本上大型项目都得使用nginx来发布服务(切片数据太大),因为我们这是测试demo ...
vue集成cesium入门教程（1）环境搭建、初始化三维地球
1.概述这篇内容是<vue集成cesium入门教程>的第一篇,我将记录在vue中集成cesium并实现页面的初始化(显示三维地图页面)等学习内容.效果如下: 2.实现步骤首先是 ...
vue框架+cesium项目怎么才能运行成功
vue框架+eacharts+cesium项目怎么才能跑的起来 1.首先下载一个git 官网下的就行 https://blog.csdn.net/qq_48203828/article/details ...
vue引入cesium
1.首先安装cesium,之前因为版本过高碰到过一些问题,所以后来一直安装的都是以下版本 npm install cesium@1.93 2. 配置首先,配置webpack.base.conf.js ...
五、Vue引用Cesium调用Sandcastle-header.js文件中的方法
<template><div><div id="cesiumContainer"><div id="toolbar"& ...
vue 使用cesium
首先呢我也是第一次接触哈所以也有好多不熟练的地方
VUE+Cesium 初始化地球，加载三维模型（.glb），绘制轨迹线，homebutton 按键重写（默认定位位置的设置）
Cesium是什么我们打开Cesium官网,能够很清晰的看到官方赋予Cesium的使命,即构建世界一流的3D地理空间应用程序.那Cesium到底是个什么东东呢? Cesium是一个跨平台.跨浏览器的 ...

vue使用cesium

vue使用cesium相关推荐

最新文章

热门文章