vue使用cesium
cesium.js
·
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水印 或 css
this.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
更多推荐
已为社区贡献2条内容
所有评论(0)