Cesium地图小控件(底图设置)，点线面

本文主要是介绍Cesium地图小控件(底图设置)，点线面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先我们先来看一下地图小控件

 this.viewer = new Cesium.Viewer('cesiumContainer', {geocoder: true, //搜索按钮(可以搜索地区)timeline: true, //底部时间轴animation: true, //左下角仪表盘baseLayerPicker: true, //底图切换按钮fullscreenButton: true, //全屏按钮(毋庸置疑就是全屏)vrButton: true, //vr按钮homeButton: true, //初始视角按钮(小房子图标,无论你怎么旋转放大缩小点击后都会回到你初始化页面的样子)sceneModePicker: true, //二维 <===> 三维切换按钮navigationHelpButton: true, //帮助按钮// ArcGIS在线影像底图(只有baseLayerPicker为true时可用)imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url:'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',}),});

在这里插入图片描述

		vrButton: true,

在这里插入图片描述

        sceneModePicker: true, //二维 <===> 三维切换按钮

在这里插入图片描述

这是默认的地球跟上面那个地球看出区别了吗

在这里插入图片描述

如果想设置初始视角

 this.viewer.camera.setView({// Cesium的坐标是以地心为原点// fromDegrees(lng,lat,alt)方法，将经纬度和高程转换为世界坐标//lng 经度 lat纬度 alt高度destination: Cesium.Cartesian3.fromDegrees(111.0, 35.0, 500000.0),orientation: {// 指向heading: Cesium.Math.toRadians(0),// 视角pitch: Cesium.Math.toRadians(-40),roll: 0.0,},});

//heading 可以理解为y指针绕着蓝线转(360度)
//pitch 可以理解为z指针绕着黄线转(360度)
//roll 可以理解为x指针绕着绿线转(360度)
//当然是根据坐标点不是整个地球

在这里插入图片描述

接下来我们往地球上添加点,线,面

点(point)

 this.viewer.entities.add({name: 'point',position: Cesium.Cartesian3.fromDegrees(111.0, 40.0, 0),//坐标point: {show: true, // defaultcolor: Cesium.Color.AQUA,//点的颜色pixelSize: 15, //点的大小outlineWidth: 0,//边框},description: `<p>这是entity的属性信息,可以为html</p> `,});

在这里插入图片描述

线(polyline)

 	var position = [112.0, 40.0, 0, 110.0, 40.0, 0];this.viewer.entities.add({name: 'line',polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(position),width: 4,//发光材质material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.8,taperPower: 0.5,color: Cesium.Color.CORNFLOWERBLUE,}),//外轮廓材质// material: new Cesium.PolylineOutlineMaterialProperty({//   color: Cesium.Color.ORANGE,//   outlineWidth: 5,//   outlineColor: Cesium.Color.BLACK,// }),//带箭头的线// material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),//虚线// material: new Cesium.PolylineDashMaterialProperty({//   color: Cesium.Color.CYAN,// }),// 线低于地形时用于绘制折线的材质// depthFailMaterial: Cesium.Color.WHITE,// 折线段必须遵循的线型// arcType: Cesium.ArcType.GEODESIC,clampToGround: true, // 是否贴地},});

在这里插入图片描述

面(Polygon)

var polygon = this.viewer.entities.add({name: 'polygon',polygon: {show: true,hierarchy: Cesium.Cartesian3.fromDegreesArray([115.0,43.0,115.0,42.0,113.0,42.0,113.0,43.0,]),height: 0, // 多边形相对于椭球面的高度heightReference: Cesium.HeightReference.NONE,// extrudedHeight: 0, // 多边形的凸出面相对于椭球面的高度// extrudedHeightReference: Cesium.HeightReference.NONE,stRotation: 0.0, // 多边形纹理从北方逆时针旋转granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度点之间的角距离fill: true,//是否填充material: Cesium.Color.YELLOW,//材质outline: false,//是否边框outlineColor: Cesium.Color.BLACK,//边框颜色outlineWidth: 1.0,//边框宽度perPositionHeight: false, // 是否使用每个位置的高度closeTop: true, // 如果为false，则将挤出的多边形顶部留空closeBottom: true, // 如果为false，则将挤出的多边形的底部保留为开放状态// 多边形边缘必须遵循的线型    type:ArcType 定义连接顶点应采用的路径。// NONE 与椭圆表面不符的直线;GEODESIC 遵循测地路径;RHUMB	遵循大黄蜂或恶魔般的道路。arcType: Cesium.ArcType.GEODESIC,shadows: Cesium.ShadowMode.DISABLED,},});