mars3d 图层的使用

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

一、常见的图层

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

二、通过矢量图层添加矢量数据

// 创建矢量数据图层  点线面等矢量数据需要在矢量图层上进行添加
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

你可能感兴趣的:(Cesium,mars3d,css,前端,javascript,3d)