Vue3引入cesiumjs，右键点击获取经纬度

AprilD谎言

已于 2023-12-04 19:11:20 修改

阅读量965

点赞数 15

文章标签： javascript vue.js 开发语言

于 2023-12-04 19:09:19 首次发布

本文链接：https://blog.csdn.net/wodenime/article/details/134791563

版权

具体请参考：vue-cesium官网

项目：Vue3 + js

下载：

npm i vue-cesium

引入main.js:

// 引入vue-cesium
import VueCesium from 'vue-cesium'
import 'vue-cesium/dist/index.css'

app.use(VueCesium )

创建cesium.vue组件：

<template>
    <div class="viewer">
        <vc-viewer
          :infoBox="false"
          @ready="onViewerReady"
          @right-click="onRightClick"
          >
          <vc-layer-imagery></vc-layer-imagery>
        </vc-viewer>
    </div>
</template>

<script setup>
const onViewerReady = ({ Cesium, viewer }) => {
    // 全局存储
    window.viewer = viewer
    window.Cesium = Cesium
    // 设置初始视角
    viewer.camera.setView({
      // window.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(113.318977, 23.114155, 10000000.0),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0
      }
    })
}
//右键使用笛卡尔积获取经纬度坐标
function onRightClick(movement) {
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
      var scene = viewer.scene;
      var ellipsoid = scene.globe.ellipsoid;
      var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid);

      if (cartesian) { //此处可判断右键是否点击在球上
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
          // 打印经纬度坐标
          console.log('Longitude: ' + longitude + ' Latitude: ' + latitude);
      }
      handler.setInputAction(onRightClick, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
      // 移除handler, 避免重复点击
      handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
</script>

<style lang="less" scoped>
.viewer {
    width: 100%;
    height: 100vh;
}
</style>

注：一定要设置容器大小