Cesium基础-（Entity）-（point）
**
里边包含Vue、React框架代码
**
1、point 点
效果：
Cesium中点(Point)的详细解读如下：
-
Entity API简介：
Cesium提供了Entity API，它是一个高级别的数据驱动的API，用于管理一组相关性的可视化对象。Entity API使用一致性设计的、高级别的对象来管理这些对象，其底层使用Primitive API。 -
点的创建：
在Cesium中，点是通过Entity对象的point属性来创建的。可以通过viewer.entities.add方法添加一个新的Entity对象，其中包含点的属性。 -
点的属性：
position：点的位置，可以使用Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度)来指定。pixelSize：点的大小，单位为像素。color：点的颜色，可以使用Cesium.Color.fromCssColorString('#颜色代码')来指定。outlineColor：点的轮廓线颜色。outlineWidth：点的轮廓线宽度，单位为像素。distanceDisplayCondition：点在该视角距离内可见，其他距离不可见。show：是否显示点。
-
点的样式化：
点的样式可以通过PointGraphics对象来定义，包括大小、颜色、轮廓等属性。 -
点的高程参考：
heightReference：高程参考面，可以设置为Cesium.HeightReference.NONE（无参考面，点的高程值是绝对值）或者Cesium.HeightReference.CLAMP_TO_GROUND（点贴地）。
-
点的缩放和透明度：
scaleByDistance：点的大小随视角的距离缩放，使用Cesium.NearFarScalar(近处距离, 近处缩放倍数, 远处距离, 远处缩放倍数)来定义。translucencyByDistance：点的透明度随视角的距离变化，同样使用Cesium.NearFarScalar来定义。
-
点的显示和隐藏：
disableDepthTestDistance：小于该数值后关闭深度检测。
-
点的事件处理：
可以为点添加点击事件，通过ScreenSpaceEventHandler来实现。 -
点的删除：
可以通过viewer.entities.removeAll()删除所有点，或者通过viewer.entities.remove(getByIdBoxs)删除指定ID的点。
以上是Cesium中点的详细解读，包括点的创建、属性设置、样式化、事件处理和删除等。通过这些属性和方法，可以在Cesium中实现丰富的点状地理实体的可视化效果。
代码：
addPoints(viewer) {
// 主要城市的地理位置数据
const cities = [
{ name: '北京', position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9085) },
{ name: '上海', position: Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) },
{ name: '广州', position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291) },
// 更多城市...
];
cities.forEach(city => {
let entity = viewer.entities.add({
position: city.position,
point: {
color: Cesium.Color.RED, // 颜色
pixelSize: 10, // 像素大小
outlineColor: Cesium.Color.YELLOWGREEN, // 边框颜色
outlineWidth: 2, // 边框大小
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
});
viewer.trackedEntity = entity; // 追踪最后一个添加的城市
});
}
要在Vue代码环境下运行上述代码，你需要确保几个条件已经满足：
-
Cesium库的引入：确保你的项目中已经引入了Cesium库。可以通过npm安装或者直接在HTML中通过
<script>标签引入。 -
Vue组件结构：你需要一个Vue组件来承载Cesium Viewer。
-
Cesium Viewer的初始化：在Vue组件中初始化Cesium Viewer。
1、下面是如何将上述代码集成到Vue项目中的步骤：
步骤 1: 安装Cesium
如果你还没有安装Cesium，可以通过npm来安装：
npm install cesium
步骤 2: 创建Vue组件
创建一个新的Vue组件，比如CesiumMap.vue，并在其中初始化Cesium Viewer。
<template>
<div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
<script>
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';
export default {
name: 'CesiumMap',
data() {
return {
viewer: null,
};
},
mounted() {
this.initCesium();
},
methods: {
initCesium() {
// 初始化Cesium Viewer
this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 1 }),
});
// 添加点
this.addPoints();
},
addPoints() {
const cities = [
{ name: '北京', position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9085) },
{ name: '上海', position: Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) },
{ name: '广州', position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291) },
// 更多城市...
];
cities.forEach((city) => {
let entity = this.viewer.entities.add({
position: city.position,
point: {
color: Cesium.Color.RED,
pixelSize: 10,
outlineColor: Cesium.Color.YELLOWGREEN,
outlineWidth: 2,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
if (cities.indexOf(city) === cities.length - 1) {
this.viewer.trackedEntity = entity;
}
});
},
},
};
</script>
步骤 3: 在父组件中使用
在你的父组件中引入并使用CesiumMap组件。
<template>
<div>
<CesiumMap />
</div>
</template>
<script>
import CesiumMap from './CesiumMap.vue';
export default {
components: {
CesiumMap,
},
};
</script>
步骤 4: 确保样式和资源加载
确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。
步骤 5: 运行你的Vue应用
确保你的Vue应用能够正确运行，并且Cesium Viewer和点的添加功能能够正常工作。
这样，你就可以在Vue环境中运行上述代码，实现在Cesium地图上添加点的功能。
2、要在React环境中运行上述代码，你需要遵循以下步骤：
步骤 1: 创建React项目
如果你还没有创建一个React项目，可以使用Create React App来快速开始：
npx create-react-app cesium-react-app
cd cesium-react-app
步骤 2: 安装Cesium
通过npm安装Cesium：
npm install cesium
步骤 3: 创建Cesium组件
创建一个新的React组件，比如CesiumMap.js，并在其中初始化Cesium Viewer。
import React, { useRef, useEffect, useState } from 'react';
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';
const CesiumMap = () => {
const cesiumContainerRef = useRef(null);
const [viewer, setViewer] = useState(null);
useEffect(() => {
// 初始化Cesium Viewer
const viewerInstance = new Cesium.Viewer(cesiumContainerRef.current, {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 1 }),
});
setViewer(viewerInstance);
return () => {
// 清理资源，销毁viewer实例
viewerInstance.destroy();
};
}, []);
useEffect(() => {
if (viewer) {
addPoints(viewer);
}
}, [viewer]);
const addPoints = (viewer) => {
const cities = [
{ name: '北京', position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9085) },
{ name: '上海', position: Cesium.Cartesian3.fromDegrees(121.4737, 31.2304) },
{ name: '广州', position: Cesium.Cartesian3.fromDegrees(113.2644, 23.1291) },
// 更多城市...
];
cities.forEach((city) => {
let entity = viewer.entities.add({
position: city.position,
point: {
color: Cesium.Color.RED, // 颜色
pixelSize: 10, // 像素大小
outlineColor: Cesium.Color.YELLOWGREEN, // 边框颜色
outlineWidth: 2, // 边框大小
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
},
});
if (cities.length - 1 === cities.indexOf(city)) {
viewer.trackedEntity = entity; // 追踪最后一个添加的城市
}
});
};
return (
<div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
);
};
export default CesiumMap;
步骤 4: 在App组件中使用CesiumMap组件
在你的App.js中引入并使用CesiumMap组件。
import React from 'react';
import CesiumMap from './CesiumMap';
function App() {
return (
<div className="App">
<CesiumMap />
</div>
);
}
export default App;
步骤 5: 确保样式和资源加载
确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。
步骤 6: 运行你的React应用
确保你的React应用能够正确运行，并且Cesium Viewer和点的添加功能能够正常工作。
npm start
注意事项
-
清理资源：在
useEffect的返回函数中，我们调用了viewerInstance.destroy()来清理资源，这是为了防止内存泄漏。 -
CORS问题：如果你从不同的源加载数据，可能会遇到跨源资源共享（CORS）问题。确保服务器配置了正确的CORS策略。
-
Cesium版本：确保你使用的Cesium版本与代码兼容。不同版本的Cesium可能有不同的API。
通过以上步骤，你就可以在React环境中运行上述代码，实现在Cesium地图上添加点的功能。