zouyaoji / vue-cesium

🎉 Vue 3.x components for CesiumJS.
https://zouyaoji.top/vue-cesium
MIT License
1.49k stars 321 forks source link

Getting the rectangle coordinates in lat/long on move end #46

Closed boriskogan81 closed 4 years ago

boriskogan81 commented 4 years ago

[文档问题] Getting the rectangle coordinates in lat/long on move end

相关文档 URL

https://zouyaoji.top/vue-cesium/#/en/viewer/vc-viewer

问题描述

I'd like, once the camera stops moving (zoom or drag) to get a polygon (rectangle?) of lat-long coordinates in the new field of view, so as to be able to query my database for any entities which exist inside that polygon. I understand the former happens at the @moveEnd event, but how do I get that polygon? Do I query this.viewer.camera? 

Thank you.

改进建议

Provide documentation for this scenario. 
boriskogan81 commented 4 years ago

This seems to be working, but I wonder if there's a better way.

<template>
    <vc-viewer @moveEnd="onMoveEnd" :camera="camera" />
</template>
<script>
    methods: {
        async ready(cesiumInstance) {
                const {Cesium, viewer} = cesiumInstance;
                this.scratchRectangle = new Cesium.Rectangle();
                this.viewer = viewer;
            },
        onMoveEnd (){
                const rawViewRectangle = this.viewer.camera.computeViewRectangle(this.viewer.scene.globe.ellipsoid, this.scratchRectangle);
                const rawCorners = [Cesium.Rectangle.southwest(rawViewRectangle), Cesium.Rectangle.southeast(rawViewRectangle), Cesium.Rectangle.northwest(rawViewRectangle), Cesium.Rectangle.northeast(rawViewRectangle)];
                const cookedCorners = rawCorners.map(corner => {
                    return {
                        longitude: Number(Cesium.Math.toDegrees(corner.longitude).toFixed(4)),
                        latitude: Number(Cesium.Math.toDegrees(corner.latitude).toFixed(4))
                    }
                });
                console.log(cookedCorners)
            }
    }
</script>

Is there a better way?

zouyaoji commented 4 years ago

Hi,@boriskogan81, maybe this is more appropriate.

viewRectangleToLonLatRange(rawViewRectangle ) {
  var range = {}
  var postiveWest = Cesium.Math.mod(viewRectangle.west, Cesium.Math.TWO_PI)
  var postiveEast = Cesium.Math.mod(viewRectangle.east, Cesium.Math.TWO_PI)
  var width = viewRectangle.width
  var longitudeMin
  var longitudeMax
  if (width > Cesium.Math.THREE_PI_OVER_TWO) {
    longitudeMin = 0.0
    longitudeMax = Cesium.Math.TWO_PI
  } else {
    if (postiveEast - postiveWest < width) {
      longitudeMin = postiveWest
      longitudeMax = postiveWest + width
    } else {
      longitudeMin = postiveWest
      longitudeMax = postiveEast
    }
  }
  range.lon = {
    min: Cesium.Math.toDegrees(longitudeMin),
    max: Cesium.Math.toDegrees(longitudeMax)
  }
  var south = viewRectangle.south
  var north = viewRectangle.north
  var height = viewRectangle.height
  var extendHeight = height > Cesium.Math.PI / 12 ? height / 2 : 0
  var extendedSouth = Cesium.Math.clampToLatitudeRange(south - extendHeight)
  var extendedNorth = Cesium.Math.clampToLatitudeRange(north + extendHeight)
  // extend the bound in high latitude area to make sure it can cover all the visible area
  if (extendedSouth < -Cesium.Math.PI_OVER_THREE) {
    extendedSouth = -Cesium.Math.PI_OVER_TWO
  }
  if (extendedNorth > Cesium.Math.PI_OVER_THREE) {
    extendedNorth = Cesium.Math.PI_OVER_TWO
  }
  range.lat = {
    min: Cesium.Math.toDegrees(extendedSouth),
    max: Cesium.Math.toDegrees(extendedNorth)
  }
  return range
}