Cesium学习教程+笔记(Mars3D) 图层图层组矢量数据

最新推荐文章于 2024-08-08 16:00:22 发布

小陈爱编程

最新推荐文章于 2024-08-08 16:00:22 发布

阅读量3.6k

点赞数

分类专栏：记录知识文章标签：前端 web vue gis js

本文链接：https://blog.csdn.net/a1578460233/article/details/119456865

版权

本文介绍了Cesium中的图层和图层组管理，包括新建、销毁图层和图层组，以及如何将图层添加到图层组和地图上。同时详细讲解了矢量数据的多种类型，如点、线、面等，并强调图层组在复杂场景中的重要性，用于集中管理和控制图层。

摘要由CSDN通过智能技术生成

图层与图层组

为什么需要了解图层组?图层与图层组又是啥关系?

之前学过的点线面都是矢量数据 , 添加到矢量图层直接到地图上的

var tucengdian = new mars3d.layer.GraphicLayer(); //新建矢量图层
      map.addLayer(tucengdian); //把矢量图层绑定到map地图上
      var graphic = new mars3d.graphic.PointEntity({
        //PointEntity 像素点对象
        position: [108, 30], //坐标
        style: {
          //样式
          color: "pink", //颜色
          pixelSize: 10, //大小
          outline: true, //是否边框
          outlineColor: "#ffffff", //边框颜色
          outlineWidth: 2, //边框大小
        },
      });
tucengdian.addGraphic(graphic); //把刚刚创建的像素点添加到矢量图层上

然而只是一个图层 , 或者只是控制图层在复杂的场景已经远远不能满足需求

比如之前的台风案例 , 控制整个台风的显示与隐藏居然涉及到这么多图层的控制,非常麻烦 ,如果同时有多个台风就显得非常乏力

所以需要图层组来集中控制 ,集中管理

图层

图层其实有很多很多,万变不离其宗其实就是用来放一些东西而已

比如矢量数据的点线面,就是放入矢量图层的

下面的例子以矢量数据为例

新建图层

let GraphicLayer = new mars3d.layer.GraphicLayer();  //新建矢量图层

销毁图层

GraphicLayer.remove();

添加矢量数据

addGraphic.addGraphic(graphic); //graphic 是矢量数据内容

图层组

图层组集中管理图层 , 集中

新建图层组

let GroupLayer = new mars3d.layer.GroupLayer(); //新建图层组

销毁图层组

GroupLayer.remove(); //销毁图层组

添加图层到图层组

//新建矢量图层添加到图层组
let GraphicLayer = new mars3d.layer.GraphicLayer();
GroupLayer.addLayer(GraphicLayer);

图层组添加到地图上

图层组不能直接放到地图上否则之后放入的数据将不再渲染

必须要在所有数据添加完毕了再放到地图上

 this.map.addLayer(graphicLayer);

图层与图层组的疑问

序号	问题	回答
1	图层能直接添加到地图吗?	可以
2	图层内能添加图层吗?	不能
3	矢量数据能直接添加到地图上吗?	不能
4	图层组内可以添加图层组吗?	可以
5	图层组内可以添加矢量数据吗?	不能
6	地图可以添加多个图层组吗?	可以

矢量数据

矢量数据需要放到矢量图层中 , 常见的矢量数据点线面等等

像素点 PointEntity

var tucengdian = new mars3d.layer.GraphicLayer(); //新建图层
      map.addLayer(tucengdian); //把图层绑定到map地图上
      var graphic = new mars3d.graphic.PointEntity({
        //PointEntity 像素点对象
        position: [108, 30], //坐标
        style: {
          //样式
          color: "pink", //颜色
          pixelSize: 10, //大小
          outline: true, //是否边框
          outlineCo