1.文字绘制


<script>Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false,//是否显示3D/2D选择器});var entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(120, 30, 200),// 点point: {color: Cesium.Color.RED, // 点位颜色pixelSize: 10 // 像素点大小},// 文字label: {// 文本。支持显式换行符“ \ n”text: '测试点',// 字体样式，以CSS语法指定字体font: '14pt Source Han Sans CN',// 字体颜色fillColor: Cesium.Color.BLACK,// 背景颜色backgroundColor: Cesium.Color.AQUA,// 是否显示背景颜色showBackground: true,// 字体边框outline: true,// 字体边框颜色outlineColor: Cesium.Color.WHITE,// 字体边框尺寸outlineWidth: 10,// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。scale: 1.0,// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。style: Cesium.LabelStyle.FILL_AND_OUTLINE,// 相对于坐标的水平位置verticalOrigin: Cesium.VerticalOrigin.CENTER,// 相对于坐标的水平位置horizontalOrigin: Cesium.HorizontalOrigin.LEFT,// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量pixelOffset: new Cesium.Cartesian2(10, 0),// 是否显示show: true}});viewer.zoomTo(entity);    //居中到该点
</script>

效果图

2.图标绘制

<script>Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false,//是否显示3D/2D选择器});var entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2000),billboard: {// 图像地址，URI或Canvas的属性image: '../../static/image/device.png',// 设置颜色和透明度color: Cesium.Color.WHITE.withAlpha(0.8),// 高度（以像素为单位）height: 50,// 宽度（以像素为单位）width: 50,// 逆时针旋转// rotation: 20,// 大小是否以米为单位sizeInMeters: false,// 相对于坐标的垂直位置verticalOrigin: Cesium.VerticalOrigin.CENTER,// 相对于坐标的水平位置horizontalOrigin: Cesium.HorizontalOrigin.LEFT,// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量// pixelOffset: new Cesium.Cartesian2(10, 0),// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。scale: 1.0,// 是否显示show: true}});viewer.zoomTo(entity);    //居中到该点</script>

效果图

3.立方体

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false//是否显示3D/2D选择器});var blueBox = viewer.entities.add({name: 'Blue box',//中心的位置position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),box: {//长宽高dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.BLUE}});var redBox = viewer.entities.add({name: 'Red box with black outline',position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.RED,outline: true, //显示轮廓outlineColor: Cesium.Color.BLACK}});var outlineOnly = viewer.entities.add({name: 'Yellow box outline',position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),fill: false,  //不显示填充outline: true,outlineColor: Cesium.Color.YELLOW}});viewer.zoomTo(redBox);    //居中到该点</script>

效果图

4.圆和椭圆

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false//是否显示3D/2D选择器});//浮空的绿色圆形var greenCircle = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),name: 'Green circle at height',ellipse: {semiMinorAxis: 300000.0,semiMajorAxis: 300000.0,height: 200000.0, //浮空material: Cesium.Color.GREEN}});//红色椭圆形，位于地表，带轮廓var redEllipse = viewer.entities.add({//不带高度position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),name: 'Red ellipse on surface with outline',ellipse: {semiMinorAxis: 250000.0,semiMajorAxis: 400000.0,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}});//蓝色椭圆柱，旋转了角度var blueEllipse = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),name: 'Blue translucent, rotated, and extruded ellipse',ellipse: {semiMinorAxis: 150000.0,semiMajorAxis: 300000.0,extrudedHeight: 200000.0,  //拉伸rotation: Cesium.Math.toRadians(45), //旋转material: Cesium.Color.BLUE.withAlpha(0.7),outline: true}});viewer.zoomTo(viewer.entities);viewer.zoomTo(redBox);    //居中到该点</script>

效果图

5.走廊

<script>Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});var redCorridor = viewer.entities.add({name: 'Red corridor on surface with rounded corners and outline',corridor: {positions: Cesium.Cartesian3.fromDegreesArray([-100.0, 40.0,-105.0, 40.0,-105.0, 35.0]),width: 200000.0,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED}});var greenCorridor = viewer.entities.add({name: 'Green corridor at height with mitered corners',corridor: {positions: Cesium.Cartesian3.fromDegreesArray([-90.0, 40.0,-95.0, 40.0,-95.0, 35.0]),height: 100000.0,width: 200000.0,cornerType: Cesium.CornerType.MITERED,material: Cesium.Color.GREEN}});var blueCorridor = viewer.entities.add({name: 'Blue extruded corridor with beveled corners and outline',corridor: {positions: Cesium.Cartesian3.fromDegreesArray([80.0, 40.0,-85.0, 40.0,-85.0, 35.0]),height: 200000.0,extrudedHeight: 100000.0,width: 200000.0,cornerType: Cesium.CornerType.BEVELED,material: Cesium.Color.BLUE.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.BLUE}});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

6.圆柱和圆锥

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});var greenCylinder = viewer.entities.add({name: 'Green cylinder with black outline',position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),cylinder: { //圆柱length: 400000.0,topRadius: 200000.0,bottomRadius: 200000.0,material: Cesium.Color.GREEN,outline: true,outlineColor: Cesium.Color.DARK_GREEN}});var redCone = viewer.entities.add({name: 'Red cone',position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),cylinder: {//圆锥length: 400000.0,topRadius: 0.0,bottomRadius: 200000.0,material: Cesium.Color.RED}});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

7.多边形

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});var redPolygon = viewer.entities.add({name : '贴着地表的多边形',polygon : {hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,-115.0, 32.0,-107.0, 33.0,-102.0, 31.0,-102.0, 35.0]),material : Cesium.Color.RED}
});var greenPolygon = viewer.entities.add({name : '绿色拉伸多边形',polygon : {hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,-100.0, 42.0,-104.0, 40.0]),extrudedHeight: 500000.0,material : Cesium.Color.GREEN}
});var orangePolygon = viewer.entities.add({name : '每个顶点具有不同拉伸高度的橘色多边形',polygon : {hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 100000,-100.0, 25.0, 100000,-100.0, 30.0, 100000,-108.0, 30.0, 300000]),extrudedHeight: 0,perPositionHeight : true,material : Cesium.Color.ORANGE,outline : true,outlineColor : Cesium.Color.BLACK}
});var bluePolygon = viewer.entities.add({name : '具有挖空效果的蓝色多边形',polygon : {hierarchy : {positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,-85.0, 30.0,-85.0, 40.0,-99.0, 40.0]),holes : [{positions : Cesium.Cartesian3.fromDegreesArray([-97.0, 31.0,-97.0, 39.0,-87.0, 39.0,-87.0, 31.0]),holes : [{positions : Cesium.Cartesian3.fromDegreesArray([-95.0, 33.0,-89.0, 33.0,-89.0, 37.0,-95.0, 37.0]),holes : [{positions : Cesium.Cartesian3.fromDegreesArray([-93.0, 34.0,-91.0, 34.0,-91.0, 36.0,-93.0, 36.0])}]}]}]},material : Cesium.Color.BLUE,outline : true,outlineColor : Cesium.Color.BLACK}
});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

8.线段

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});var redLine = viewer.entities.add({name : '沿着地球表面的红线',polyline : {positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,-125, 35]),width : 5,material : Cesium.Color.RED}
});var glowingLine = viewer.entities.add({name : '具有发光效果的线',polyline : {positions : Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),width : 10,material : new Cesium.PolylineGlowMaterialProperty({glowPower : 0.2,color : Cesium.Color.BLUE})}
});var orangeOutlined = viewer.entities.add({name : '具有一定高度的线',polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,-125, 39, 250000]),width : 5,material : new Cesium.PolylineOutlineMaterialProperty({color : Cesium.Color.ORANGE,outlineWidth : 2,outlineColor : Cesium.Color.BLACK})}
});var yellowLine = viewer.entities.add({name : '不贴着地表的线',polyline : {positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,-125, 43, 500000]),width : 3,followSurface : false,  //是否贴着地表material : Cesium.Color.PURPLE}
});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

9.球和椭圆

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});var blueEllipsoid = viewer.entities.add({name: 'Blue ellipsoid',position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),ellipsoid: {//可以指定三个轴的半径radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),material: Cesium.Color.BLUE}});var redSphere = viewer.entities.add({name: 'Red sphere with black outline',position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),ellipsoid: {//正球体radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),material: Cesium.Color.RED,outline: true,outlineColor: Cesium.Color.BLACK}});var outlineOnly = viewer.entities.add({name: 'Yellow ellipsoid outline',position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),ellipsoid: {radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),fill: false,outline: true,outlineColor: Cesium.Color.YELLOW,slicePartitions: 24, //横向切割线stackPartitions: 36  //纵向切割线}});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

10.墙

<script>// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);var viewer = new Cesium.Viewer("csiumContain", {homeButton: true,//是否显示Home按钮animation: false,//是否显示动画控件timeline: false,//是否显示时间线控件fullscreenButton: false,baseLayerPicker: false,//是否显示图层选择控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件geocoder: false, //是否显示地名查找控件sceneModePicker: false //是否显示3D/2D选择器});//东西方向的横墙var redWall = viewer.entities.add({name: 'Red wall at height',wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([-115.0, 44.0, 200000.0,//坐标点-90.0, 44.0, 200000.0]),minimumHeights: [100000.0, 100000.0], //按坐标点的最小高度数组material: Cesium.Color.RED}});//四边围墙var greenWall = viewer.entities.add({name: 'Green wall from surface with outline',wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([-107.0, 43.0, 100000.0,-97.0, 43.0, 100000.0,-97.0, 40.0, 100000.0,-107.0, 40.0, 100000.0,-107.0, 43.0, 100000.0]),material: Cesium.Color.GREEN,outline: true,outlineColor: Cesium.Color.BLACK}});//曲折的墙var blueWall = viewer.entities.add({name: 'Blue wall with sawtooth heights and outline',wall: {//坐标点，不指定高度positions: Cesium.Cartesian3.fromDegreesArray([-115.0, 50.0,-112.5, 50.0,-110.0, 50.0,-107.5, 50.0,-105.0, 50.0,-102.5, 50.0,-100.0, 50.0,-97.5, 50.0,-95.0, 50.0,-92.5, 50.0,-90.0, 50.0]),maximumHeights: [ //上高100000, 200000, 100000, 200000, 100000, 200000,100000, 200000, 100000, 200000, 100000],minimumHeights: [  //下高0, 100000, 0, 100000, 0, 100000, 0, 100000, 0,100000, 0],material: Cesium.Color.BLUE,outline: true,outlineColor: Cesium.Color.BLACK}});viewer.zoomTo(viewer.entities);    //居中到该点</script>

效果图

Cesium图形绘制相关推荐

Cesium开发-绘制墙体
Cesium中绘制图形有两种方式,一可以通过entity自定义图形也可以使用primitives的方式绘制图形,以下是两个示例的代码总结: <!DOCTYPE html> <html ...
matlab图形绘制基础（东北大学MOOC笔记）
%% 二维图形绘制 % 多纵轴曲线绘制 figure(1); t = 0:0.01:2*pi; y1 = sin(t); y2 = 10*cos(t); % plotyy(t, y1, t, y2); ...
tableau两个不同的图合并_Tableau可视化分析-业务常用图形绘制1
微信公众号链接: Tableau可视化分析-业务常用图形绘制1mp.weixin.qq.com 哑铃图VS 火柴图哑铃图,又名DNA图,横着看是哑铃,竖着看就是DNA,它主要用来表现两个数据点之间 ...
c++之openGL在VS中的配置及简单图形绘制
VS中openGL的配置相关资源下载: 链接:https://pan.baidu.com/s/1hRlxbckgLsNiS87k5CPvLg 提取码:tz87 以vs2010为例: 将下载的压缩包解 ...
13个JavaScript图表图形绘制插件
由于绘制矢量图的不同技术愈发成熟以及现代浏览器所具备的更强大的计算能力等原因,目前网上出现了越来越多免费的JavaScript图表和图形绘制解决方案.在本文中就将分享13个优秀实用的JavaScri ...
史上最扯Java图形绘制（J2SE）之一JAVA动画效果
很多主一听说Java界面,一水的头大外带血压高,兄弟我倒觉得没什么必要. 其实Java这东西吧,就简便性和其初衷而言,真他妈就在GUI 这地界是有优势的,单就其2D界面开发的易用性 ...
Matlab学习笔记——图形绘制
写在这里的初衷,一是备忘,二是希望得到高人指点,三是希望能遇到志同道合的朋友. 目录图形绘制 1.正弦曲线绘制 2.常用三角函数曲线的绘制图形绘制 1.正弦曲线绘制以产生一个简单的正弦函数曲线为 ...
iOS：quartz2D绘图（给图形绘制阴影）
quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...
matlab图形绘制经典案例,MATLAB经典教程第四章_图形绘制.ppt
<MATLAB经典教程第四章_图形绘制.ppt>由会员分享,可在线阅读,更多相关<MATLAB经典教程第四章_图形绘制.ppt(32页珍藏版)>请在人人文库网上搜索. 1.Ma ...
python基本图形绘制_【Python】Python基本图形绘制-Go语言中文社区
1.Python蟒蛇图形绘制: 代码: #PythonDraw.py import turtle turtle.setup(650, 350, 200, 200) turtle.penup() tur ...

Cesium图形绘制

1.文字绘制

效果图

2.图标绘制

效果图

3.立方体

效果图

4.圆和椭圆

效果图

5.走廊

效果图

6.圆柱和圆锥

效果图

7.多边形

效果图

8.线段

效果图

9.球和椭圆

效果图

10.墙

效果图

Cesium图形绘制相关推荐

最新文章

热门文章