vue3.x +Cesium Cesium 如何加载空间数据，如何管理空间数据，加载实体，entities添加几何体，管理集合体等（四）

vue3.x在cesium中加载空间数据，管理空间数据，entities添加实体等

随便起的名字也被占用

4309人浏览 · 2022-05-10 23:18:04

随便起的名字也被占用 · 2022-05-10 23:18:04 发布

cesium 通过 viewer.entities.add() 添加空间数据（实体）到地图上

point：点的添加

  // 点
      var position = new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)
      const entity = window.viewer.entities.add({
        position: position,
        point: {
          pixelSize: 72,
          color: new Cesium.Color(1, 0, 0, 1)
        },
        label: {
          text: "我是一个点",
          font: "100px HelVetica",
          fillColor: Cesium.Color.RED
        }
      })

polyline：线的添加

 // 线

      const lineEntity = window.viewer.entities.add({
        polyline: {
          show: true,
          positions: new Cesium.Cartesian3.fromDegreesArray([116.39, 39.91, 116.40, 39.91, 116.40, 39.92]),
          width: 5,
          material: new Cesium.Color(0, 0, 1, 1),
        }
      })

plane：面的添加

  var position2 = new Cesium.Cartesian3.fromDegrees(116.40, 39.92, 0)
      const entityPlane = window.viewer.entities.add({
        position: position2,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 100),//确认面的朝向
          dimensions: new Cesium.Cartesian3(400, 300),//确认面的长宽
          material: Cesium.Color.RED.withAlpha(0.5),//颜色
          outline: true,//外边框是都显示
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY
        },

      })

添加文字

  // 添加文字
      const texts = window.viewer.entities.add({
        position: position2,
        label: {
          text: "没有名字",
          font: "100px HelVetica",
          fillColor: Cesium.Color.SKYBLUE
        }
      })

在面上填充图片

 // 面上添加图片
      var position3 = new Cesium.Cartesian3.fromDegrees(116.40, 39.90, 0)
      const planImg = window.viewer.entities.add({
        position: position3,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0),//确认面的朝向
          dimensions: new Cesium.Cartesian3(600, 600),//确认面的长宽
          material: require('/public/img/pic1.jpg'),//填充颜色 填充图片
          outline: true,
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY
        },
      })

polygon：添加一个多边形，主要

hierarchy: Cesium.Cartesian3.fromDegreesArray([116.42, 39.91, 116.42, 39.915, 116.41, 39.91])

 // entities 添加一个多边形
      var redPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.42, 39.91, 116.42, 39.915, 116.41, 39.91]),
          material: Cesium.Color.RED,
          extrudedHeight: 200
        }
      })

extrudedHeight:200 将图形拉伸200，变成立体几何体，如下图示例

添加多个图形

var redPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.42, 39.91, 116.42, 39.915, 116.41, 39.91]),
          material: Cesium.Color.RED,
          extrudedHeight: 200
        }
      })

      var bluePolygon = window.viewer.entities.add({
        id: "bluePolygon",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.43, 39.92, 116.43, 39.93, 116.41, 39.92]),
          material: Cesium.Color.BLUE,
          extrudedHeight: 200
        }
      })
      var yellowPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.44, 39.92, 116.44, 39.93, 116.42, 39.90]),
          material: Cesium.Color.YELLOW,
          extrudedHeight: 200
        }
      })

删除指定模型 entities.remove(variableName) variableName创建实体的变量

  var yellowPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.44, 39.92, 116.44, 39.93, 116.42, 39.90]),
          material: Cesium.Color.YELLOW,
          extrudedHeight: 200
        }
      })

      // 删除指定的模型 entities.remove(yellowPolygon)
      window.viewer.entities.remove(yellowPolygon)

getById 通过生成的集合体的id 去修改绑定的属性

 var bluePolygon = window.viewer.entities.add({
        id: "bluePolygon",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.43, 39.92, 116.43, 39.93, 116.41, 39.92]),
          material: Cesium.Color.BLUE,
          extrudedHeight: 200
        }
      })

  // getById 通过生成的集合体的id 去修改绑定的属性
      window.viewer.entities.getById("bluePolygon").polygon.material = Cesium.Color.GREEN
      window.viewer.entities.getById("bluePolygon").polygon.extrudedHeight = 500

清空所有实体清除加载的几何体

  // 清空所有实体 清除加载的几何体
  window.viewer.entities.removeAll()

全部组件代码：

<template>
  <div class="map-box">
    <div id="entities-model"></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";

export default {
  name: "",
  mounted() {

  },
  setup() {

    onMounted(() => {

      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)// 默认定位到中国上空，home定位到中国范围

      var esri = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
      })
      window.viewer = new Cesium.Viewer("entities-model", {
        baseLayerPicker: false, //是否显示图层选择控件
        // imageryProvider 设置试图图层
        imageryProvider: esri,
        //加载地形
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1),//地形服务器的地址
          requestVertexNormals: true,//增加光照效果
          requestWaterMask: true,//增加水波纹效果
        }),
      });
      // 隐藏版权
      window.viewer._cesiumWidget._creditContainer.style.display = "none";

      window.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 5000.0),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0
        }
      })
      // 如何加载 空间数据

      // 点
      var position = new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)
      const entity = window.viewer.entities.add({
        position: position,
        point: {
          pixelSize: 72,
          color: new Cesium.Color(1, 0, 0, 1)
        },
        label: {
          text: "我是一个点",
          font: "100px HelVetica",
          fillColor: Cesium.Color.RED
        }
      })

      // 线

      const lineEntity = window.viewer.entities.add({
        polyline: {
          show: true,
          positions: new Cesium.Cartesian3.fromDegreesArray([116.39, 39.91, 116.40, 39.91, 116.40, 39.92]),
          width: 5,
          material: new Cesium.Color(0, 0, 1, 1),
        }
      })

      // 面
      var position2 = new Cesium.Cartesian3.fromDegrees(116.40, 39.92, 0)
      const entityPlane = window.viewer.entities.add({
        position: position2,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 100),//确认面的朝向
          dimensions: new Cesium.Cartesian3(400, 300),//确认面的长宽
          material: Cesium.Color.RED.withAlpha(0.5),//颜色
          outline: true,//外边框是都显示
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY
        },

      })
      // 添加文字
      const texts = window.viewer.entities.add({
        position: position2,
        label: {
          text: "没有名字",
          font: "100px HelVetica",
          fillColor: Cesium.Color.SKYBLUE
        }
      })
      // 面上添加图片
      var position3 = new Cesium.Cartesian3.fromDegrees(116.40, 39.90, 0)
      const planImg = window.viewer.entities.add({
        position: position3,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0),//确认面的朝向
          dimensions: new Cesium.Cartesian3(600, 600),//确认面的长宽
          material: require('/public/img/pic1.jpg'),//填充颜色 填充图片
          outline: true,
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY
        },

      })

      // 如何管理空间数据  增删改
      // entities 添加一个多边形
      var redPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.42, 39.91, 116.42, 39.915, 116.41, 39.91]),
          material: Cesium.Color.RED,
          extrudedHeight: 200
        }
      })

      var bluePolygon = window.viewer.entities.add({
        id: "bluePolygon",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.43, 39.92, 116.43, 39.93, 116.41, 39.92]),
          material: Cesium.Color.BLUE,
          extrudedHeight: 200
        }
      })
      var yellowPolygon = window.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([116.44, 39.92, 116.44, 39.93, 116.42, 39.90]),
          material: Cesium.Color.YELLOW,
          extrudedHeight: 200
        }
      })

      // 删除指定的模型 entities.remove(yellowPolygon)
      window.viewer.entities.remove(yellowPolygon)
      // getById 通过生成的集合体的id 去修改绑定的属性
      window.viewer.entities.getById("bluePolygon").polygon.material = Cesium.Color.GREEN
      window.viewer.entities.getById("bluePolygon").polygon.extrudedHeight = 500
      // 清空所有实体 清除加载的几何体
      // window.viewer.entities.removeAll()

    })
    return {}
  }
};
</script> 
<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .cesium-camera-methods {
    width: 160px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
  }
}

#imagery-terrain {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>

效果图：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...