vue+cesium 环境搭建(一)
1、vue脚手架环境搭建成功后,执行npm install cesium和npm install --save cesium,执行成功后node_modules下会有cesium文件夹。2、Cesium1.6及以上版本cesium不支持import的方式引入 ,改用require引入(在自己定义的cesium组件中)。varCesium=require('../../node_modules/ce
1、vue脚手架环境搭建成功后,执行npm install cesium和npm install --save cesium,执行成功后node_modules下会有cesium文件夹。
2、Cesium1.6及以上版本 cesium不支持import的方式引入 ,改用require引入(在自己定义的cesium组件中)。
var Cesium = require('../../node_modules/cesium/Source/Cesium');
import "../../node_modules/cesium/Source/Widgets/widgets.css";
import buildModuleUrl from "../../node_modules/cesium/Source/Core/buildModuleUrl";
3、初始化cesium三维球
export default {
name: "cesiumPage",
data() {
return {};
},
mounted() {
//加载在线地形图数据
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
animation: false, // 是否创建动画小器件,左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: false, // 是否显示3D/2D选择器
selectionIndicator: true, // 是否显示选取指示器组件 鼠标绿色框
timeline: false, // 是否显示时间轴
navigationHelpButton: false, // 是否显示右上角的帮助按钮
vrButton: false,//是否显示双屏
infoBox: false,//是否显示点击要素之后的显示信息
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
fullscreenElement: document.body, //全屏时渲染的HTML元素
});
viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
var imageryLayers = viewer.imageryLayers;
//加载ArcGIS 深蓝色地图
// var arcGISMap = new Cesium.ArcGisMapServerImageryProvider({
// url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
// })
// imageryLayers.addImageryProvider(arcGISMap)
//加载google影像地图
var googleMap = new Cesium.UrlTemplateImageryProvider({
url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
})
imageryLayers.addImageryProvider(googleMap);
//飞行
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(114.296063, 30.55245, 3000),
orientation: {
//包含了方位(direction)、上方向(up)以及方位角(heading)、俯仰角(pitch)、滚动角(roll)属性的对象。
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: 0.0
},
duration: 3 //飞行持续时间(以秒为单位)
})
}
};
4、显示效果
更多推荐
所有评论(0)