cesium 散点知识

一、entity属性值修改 

setVlaue()

getValue()

例:viewer.entities._entities._array[0]._polygon._outlineColor.setValue(Cesium.Color.BLUE.withAlpha(0));

二、加载3D模型(primitive)

 var origin = Cesium.Cartesian3.fromDegrees(113.778584, 34.759197, 200000.0);
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);

    var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
      url: './imgs/pao2.gltf',
      show: true,                     // default
      modelMatrix: modelMatrix,
      scale: 2.0,                     // 模型尺寸大小
      minimumPixelSize: 128,          // 模型最小像素
      maximumScale: 20000,             //模型最大尺寸 never larger than 20000 * model size (overrides minimumPixelSize)
    }));

三、cesium-navigation-es6插件(罗盘,导航仪(放大/缩小)和距离刻度)

import CesiumNavigation from "cesium-navigation-es6";
CesiumNavigation(viewer, {
  enableCompass: true, //启用罗盘
  enableCompassOuterRing: true, //启用指南针
  enableZoomControls: true, //缩放控件
});

四、绘制虚线 虚线圆

//虚线
var polyline1 = viewer.entities.add({
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          110.0,
          50.1,
          112.0,
          50.1
        ]),
        width: 3,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.YELLOW,
          dashLength: 20 //短划线长度
        })
      }
    });

//虚线圆
var scene = viewer.scene;
    var center = Cesium.Cartesian3.fromDegrees(120, 30);
    var radius = 250000.0;
    var solidWhite = Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOW);
    var circleOutlineInstance = new Cesium.GeometryInstance({
      geometry: new Cesium.CircleOutlineGeometry({
        center: center,
        radius: radius
      }),
      attributes: {
        color: solidWhite
      }
    });
    var circleOutlineInstance1 = new Cesium.GeometryInstance({
      geometry: new Cesium.CircleOutlineGeometry({
        center: Cesium.Cartesian3.fromDegrees(124, 30),
        radius: 250000
      }),
      attributes: {
        color: solidWhite
      }
    });
    var circleOutlineInstance2 = new Cesium.GeometryInstance({
      geometry: new Cesium.CircleOutlineGeometry({
        center: Cesium.Cartesian3.fromDegrees(104, 30),
        radius: 250000
      }),
      attributes: {
        color: solidWhite
      }
    });
    scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: [circleOutlineInstance, circleOutlineInstance1, circleOutlineInstance2],
        appearance: new Cesium.PolylineMaterialAppearance({
          material: Cesium.Material.fromType(Cesium.Material.PolylineDashType, {
            color: Cesium.Color.CYAN, //线条颜色
            gapColor: Cesium.Color.TRANSPARENT, //间隔颜色
            dashLength: 20 //短划线长度
          })
        })
      })
    );
    var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(104, 30, 2.61),
      point: {
        color: Cesium.Color.RED, //点位颜色
        pixelSize: 10 //像素点大小
      },
      label: {
        text: 'label名',
        font: '14pt Source Han Sans CN', //字体样式
        fillColor: Cesium.Color.BLACK, //字体颜色
        backgroundColor: Cesium.Color.AQUA, //背景颜色
        showBackground: true, //是否显示背景颜色
        style: Cesium.LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
        pixelOffset: new Cesium.Cartesian2(10, 0) //偏移
      }
    });

    viewer.zoomTo(entity);//居中到该点

五、实体类相关

1、设置广告牌、文本等实体类远小近大的视觉感 

scaleByDistance: new Cesium.NearFarScalar(2000, 1, 8000, 0),

含义就是在摄像头和Billboard之间的距离在2000-8000之间的时候,Billboard的Scale比例按照1->0之间的插值来缩放。当摄像头和Billboard之间距离小于2000的时候,就按照2000时候的值1处理(这里如果不是1,而是0.5,那小于2000时候的比例就是0.5了)。而当大于8000的时候,就会按照0(其实就是8000对应的比例值)缩放

2、开启地形(高程)避免遮挡

eyeOffset: new Cesium.Cartesian3(0, 0, -10000)

设置为负值,使其在更上层

六、边界5公里范围绘制(缓冲区)

 var radius = 5;
$.getJSON("边界.json", function (areaData)
{
  var polygon = areaData.features[0].geometry.coordinates[0];
  var buffered = turf.buffer(turf.polygon(polygon), radius, { units: 'kilometers' });
  wcesium.addPolygon(buffered);
})

七、虚线(设置地下材质 depthFailMaterial)

viewer.entities.add({
        name: "",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(jsonline),
          width: 4,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: linecolor,
            outlineWidth: 0.1,
            outlineColor: l2,
          }),
          depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
            color: linecolor,
            outlineWidth: 0.1,
            outlineColor: l2,
          }),
        },
      });

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值