cesium拖拽模型到地图中

效果如下：

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

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