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

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.GREENwindow.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.GREENwindow.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>

效果图：

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

Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
Cesium源码解析一（terrain文件的加载、解析与渲染全过程梳理）
快速导航(持续更新中-) Cesium源码解析一(terrain文件的加载.解析与渲染全过程梳理) Cesium源码解析二(metadataAvailability的含义) Cesium源码解析三(m ...
第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
Vue3.0+Openlayers+Cesium创建二三维联动项目简介 Vue项目创建安装依赖框架结构地图加载显示效果结语简介大家好!从今天开始,我将分享我在GIS开发的过程中如何利用 ...
vue3.x +Cesium Cesium 鼠标交互，鼠标点击拾取对象等（五）
cesium地图上鼠标点击事件 1.创建屏幕控制实例 var handlClick = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas) ...
分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
R语言保存加载工作空间或者工作空间数据对象实战（Save Load RData Workspace）
R语言保存加载工作空间或者工作空间数据对象实战(Save & Load RData Workspace) 目录 R语言保存加载工作空间或者工作空间数据对象实战(Save & Load ...
基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目基于Vite构建项目安装配置Cesium 创建Cesium三维视图运行结果随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
html页面判断其他div为空,将外部html加载到div中 - 页面加载然后变为空白
我确信这将会变成一件愚蠢的事情,但是自从我成为JavaScript noob以来,这里就变成了一件愚蠢的事情.将外部html加载到div中 - 页面加载然后变为空白我想外部HTML内容加载到我的索引 ...

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

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

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

最新文章

热门文章