cesium拖拽模型到地图中

2023-12-27 10:29:38

效果如下:

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

使用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内置方法将屏幕坐标转换为经纬度结果如下:

文章来源:https://blog.csdn.net/m0_63701303/article/details/135236685
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。