【Mars3d 基础 - 图层】种类和使用

地图内是由各种不同的图层来叠加显示，形成整个三维地图场景的。 图层是地图中很重要的概念，也是平台内很重要的组成部分。

一、常见的图层

1. geojsonlayer

可直接加载 GeoJSON数据，非常方便；适合一次性加载同类型的数据

1.1、id - 具有唯一性，所有的图层和矢量对象都不能重复，可以不设置，内部会自动赋值的；

后面可以根据该 id 获取该图层；

1.2、symbol - 设置矢量数据

symbol .type - 设置矢量数据的类型，geojson里面的数据都会以该类型呈现；

如果是不同类型的话，比如说下面的json数据，就是各不相同的数量数据，设置merge:true,就好，不需要设置type;

symbol.styleOptions - 设置矢量数据的样式，里面的具体参数需要根据你设置的类型

1.3、如果只是简单的设置，设置symbol就基本可以了；

有特定需求的话，还有 onCreateGraphic 参数 - 自定义设置创建矢量对象；

// 加载展示 GeoJSON数据 的图层  
const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
   // 通过id获取该图层，一个图层对应一个id，不可重复
    id:2021,
    name: "标绘示例数据",
    url: "//data.mars3d.cn/file/geojson/mars3d-draw.json", 
    popup: "{type} {name}", // 弹窗，可以自定义
    queryParameters: {
      token: "mars3d" // 可以传自定义url参数，如token等
    },
    symbol: {
      merge: true, // 是否继承geojson里的样式属性
      //type:"polyline",// 矢量数据的类型
      styleOptions: {
        // 高亮时的样式
        highlight: {
          type: "click",
          opacity: 0.9
        }
      }
    },
    flyTo: true // 定位至加载矢量数据的位置
  })
  map.addLayer(geoJsonLayer)

2、矢量图层

主要用于业务数据，添加 点、线、面等矢量数据的；

hasEditor - 是否可编辑 ， 点击图层内的矢量数据时，可以对该对象进行编辑；

isAutoEditing - 完成标绘时是否自动启动编辑，这个是需要建立在图层为可编辑状态（hasEditor：true）下；注意 ，这里完成标绘时 ，指的是 graphicLayer.startDraw 方法；

图层在添加、删除、修改矢量对象时进行一些操作，需要对图层绑定事件；

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技   这个示例大部分的事件绑定都有演示代码

// 创建矢量数据图层  点线面等矢量数据需要在矢量图层上进行添加
const graphicLayer = new mars3d.layer.GraphicLayer({
hasEdit:false,
isAutoEditing:false
})
map.addLayer(graphicLayer)

2.1、添加矢量数据

// 创建矢量数据图层  点线面等矢量数据需要在矢量图层上进行添加
const graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)

// 添加矢量数据 点
const graphic = new mars3d.graphic.PointEntity({
    position: [116.244399, 30.920459, 573.6], // 位置
    style: {
      color: "#ff0000", // 颜色
      pixelSize: 10, // 大小
      outlineColor: "#ffffff", // 外边框的颜色
      outlineWidth: 2, // 外边框的大小
      label: {
        text: "我是原始点", // 注记，
        font_size: 18, // 文字的大小
        color: "#ffffff", // 文字的颜色
        pixelOffsetY: -10, // 文字的偏移量
        distanceDisplayCondition: true, // 是否按视距显示
        distanceDisplayCondition_far: 500000, // 最大距离
        distanceDisplayCondition_near: 0 // 最小距离
      }
    }
  })
  graphicLayer.addGraphic(graphic) // 方法一


// 添加矢量数据 平面
const graphic1 = new mars3d.graphic.PlaneEntity({
    position: [116.282587, 30.859197, 544.31], // 位置
    style: {
      plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),// 指定平面的法线和距离
      dimensions_x: 2000.0, // 长度
      dimensions_y: 1000.0, // 宽度
      color: "#00ff00", // 颜色
      opacity: 0.4, // 透明度
      // 默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
      highlight: {
        opacity: 0.9
      }
    }
  })
   graphic1.addTo(graphicLayer) //  方法二

 二、获取图层，

通过id获取图层

const layer = map.getLayerById(2021) ||

const layer = map.getLayer("id",2021) ||

获取所有的图层

const layers =map.getLayers({

basemaps:false // 不包含basemps中配置的所有图层

layers：false // 不包含layers中配置的所有图层

})

判断图层是否添加过

const isHaveLayer = map.hasLayer(2021) // 返回boolean

三、图层的移除和显示隐藏

// 获取图层 在清除图层
const layer = map.getLayerById(2021)

// 移除图层
map.removeLayer(layer )

// 隐藏图层
layer.show = false

// 显示图层
layer.show = true