Cesium Vue(五)— 绘制多边形

1. 使用entity创建矩形

js 复制代码
      var rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        // 西边的经度
        90,
        // 南边维度
        20,
        // 东边经度
        110,
        // 北边维度
        30
      ),
      material: Cesium.Color.GREEN.withAlpha(0.8),
    },

2. 使用primivite创建矩形

js 复制代码
   // primivite创建矩形
  // 01-创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      // 西边的经度
      115,
      // 南边维度
      20,
      // 东边经度
      135,
      // 北边维度
      30
    ),
    // 距离表面高度
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });

  // 02-创建几何体实例
  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });

  // 03-设置外观
  let appearance = new Cesium.PerInstanceColorAppearance({
    flat: true,
  });
  // 04-图元
  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: appearance,
  });
  // 05-添加到viewer
  viewer.scene.primitives.add(primitive);

  viewer.camera.setView(viewer.entities);

3. 创建多个实体在同一个primitive

js 复制代码
 // 04-图元
  let primitive = new Cesium.Primitive({
    geometryInstances: [instance, instance2],// 在数组geometryInstances 中添加多个实体
    appearance: appearance,
  });

4. 修改primitive颜色

js 复制代码
  // 动态修改图元颜色
  setInterval(() => {
    let attributes = primitive.getGeometryInstanceAttributes("blueRect");
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
      // Cesium.Color.YELLOW.withAlpha(0.5)
      Cesium.Color.fromRandom({
        alpha: 0.5,
      })
    );
  }, 2000);
  });

5. primitive和entity物体交互

js 复制代码
// 拾取
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function (movement) {
    // console.log(movement);
    // scene.pick选中物体
    var pickedObject = viewer.scene.pick(movement.position);
    console.log(pickedObject);
    if (Cesium.defined(pickedObject) && typeof pickedObject.id == "string") {
      // console.log(pickedObject.id);
      let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        Cesium.Color.YELLOW.withAlpha(0.5)
      );
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
相关推荐
Edward-tan1 小时前
【玩转全栈】--创建一个自己的vue项目
前端·javascript·vue.js
青年夏日科技工作者1 小时前
虚幻浏览器插件 UE与JS通信
前端·javascript·html
雷神乐乐2 小时前
创建前端项目的方法
前端·javascript·vue.js
prince_zxill2 小时前
JavaScript面向对象编程:Prototype与Class的对比详解
前端·javascript·ecmascript·原型模式
计算机-秋大田3 小时前
基于SpringBoot的美食烹饪互动平台的设计与实现(源码+SQL脚本+LW+部署讲解等)
vue.js·spring boot·后端·课程设计·美食
D.eL3 小时前
Vue 2 项目中 Mock.js 的完整集成与使用教程
前端·javascript·vue.js
轻口味4 小时前
Vue.js 响应式引用与响应式数据(`ref` 和 `reactive`)
vue.js
prince_zxill4 小时前
Node.js 和 npm 安装教程
前端·javascript·vue.js·npm·node.js
弄不死的强仔5 小时前
可被electron等调用的Qt截图-录屏工具【源码开放】
前端·javascript·qt·electron·贴图·qt5
霸王蟹5 小时前
el-table组件样式如何二次修改?
前端·javascript·vue.js·笔记·学习·前端框架