supermap常用功能学习

图层组得显隐控制

1. 方式一

map.addLayer(图层组名称)
map.removeLayer(图层组名称)
图层组在remove得时候并没有彻底得清楚，仍然存在，所以在removeLayer后可以继续add Layer，以达到显隐得控制

2. 方式二

clearFeatureGroup() {
        let that = this
        if (that.routeFeatureGroup) {
            //that.routeFeatureGroup.clearLayers();
            that.routeFeatureGroup.eachLayer(item=>{
                item.eachLayer(idx =>{
                    idx.setOpacity(0)
                  })
            })
        }
    }
//idx.setOpacity(0) 设置图层的setOpacity()来控制图层的显隐，适合大数据量，更改透明度，图层仍然存在

判断地图上是否有图层

map.hasLayer(machineGroup)//machineGroup是图层

创建图标

//自定义一个icon对象
var customIcon = L.Icon.extend({
    options: {
        iconSize: [32, 40],
        // shadowSize: [50, 64],
        iconAnchor: [16, 40],//表示图片的那个位置对着经纬度点，16对应iconSize里的32，40对应的是iconSize里的40，从左往右，从上往下
        // shadowAnchor: [4, 62],
        popupAnchor: [0, -20]
    }
});
//new 出项目部图标
var macIcon = new customIcon({iconUrl: '../images/machine.png'});
var macIcon_red = new customIcon({iconUrl: '../images/machine-red.png'});

根据地图缩放级别 控制图层显隐

map.on('zoomend', function (e) { //zoomend 滚轮滚动结束
    var  zoom = map.getZoom(); //获取地图得缩放级别
    $.each(polygonArr,function (idx,item) { //polygonArr是图层组，item是图层
        if(zoom < item.options.zoom){//item.options.zoom 图层要显示得级别
            map.removeLayer(item) 
        }else{
            map.addLayer(item)
        }
    });
});

开启地下模式

that.scene.undergroundMode = true //设置开启地下场景
that.scene.screenSpaceCameraController.minimumZoomDistance = -1000 //设置相机最小缩放距离,距离地表-1000米

设置相机角度

//设置相机位置、视角，便于观察场景
            that.scene.camera.setView({
              destination: new Cesium.Cartesian3.fromDegrees(
                that.cameraObj.x,
                that.cameraObj.y,
                that.cameraObj.z
              ),
              orientation: {
                heading: Cesium.Math.toRadians(that.cameraObj.heading),
                pitch: Cesium.Math.toRadians(that.cameraObj.pitch - 90),
                roll: that.cameraObj.roll,
              },
            })

三维模型得显隐

let name = "bchanggui02j@4biao1015"
that.scene.layers._layers._hash[item]._visible = true

飞行路径

addFly() {
      let that = this
      that.hideAssetLayer()
      that.flyscene.globe.depthTestAgainstTerrain = true
      var camera = that.flyscene.camera
      // that.promise.then(function (layers) {
      camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(
          that.cameraObj.x,
          that.cameraObj.y,
          that.cameraObj.z
        ),
        orientation: {
          heading: Cesium.Math.toRadians(that.cameraObj.heading),
          pitch: Cesium.Math.toRadians(that.cameraObj.pitch - 90),
          roll: that.cameraObj.roll,
        },
      })
      var routes = new Cesium.RouteCollection(that.viewer.entities)
      //添加fpf飞行文件，fpf由SuperMap iDesktop生成
      //var fpfUrl = '/fly/平原段飞行路径.fpf'  //平原段
      var fpfUrl = '/fly/bim全路段飞行路径.fpf' //全路段
      //var fpfUrl = '/fly/孪生体模型飞行路径2.fpf' //全路段
      routes.fromFile(fpfUrl)
      //初始化飞行管理
      var flyManager = new Cesium.FlyManager({
        scene: that.flyscene,
        routes: routes,
      })
      flyManager.playRate = 0.3
      flyManager.readyPromise.then(function () {
        var currentRoute = flyManager.currentRoute
        currentRoute.isLineVisible = false //隐藏飞行线
        currentRoute.isStopVisible = false//隐藏飞行站点
        // 飞行路线就绪
        document.getElementById('play').onclick = function () {
          alert('开始飞行')
          flyManager && flyManager.play()
        }
        document.getElementById('pause').onclick = function () {
          alert('暂停飞行')
          flyManager && flyManager.pause()
        }
        document.getElementById('stop').onclick = function () {
          alert('停止飞行')
          flyManager && flyManager.stop()
        }
        let allStops = flyManager.getAllRouteStops() //所有站点
        let lastStopName = allStops[allStops.length - 1]._stopName //最后一个站点名称
        //注册站点到达事件
        flyManager.stopArrived.addEventListener(function (routeStop) {
          if (routeStop._stopName == lastStopName) {
            //到达最后一个站点后的待处理操作
            alert('jieshule')
          }
        })
        document.getElementById('reset').onclick = function () {
          //alert('回到起点')
          camera.setView({
            destination: new Cesium.Cartesian3.fromDegrees(
              that.cameraObj.x,
              that.cameraObj.y,
              that.cameraObj.z
            ),
            orientation: {
              heading: Cesium.Math.toRadians(that.cameraObj.heading),
              pitch: Cesium.Math.toRadians(that.cameraObj.pitch - 90),
              roll: that.cameraObj.roll,
            },
          })
        }
      })
      //})
    },

marker聚合

npm install leaflet.markercluster --save

在vue页面引入css 和 leaflet.markercluster

import L from 'leaflet'
import '@supermap/iclient-leaflet'

 // 引入 leaflet.markercluster  在次之前一定要引入leaflet
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import 'leaflet.markercluster'

//使用

//不能写到循环体里
          that.markerResultLayer = L.markerClusterGroup({
            spiderfyOnMaxZoom: false,
            showCoverageOnHover: false,
            zoomToBoundsOnClick: false,
          })
          
          //添加marker
          that.markerResultLayer.addLayer(marker) 
          //maker 图层加到地图中去
          that.markerResultLayer.addTo(that.map)