三维地图Cesium中,如何监听地图点击事件,实现在实体上面鼠标右击时做处理。

在 Cesium 中,如果你想在实体(Entity)上实现鼠标右击(右键点击)的处理,你需要使用 Cesium 的事件系统来监听鼠标事件,并结合一些逻辑来判断点击是否发生在实体上。由于 Cesium 没有直接提供“点击实体”的事件,你需要自己实现这个逻辑。

以下是一个基本的步骤和示例代码,用于在 Cesium 中实现鼠标右击实体时的处理:

  1. 监听全局的鼠标右击事件:使用 Cesium 的 ScreenSpaceEventHandler 来监听鼠标右击事件。
  2. 判断点击位置是否位于实体上:这通常涉及到射线投射(ray-casting)或其他形式的拾取(picking)技术。Cesium 提供了 Scene.pick 方法,它可以用于获取在指定位置上的对象。
  3. 执行处理逻辑:如果点击位置上有实体,执行相应的处理逻辑。

示例代码:

var viewer = new Cesium.Viewer('cesiumContainer');

// 创建一个 ScreenSpaceEventHandler 实例来监听鼠标事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

// 监听右键点击事件
handler.setInputAction(function(click) {
    // 使用 pick 方法获取点击位置上的对象
    var pickedObject = viewer.scene.pick(click.position);

    // 检查 pickedObject 是否是 Entity 或与 Entity 相关的对象(如 Primitive)
    // 注意:直接 pick 可能不会直接返回 Entity,而可能是与 Entity 相关的其他对象
    // 你可能需要遍历 EntityCollection 或使用其他方法来确认点击的 Entity

    if (pickedObject && /* 这里添加你的逻辑来判断 pickedObject 是否是你关心的 Entity */) {
        // 执行你的处理逻辑
        console.log('Right-clicked on an entity!');
        // 例如:显示一个提示框、改变实体的颜色等
    }
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

注意

  • 直接使用 pick 方法可能不会直接返回 Entity 对象。它可能会返回与 Entity 相关的其他对象,如 Primitive、Geometry 等。你可能需要遍历你的 EntityCollection 或使用其他方法来确认点击的 Entity。
  • 如果你的 Entity 使用了 Billboard、Label 或其他不直接参与射线投射的可视化元素,那么你可能需要使用其他方法来检测点击,如检查鼠标位置是否在 Billboard 的边界框内。
  • 你可以使用 Cesium 的其他事件(如鼠标移动、左键点击等)来增强你的交互体验。

例:要在Cesium三维地图上点击某个点,在该点加一个自定义图标的实体,并且鼠标右击这个实体时,我要做一些操作。添加一个自定义图标的实体,并为该实体添加一个myData自定义数据,后面根据这个数据做是否点击该实体的判断。

    // 点击地图,添加一个自定义实体
    function clickCesiumMapAddEntities() {
      let ellipsoid = window.viewer.scene.globe.ellipsoid;
      dropHandler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
      dropHandler.setInputAction((move) => {
        let cartesian = window.viewer.camera.pickEllipsoid(move.position, ellipsoid);
        if (cartesian) {
          // 苗卡尔椭球体的三维坐标 转 地图坐标(弧度)
          let cartographic = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          // 地图坐标(弧度) 转 十进制度数 toFixed保留小数点后几位
          let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);//拿到经度
          let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);//拿到纬度
          //自动获取模型高度
          let position = window.viewer.scene.pickPosition(move.position);
          //如果对象已定义,将度转为经纬度
          let lableHeight = Cesium.Cartographic.fromCartesian(position);
          let height = lableHeight.height.toFixed(2);//模型高度
          addBillboardEntities(lon,lat,height)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    function addBillboardEntities(lon,lat,height){
      let myEntities = window.viewer.entities.add({
        name: 'myEntities',
        //给初始点位设置一定的离地高度,否者会被压盖
        position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
        billboard: {
          image: baseUrlIcon, // 图片服务器完整的图片地址 如:static/images/mybaseUrlIcon.img
          width: 60,
          height: 60,
        },
        myData: {
          name: 'myEntities',
          lon: lon,
          lat: lat,
        },
      })

      // 添加完实体,左键监听事件,判断点击的实体
      let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        var picked = window.viewer.scene.pick(movement.position)
        if (Cesium.defined(picked) && picked.id.id) {
          if (!picked.id.myData) return;
          // myData就是我们在添加实体时,自己添加的自定义标识,在这里我们就可以做自己的事情了
          console.log('我当前点击的是那个实体:',picked.id.myData)
        }
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    }

删除某个实体 window.viewer.entities.remove(entitys[i]);

删除所有实体:window.viewer.entities.removeAll();

拿到当前已添加所有的实体window.viewer.entities._entities._array;

  • 12
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要使用Cesium.js实现离线三维地图,你需要以下步骤: 1. 下载Cesium.js库文件:你可以从Cesium官方网站(https://cesium.com/downloads/)下载Cesium.js的压缩包。选择适合你项目的版本,并将其解压到你的项目目录。 2. 在Vue项目引入Cesium.js库:将Cesium.js库文件拷贝到你的Vue项目的静态资源目录(例如`public`目录),然后在Vue组件引入它。在需要使用Cesium的组件添加以下代码: ```javascript mounted() { const Cesium = window.Cesium; this.viewer = new Cesium.Viewer(this.$refs.mapContainer, { // Cesium初始化配置选项 // 可根据需要进行配置 }); }, ``` 3. 在组件模板创建地图容器:在Vue组件的模板添加一个容器元素,用于显示地图。使用`ref`属性为容器元素创建一个引用,以便在代码引用它。例如: ```html <template> <div ref="mapContainer" style="width: 100%; height: 100%;"></div> </template> ``` 4. 添加离线地图数据:下载所需的离线地图数据,例如地形数据、影像数据或矢量数据。将这些数据放置在你的项目目录,并确保路径正确。 5. 加载离线地图数据:在Cesium的初始化配置选项指定离线地图数据的路径。例如: ```javascript this.viewer = new Cesium.Viewer(this.$refs.mapContainer, { terrainProvider: new Cesium.CesiumTerrainProvider({ url: '/path/to/terrainData', }), imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: '/path/to/imageryData/{z}/{x}/{y}.png', }), }); ``` 在上述示例,`terrainProvider`指定了地形数据的路径,`imageryProvider`指定了影像数据的路径。你需要根据实际情况调整路径和数据格式。 6. 定制地图样式和功能:Cesium提供了丰富的API和工具,可以根据需要进行地图样式和功能的定制。你可以通过配置选项、添加图层、设置相机位置等来实现定制。具体的定制方法可以参考Cesium的官方文档(https://cesium.com/docs/)。 这些步骤将帮助你在Vue项目使用Cesium.js实现离线三维地图。记得根据你的实际需求和地图数据进行相应的配置和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草样的年华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值