cesium拖拽模型到地图中

本文介绍了如何在HTML5中使用拖拽事件在Cesium地图组件中实现元素拖放功能,包括设置draggable属性,添加dragenter,dragover,drop事件处理,以及屏幕坐标的经纬度转换和模型添加。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果如下:

在底部列表中鼠标按住拖动在地图中,地图根据鼠标落下的位置显示模型

使用HTML5的拖拽事件

dragstart:开始拖元素触发,作用于拖拽元素
dragenter:元素拖进可drop元素(绑定drop事件的元素)时触发,作用于目标元素
dragover:当元素拖动到drop元素上时触发,作用于目标元素
drop:当元素放下到drop元素触发,作用于目标元素
dragleave :当元素离开drop元素时触发,作用于目标元素
drag:每次元素被拖动时会触发,作用于目标元素
dragend:放开拖动元素时触发,作用于目标元素

完成一次拖放的事件过程是: dragstart –> dragenter –> dragover –> drop –> dragend

1.在要拖拽的元素上添加@dragstart事件  必须添加draggable属性使之可以拖拽      

  <p
     draggable
     @dragstart="drag('需要传的值')"
     style="background: red"
  >
      拖拽模型
  </p>

2.在目标元素中添加@dragenter @dragover@drop

Cesiums组件为cesium初始化组件也就是地图组件

   <Cesiums
      @drop.native="drop"
      @dragenter.native.prevent
      @dragover.native.prevent
    />

3.利用拖拽鼠标在地图上落下的屏幕坐标转换为经纬度再添加模型

function drop(e) {
  console.log(e);
  //屏幕坐标转经纬度
  const { layerX, layerY } = e;
  let position = window.swpecesium.cesiumViewer.screen2graph({
    x: layerX,
    y: layerY,
  });
  console.log(position);
  window.swpecesium.addEntity.addModel({
    id: person.id,
    position: {
      lon: position.lon,
      lat: position.lat,
      alt: 1000,
    },
    config: {
      url: "../model/f18.gltf",
    },
    label: {
      text: "F18飞机",
    },
  });
  person.id++;
}

使用cesium内置方法将屏幕坐标转换为经纬度结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

m0_63701303

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

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

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

打赏作者

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

抵扣说明:

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

余额充值