cesium&leaflet鹰眼图

最近因为项目太忙，连续两个月都是加班状态，很久没有记录学习状态了，项目中也学到了很多新的东西，有些百度都搜烂了还搜不出来，慢慢记录吧，不抱怨了，直接开始介绍。

准备工作

这个功能说白了就是三维视图和二维视图联动，我们可以利用cesium的时钟回调事件去不停的获取cesium的视角变化并赋值给leaflet调整视角，唯一要主要的是cesium并没有层级的概念，只能取相似的高程值转为对应的层级，所以会有一些偏差，有方法的话可以进行调整

初始化

组件接收容器id、中心点、层级， 初始化时可调用父组件获取视角方法，给mapInfo赋值并传入组件

父组件

      mapInfo: {
        id: 'eagleDiagram',
        center: {
          lat: null,
          lon: null
        },
        zoom: 12,
      }

    //   获取视角
    getViewer () {
      let camera = Cesium.camera;
      let cartographic = camera.positionCartographic;
      let lon = Cesium.Math.toDegrees(cartographic.longitude);
      let lat = Cesium.Math.toDegrees(cartographic.latitude);
      let height = cartographic.height
      let zoom = getZoomLevel(height)
      const data = {
        lon,
        lat,
        zoom
      }
      return data
    }

leaflet组件

    initMap() {
      const latlng = L.latLng(this.mapInfo.center.lat || window.mapData.center.lat, this.mapInfo.center.lon || window.mapData.center.lon);
      let myMap = L.map(this.mapInfo.id, {
        center: latlng,
        zoom: this.mapInfo.zoom || window.mapData.level,
        maxZoom: 20,
        minZoom: 1,
        crs: L.CRS.EPSG4326,
        zoomControl: false
      });
      this.myMap = myMap
    }

至此，leaflet地图的初始化已经完成

获取视角

初始化完成后，开启leaflet组件中的鹰眼图监听，viewer.clock.onTick.addEventListener是在cesium时钟发生变化时的回调函数，因为cesium的时钟是每时每秒触发的，所以可以理解为不停触发改方法

    // 开启鹰眼图监听
    enableMonitoring() {
      this.viewer.clock.onTick.addEventListener(() => {
        this.viewer()
      })
    }

    viewer() {
      // 获取三维视角
      const viewer = this.getViewer()
      // 赋值给二维视角
      this.setView(viewer)
    }

    // 获取视角
    getViewer() {
      let camera = Cesium.camera;
      let cartographic = camera.positionCartographic;
      let lon = Cesium.Math.toDegrees(cartographic.longitude);
      let lat = Cesium.Math.toDegrees(cartographic.latitude);
      let height = cartographic.height
      let zoom = getZoomLevel(height)
      const data = {
        lon,
        lat,
        zoom
      }
      return data
    }

    // 设置二维视角
    setView(data) {
      this.myMap.setView([data.lat, data.lon], data.zoom)
    }

到这一步cesium和leaflet就联动起来了，当然，关闭的方法也很简单，只需要取消时钟的回调就好

    // 关闭鹰眼图监听
    closeMonitor() {
      this.Global.viewer.clock.onTick.removeEventListener(() => {
        this.viewer()
      })
    },

最后，附上cesium高程转为对应层级的方法

function getZoomLevel (h) {
    if (h <= 100) { //0.01
        return 19;
    } else if (h <= 300) { //0.02
        return 18;
    } else if (h <= 660) { //0.05
        return 17;
    } else if (h <= 1300) { //0.1
        return 16;
    } else if (h <= 2600) { //0.2
        return 15;
    } else if (h <= 6400) { //0.5
        return 14;
    } else if (h <= 13200) { //1
        return 13;
    } else if (h <= 26000) { //2
        return 12;
    } else if (h <= 67985) { //5
        return 11;
    } else if (h <= 139780) { //10
        return 10;
    } else if (h <= 250600) { //20
        return 9;
    } else if (h <= 380000) { //30
        return 8;
    } else if (h <= 640000) { //50
        return 7;
    } else if (h <= 1280000) { //100
        return 6;
    } else if (h <= 2600000) { //200
        return 5;
    } else if (h <= 6100000) { //500
        return 4;
    } else if (h <= 11900000) { //1000
        return 3;
    } else {
        return 2;
    }
}
export { getZoomLevel };