主页 | 歪脖祭司

项目名称

项目详细描述

文章名称

文章详细描述

自定义项目

自定义详细介绍

01、cesium加载地球与环境搭建

1、搭建vue3项目

使用vite进行搭建。

npm init vite@latest

根据操作提示选择：vue 3 + Typescript

2、下载cesium库

终端输入：

npm install cesium

祭司唐大约 2 分钟

02、cesium中viewer详解

以下为cesium中viewer的一些常用的配置。

 const viewer = new Cesium.Viewer("view_container",{
    infoBox:false,//小弹窗
    animation:false,//左下角动画仪表盘
    baseLayerPicker:false,//右上角图层选择按钮
    geocoder:false,//搜索框
    homeButton:false,//home按钮
    sceneModePicker:false,//模式切换按钮
    timeline:false,//底部时间轴
    navigationHelpButton:false,//右上角帮助按钮
    fullscreenButton:false,//右下角全屏按钮
    selectionIndicator:false,//选择指示器
     //配置天空盒子
    skyBox:new Cesium.skyBox({
          sources : {
            positiveX : 'skybox_px.png',
            negativeX : 'skybox_nx.png',
            positiveY : 'skybox_py.png',
            negativeY : 'skybox_ny.png',
            positiveZ : 'skybox_pz.png',
            negativeZ : 'skybox_nz.png'
          }
     })
 });

祭司唐小于 1 分钟

03、cesium添加图层

1、添加影像数据

利用viewer的imageryLayer属性，调用其addImageryProvider()方法向imageryLayer中添加一个ImageryProvider对象。

//添加图层
const imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: "http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",
        credit:"Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    })
);

祭司唐小于 1 分钟

04、cesium中的API 关系

此篇章暂时没有捋清楚，暂时停笔，详情参考：

Cesium API使用指南1 - 知乎 (zhihu.com)

Cesium API 模块结构图_cesium架构图

祭司唐小于 1 分钟

05、camera

相机由位置、方向和视锥体定义。

1、相机位置

Cesium中的相机位置通过destination来确定，position指的是相机位置的三维坐标（可以用经纬度和大地高表达，也可以用笛卡尔坐标来表达），让相机飞到对应的位置：

//天安门经纬度转笛卡尔坐标
const position = Cesium.Cartesian3.fromDegrees(116.390512,39.913574,1000);
viewer.camera.setView({
	destination: position,
});

祭司唐大约 3 分钟

06、实体Entity

Entity API 公开一组设计一致的高级对象，这些对象将相关的可视化效果和信息聚合到统一的数据结构中，称之为实体。

专注于数据的呈现，而不是担心可视化的潜在机制。
提供了结构，以便以自然适合静态数据的方式轻松构建复杂的时间动态可视化。

虽然实体 API 实际上在后台使用原始 API，但这是（几乎）永远不必关注的实现细节。通过将各种启发式方法应用于我们提供的数据，实体 API 能够提供灵活、高性能的可视化效果，同时公开一致、易于学习且易于使用的界面。

祭司唐大约 2 分钟

07、图元Primitive

Primitive API 公开了执行手头任务所需的最小抽象量。它的结构是为图形开发人员提供灵活的实现，而不是为了 API 一致性。加载模型与创建广告牌不同，两者都与创建多边形完全不同。每种类型的可视化都有其独特的功能。此外，每个都有不同的性能特征，需要不同的最佳实践。虽然这种方法功能强大且灵活，但大多数应用程序最好使用更高级别的抽象。

1、创建贴地几何

获取viewer的scene属性对象
```
const scene = viewer.scene;
```

创建几何要素实例

  const instance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-100, 20, -90, 30),
      vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
    }),
  });

在scene属性上的primitives属性上添加单个图元实例
```
scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: instance,
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: Cesium.Material.fromType("Stripe"),
      }),
    })
  );
```
注意

关于appearance有：
其中EllipsoidSurfaceAppearance适用于贴地的外观，PerInstanceColorAppearance适用于自定义的颜色属性。

祭司唐大约 2 分钟

08、ScreenSpaceEventHandler

GeometryInstance 绘制后仍然是可以独立访问的，只需分配一个 id 即可。

    //自定义属性颜色
  const instance_red = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-85, 20, -75, 30),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    }),
    id: "red",
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(1, 0, 0, 0.8),
    },
  });
  const instance_yellow = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-65, 20, -55, 30),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    }),
    id: "yellow",
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA),
    },
  });
  //拾取要素
  const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction(function (movement: any) {
    const pick = scene.pick(movement.position);
    if (Cesium.defined(pick)) {
      console.log(pick.id);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

祭司唐小于 1 分钟

09、材质

所有形状和体积都有一组控制其外观的通用属性。该属性指定是否填充几何图形，该属性指定是否轮廓几何图形。材料属性决定了填充的外观。下面创建一个半透明的蓝色椭圆:

1、多边形

const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse: {
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    material: Cesium.Color.BLUE.withAlpha(0.5),
  },
});
viewer.zoomTo(viewer.entities);

const ellipse = entity.ellipse; // For upcoming examples

祭司唐大约 1 分钟

10、Cesium加载多源数据

1、GeoJSON

调用Cesium.GeoJsonDataSource():处理GeoJSON和TopoJSON数据的数据源。

第一种加载方式：

const loadGeoJSON = () => {
  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load(
       "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
       {
         stroke: Cesium.Color.fromCssColorString("#048dfa"), //折线和多边形轮廓的默认颜色。
         fill: Cesium.Color.fromCssColorString("#afd6f0"), //填充颜色#048dfa
         strokeWidth: 3, //轮廓宽度
         markerSymbol: "?", //为每个点创建的地图图钉的默认符号。
       }
     )
   );
};

第二种加载方式：

const loadGeoJSON = ()=>{
  //因为加载是Ajax请求，所以可以使用以下方式加载
  Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    {
      stroke: Cesium.Color.fromCssColorString("#048dfa"), //折线和多边形轮廓的默认颜色。
      fill: Cesium.Color.fromCssColorString("#afd6f0"), //填充颜色#048dfa
      strokeWidth: 3, //轮廓宽度
      markerSymbol: "?", //为每个点创建的地图图钉的默认符号。
    }
  ).then((dataSources: Cesium.GeoJsonDataSource) => {
    viewer.dataSources.add(dataSources);
  });
};

祭司唐大约 6 分钟