图层与图层组

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

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

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, //是否边框
          outlineColor: "#ffffff", //边框颜色
          outlineWidth: 2, //边框大小
        },
      });
tucengdian.addGraphic(graphic); //把刚刚创建的像素点添加到图层上

线 PolylineEntity

var tucengxian = new mars3d.layer.GraphicLayer(); //新建图层
      map.addLayer(tucengxian); //把图层绑定到map地图上
      var graphic = new mars3d.graphic.PolylineEntity({
        //PolylineEntity 线
        positions: [
          //坐标 --线是直至少两点组成的,所有需要二维数组坐标
          [108, 30],
          [108, 31],
        ],
        style: {
          width: 6,
          material: mars3d.MaterialUtil.createMaterialProperty(
            //新建材质线
            mars3d.MaterialType.PolylineOutline, //线的材质
            {
              color: Cesium.Color.ORANGE, //线的颜色
              outlineWidth: 2, //线的轮廓宽度
              outlineColor: Cesium.Color.BLACK, //线的轮廓颜色
            }
          ),
        },
      });
tucengxian.addGraphic(graphic);//把线添加到图层中

圆 CircleEntity

var tucengyuan = new mars3d.layer.GraphicLayer(); //新建图层
     map.addLayer(tucengyuan); //把图层绑定到map地图上
      let graphic = new mars3d.graphic.CircleEntity({
        //圆对象
        position: [116.1, 30.9, 1000], //坐标
        style: {
          //样式
          radius: 180000, //半径
          color: "#00ff00", //颜色
          opacity: 0.3, //透明度
          outline: true, //是否显示轮廓
          outlineWidth: 3, //轮廓宽度
          outlineColor: "#ffffff", //轮廓颜色
        },
      });
      tucengyuan.addGraphic(graphic);//把圆添加到图层上

面 PolygonEntity

var tucengyuan = new mars3d.layer.GraphicLayer(); //新建图层
      map.addLayer(tucengyuan); //把图层绑定到map地图上
      var graphic = new mars3d.graphic.PolygonEntity({
        //面
        positions: [
          //坐标
          [116.510278, 25.834372],
          [110.530085, 30.809331],
          [116.507367, 30.788551],
          [116.472468, 30.823091],
        ],
        style: {
          //样式
          color: "pink", //颜色
          opacity: 0.7, //透明
          outline: true, //是否开启轮廓
          outlineWidth: 0, //轮廓宽度
        },
      });
      tucengyuan.addGraphic(graphic); //添加多边形到图层上

文字 LabelEntity

let graphic = new mars3d.graphic.LabelEntity({
        position: new mars3d.LatLngPoint(116.1, 31.0, 1000),
        style: {
          text: "小陈爱编程",
          font_size: 25,
          font_family: "楷体",
          color: "#003da6",
          outline: true,
          outlineColor: "#bfbfbf",
          outlineWidth: 2,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          visibleDepth: false,
        },
      });
this.GraphicLayer.addGraphic(graphic);

图标点 BillboardEntity

 let graphic = new mars3d.graphic.BillboardEntity({
        name: "贴地图标",
        position: [116.3, 31.0, 1000],
        style: {
          image: require("../assets/logo.png"),
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
        },
      });
this.GraphicLayer.addGraphic(graphic);

平面 PlaneEntity

let graphic = new mars3d.graphic.PlaneEntity({
        position: new mars3d.LatLngPoint(116.4, 31.0, 1000),
        style: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          dimensions: new Cesium.Cartesian2(4000.0, 4000.0),
          material: mars3d.MaterialUtil.createMaterialProperty(
            mars3d.MaterialType.Image,
            {
              image: require("../assets/movingRiver.png"),
              transparent: true,
            }
          ),
        },
      });
      this.GraphicLayer.addGraphic(graphic);

盒子 BoxEntity

let graphic = new mars3d.graphic.BoxEntity({
        position: new mars3d.LatLngPoint(116.5, 31.0, 1000),
        style: {
          dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
          fill: true,
          color: '#00ffff',
          opacity: 0.9,
          heading: 45,
          roll: 45,
          pitch: 0,
        },
      })
this.GraphicLayer.addGraphic(graphic);

其他类型

类型太多了,这里就不一一介绍了从左到右按顺序依次

圆 , 圆柱 CircleEntity

圆锥 CylinderEntity

球 , 半球 , 椭球 EllipsoidEntity

gltf小模型 ModelEntity

线 PolylineEntity

管道线 PolylineVolumeEntity

走廊 CorridorEntity

墙 WallEntity

矩形 RectangleEntity

面 PolygonEntity

 function addGraphic_e06(graphicLayer) {
      let graphic = new mars3d.graphic.CircleEntity({
        position: [116.1, 30.9, 1000],
        style: {
          radius: 1800.0,
          color: '#00ff00',
          opacity: 0.3,
          outline: true,
          outlineWidth: 3,
          outlineColor: '#ffffff',
          clampToGround: true,
        },
      })
      graphicLayer.addGraphic(graphic)
    }
/*---------------------------------------------------------*/
    function addGraphic_e07(graphicLayer) {
      let graphic = new mars3d.graphic.CylinderEntity({
        position: [116.2, 30.9, 1000],
        style: {
          length: 3000.0,
          topRadius: 0.0,
          bottomRadius: 1300.0,
          color: '#00FFFF',
          opacity: 0.7,
        },
      })
      graphicLayer.addGraphic(graphic)
    }
/*---------------------------------------------------------*/
    function addGraphic_e08(graphicLayer) {
      let graphic = new mars3d.graphic.EllipsoidEntity({
        position: new mars3d.LatLngPoint(116.3, 30.9, 1000),
        style: {
          radii: new Cesium.Cartesian3(1500.0, 1500.0, 1500.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.WHITE.withAlpha(0.3),
        },
      })
      graphicLayer.addGraphic(graphic)
    }
/*---------------------------------------------------------*/
    function addGraphic_e09(graphicLayer) {
      let graphic = new mars3d.graphic.ModelEntity({
        name: '消防员',
        position: [116.4, 30.9, 1000],
        style: {
          url: '//data.mars3d.cn/gltf/mars/firedrill/xiaofangyuan-run.gltf',
          scale: 16,
          minimumPixelSize: 100,
        },
      })
      graphicLayer.addGraphic(graphic)
    }
/*---------------------------------------------------------*/
    function addGraphic_e10(graphicLayer) {
      let graphic = new mars3d.graphic.PolylineEntity({
        positions: [
          [116.5, 30.9, 1000],
          [116.52, 30.91, 1000],
          [116.53, 30.89, 1000],
        ],
        style: {
          width: 5,
          color: '#3388ff',
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }
/*---------------------------------------------------------*/
    function addGraphic_e11(graphicLayer) {
      let graphic = new mars3d.graphic.PolylineVolumeEntity({
        positions: [
          [116.1, 30.8, 1000],
          [116.12, 30.81, 1000],
          [116.13, 30.79, 1000],
        ],
        style: {
          shape: 'pipeline',
          radius: 80,
          color: '#3388ff',
          opacity: 0.9,
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }
/*---------------------------------------------------------*/
    function addGraphic_e12(graphicLayer) {
      let graphic = new mars3d.graphic.CorridorEntity({
        positions: [
          [116.2, 30.8, 1000],
          [116.22, 30.81, 1000],
          [116.23, 30.79, 1000],
          [116.247328, 30.806077, 610.41],
        ],
        style: {
          width: 500,
          color: '#3388ff',
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }
/*---------------------------------------------------------*/
    function addGraphic_e13(graphicLayer) {
      let graphic = new mars3d.graphic.WallEntity({
        positions: [
          [116.3, 30.8, 1000],
          [116.31, 30.81, 1000],
          [116.334639, 30.800735, 721.39],
          [116.32, 30.79, 1000],
        ],
        style: {
          closure: true,
          diffHeight: 500,
          //动画线材质
          material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
            image: 'img/textures/fence.png',
            color: '#00ff00',
            speed: 10,
            axisY: true,
          }),
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }
/*---------------------------------------------------------*/
    function addGraphic_e14(graphicLayer) {
      let graphic = new mars3d.graphic.RectangleEntity({
        positions: [
          [116.383144, 30.819978, 444.42],

          [116.42216, 30.793431, 1048.07],
        ],
        style: {
          color: '#3388ff',
          opacity: 0.5,
          outline: true,
          outlineWidth: 3,
          outlineColor: '#ffffff',
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }
/*---------------------------------------------------------*/
    function addGraphic_e15(graphicLayer) {
      let graphic = new mars3d.graphic.PolygonEntity({
        positions: [
          [116.510278, 30.834372, 567.29],
          [116.530085, 30.809331, 448.31],
          [116.507367, 30.788551, 98.21],
          [116.472468, 30.823091, 677.39],
        ],
        style: {
          material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.Water, {
            normalMap: 'img/textures/waterNormals.jpg', // 水正常扰动的法线图
            frequency: 8000.0, // 控制波数的数字。
            animationSpeed: 0.02, // 控制水的动画速度的数字。
            amplitude: 5.0, // 控制水波振幅的数字。
            specularIntensity: 0.8, // 控制镜面反射强度的数字。
            baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
            blendColor: '#006ab4', // 从水中混合到非水域时使用的rgba颜色对象。
          }),
        },
      })
      graphicLayer.addGraphic(graphic) //还可以另外一种写法: graphic.addTo(graphicLayer)
    }

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

图层与图层组

图层

新建图层

销毁图层

添加矢量数据

图层组

新建图层组

销毁图层组

添加图层到图层组

图层组添加到地图上

图层与图层组的疑问

矢量数据

像素点 PointEntity

线 PolylineEntity

圆 CircleEntity

面 PolygonEntity

文字 LabelEntity

图标点 BillboardEntity

平面 PlaneEntity

盒子 BoxEntity

其他类型

圆 , 圆柱 CircleEntity

圆锥 CylinderEntity

球 , 半球 , 椭球 EllipsoidEntity

gltf小模型 ModelEntity

线 PolylineEntity

管道线 PolylineVolumeEntity

走廊 CorridorEntity

墙 WallEntity

矩形 RectangleEntity

面 PolygonEntity

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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

图层与图层组

图层

新建图层

销毁图层

添加矢量数据

图层组

新建图层组

销毁图层组

添加图层到图层组

图层组添加到地图上

图层与图层组的疑问

矢量数据

像素点 PointEntity

线 PolylineEntity

圆 CircleEntity

面 PolygonEntity

文字 LabelEntity

图标点 BillboardEntity

平面 PlaneEntity

盒子 BoxEntity

其他类型

圆 , 圆柱 CircleEntity

圆锥 CylinderEntity

球 , 半球 , 椭球 EllipsoidEntity

gltf小模型 ModelEntity

线 PolylineEntity

管道线 PolylineVolumeEntity

走廊 CorridorEntity

墙 WallEntity

矩形 RectangleEntity

面 PolygonEntity

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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