Cesium开发环境搭建

Cesium开发环境搭建

VUE中Cesium文件的引用

import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
let Cesium = require("cesium/Source/Cesium");//cesium1.6以上版本不支持import
import Tools from "../js/CesiumBase"
//导入必须的样式表
import "cesium/Source/Widgets/widgets.css";

初始化三维球(指定天地图作为底图)

重置BaseLayerPicker

// 天地图
var image_Source = new Cesium.WebMapTileServiceImageryProvider({
	url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=申请的天地图token",
	layer: "img",
	style: "default",
	format: "tiles",
	tileMatrixSetID: "w",
	credit: new Cesium.Credit('天地图全球影像服务'),
	subdomains: ['t0', "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
	maximumLevel: 18,
	show: false
});

//设置静态资源目录
buildModuleUrl.setBaseUrl("../static/cesium/");

//创建viewer实例
this.viewer = new Cesium.Viewer(target, {
	//需要进行可视化的数据源的集合
	animation: true, //是否显示动画控件
	shouldAnimate: true,
	homeButton: false, //是否显示Home按钮
	fullscreenButton: false, //是否显示全屏按钮
	baseLayerPicker: true, //是否显示图层选择控件
	geocoder: false, //是否显示地名查找控件
	timeline: true, //是否显示时间线控件
	sceneModePicker: true, //是否显示投影方式控件
	navigationHelpButton: false, //是否显示帮助信息控件
	infoBox: false, //是否显示点击要素之后显示的信息
	requestRenderMode: true, //启用请求渲染模式
	scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
	sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
	fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
	infoBox: false,
	imageryProvider: image_Source,//自定义初始化底图
});

默认工具控件

1. Geocoder:一种定位搜索工具，他可以让摄像机飞到查询位置。默认使用应用地图数据。
2. HomeButton:将视野带回默认窗口
3. Scene Mode Picker: 3D,2D 和Columbus视图（cv）模式之间的切换
4. Base Layer Picker：选择在地球上展示的图像和地形图
5. Navigation Help Button :展示默认的相机控件。
6. Animation :控制播放视图动画的动画速度。
7. Timeline：指定当前时间，允许用户跳转到待定的时间。
8. Credits Display:展示数据的属性，者总是被要求的。
9. Fullscreen Button:使视图全屏！

//去除版权信息
this.viewer._cesiumWidget._creditContainer.style.display = "none";

定位

//定位方式一
this.viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(112.110693, 30.0994841, 10000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
    }
});

指北针控件

 安装 $ cesium-navigation-es6  $ npm install cesium-navigation-es6 -save  

初始化配置

var options = {};
//默认范围
options.defaultResetView = Cesium.Rectangle.fromDegrees(71, 3, 90, 14);
//只有指南针才会显示在地图上。
options.enableCompass = true;
options.enableZoomControls = false;
options.enableDistanceLegend = false;
options.enableCompassOuterRing = true;
CesiumNavigation(this.viewer, options);

添加图层

//注记图层
 this.viewer.imageryLayers.addImageryProvider(
     new Cesium.WebMapTileServiceImageryProvider({
         url:
             "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7dbe9676a47872a92d1d86cc7c71f440",
         layer: "cia",
         style: "default",
         format: "tiles",
         tileMatrixSetID: "w",
         credit: new Cesium.Credit("天地图全球影像注记服务"),
         subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
         maximumLevel: 18,
         show: false
     })
 );