vue3.x +Cesium Cesium 鼠标交互，鼠标点击拾取对象等（五）

cesium地图上鼠标点击事件

1、创建屏幕控制实例

var handlClick = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);

2、使用setInputAction进行监听，可监听点击、移入移除移动事件等

handlClick.setInputAction(function (movement) {
        var pick = window.viewer.scene.pick(movement.position);
        var dpick = window.viewer.scene.drillPick(movement.position, 1000, 1000)
        console.log("cesium点击", movement, pick, dpick);
        if (Cesium.defined(pick) && pick.id.id == "bluePolygon") {
          alert("666666");
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3、鼠标的事件  Cesium.ScreenSpaceEventType.LEFT_CLICK

handlClick.setInputAction(function (event) {
        console.log("鼠标点击")
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Name	Type	Description
LEFT_DOWN	Number	Represents a mouse left button down event.
LEFT_UP	Number	Represents a mouse left button up event.
LEFT_CLICK	Number	Represents a mouse left click event.
LEFT_DOUBLE_CLICK	Number	Represents a mouse left double click event.
RIGHT_DOWN	Number	Represents a mouse left button down event.
RIGHT_UP	Number	Represents a mouse right button up event.
RIGHT_CLICK	Number	Represents a mouse right click event.
MIDDLE_DOWN	Number	Represents a mouse middle button down event.
MIDDLE_UP	Number	Represents a mouse middle button up event.
MIDDLE_CLICK	Number	Represents a mouse middle click event.
MOUSE_MOVE	Number	Represents a mouse move event.
WHEEL	Number	Represents a mouse wheel event.
PINCH_START	Number	Represents the start of a two-finger event on a touch surface.
PINCH_END	Number	Represents the end of a two-finger event on a touch surface.
PINCH_MOVE	Number	Represents a change of a two-finger event on a touch surface.

cesium 获取不同对象的方法

scene.pick 返回包含窗口位置基元的对象

scene.drillPick 返回给定窗口位置所有对象的列表

Globe.pick 返回的是给定光线和地形的交点

4、通过entities设置的几何 通过设置description可以设置点击后弹窗的内容

注意：logo 图片的引入  import logo from "/public/img/pic1.jpg"

   var position3 = new Cesium.Cartesian3.fromDegrees(116.4, 39.9, 0);
      const planImg = window.viewer.entities.add({
        id: "cesiumimg", //用于交互绑定和识别
        position: position3,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0), //确认面的朝向
          dimensions: new Cesium.Cartesian3(600, 600), //确认面的长宽
          material: logo, //填充颜色 填充图片
          outline: true,
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY,
        },
        description: `<div>
        <img width="100%" height="300px" src="${logo}">
        <h1>cesium学习<h1>
        <p>加油加油</p>
        </div>`
      });

效果：

 

 组件全部代码：

<template>
  <div class="map-box">
    <div class="cesium-camera-methods">
      <!-- <el-button>缩放地球</el-button> -->
    </div>
    <div id="event-mouse"></div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted } from "vue";
import logo from "/public/img/pic1.jpg"
export default {
  name: "",
  mounted() { },
  setup() {
    onMounted(() => {
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55); // 默认定位到中国上空，home定位到中国范围

      var esri = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      window.viewer = new Cesium.Viewer("event-mouse", {
        baseLayerPicker: false, //是否显示图层选择控件
        // imageryProvider 设置试图图层
        imageryProvider: esri,
        //加载地形
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1), //地形服务器的地址
          requestVertexNormals: true, //增加光照效果
          requestWaterMask: true, //增加水波纹效果
        }),
      });
      // 隐藏版权
      window.viewer._cesiumWidget._creditContainer.style.display = "none";

      window.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 5000.0),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
      // 如何加载 空间数据

      // 如何管理空间数据  增删改
      // entities 添加一个多边形

      var bluePolygon = window.viewer.entities.add({
        id: "bluePolygon",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            116.43, 39.92, 116.43, 39.93, 116.41, 39.92,
          ]),
          material: Cesium.Color.BLUE,
          extrudedHeight: 200,
        },
      });

      // 面上添加图片
      var position3 = new Cesium.Cartesian3.fromDegrees(116.4, 39.9, 0);
      const planImg = window.viewer.entities.add({
        id: "cesiumimg", //用于交互绑定和识别
        position: position3,
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0), //确认面的朝向
          dimensions: new Cesium.Cartesian3(600, 600), //确认面的长宽
          material: logo, //填充颜色 填充图片
          outline: true,
          outlineColor: new Cesium.Color(0, 0, 1, 1),
          shadows: Cesium.ShadowMode.CAST_ONLY,
        },
        description: `<div>
        <img width="100%" height="300px" src="${logo}">
        <h1>cesium学习<h1>
        <p>加油加油</p>
        </div>`
      });

      // 鼠标点击事件

      // 创建屏幕控制实例
      var handlClick = new Cesium.ScreenSpaceEventHandler(window.viewer.canvas);

      handlClick.setInputAction(function (movement) {
        var pick = window.viewer.scene.pick(movement.position);
        var dpick = window.viewer.scene.drillPick(movement.position, 1000, 1000)
        console.log("cesium点击", movement, pick, dpick);
        if (Cesium.defined(pick) && pick.id.id == "bluePolygon") {
          alert("666666");
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      // 鼠标移动事件
      handlClick.setInputAction(function (event) {
        console.log("123")
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 鼠标右键点击事件
      handlClick.setInputAction(function (event) {
        console.log("456")

      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

      /* 
      * cesium 获取不同对象的方法
      * scene.pick 返回包含窗口位置基元的对象
      * scene.drillPick 返回给定窗口位置所有对象的列表
      * Globe.pick 返回的是给定光线和地形的交点
       */
    });
    return {};
  },
};
</script>
<style lang="scss" scoped>
.map-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .cesium-camera-methods {
    width: 160px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
  }
}

#imagery-terrain {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>