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>

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

cesium两种方式鼠标移入移出实体显示提示框
cesium两种方式鼠标移入移出实体显示提示框第一种方式采用cesium的label作为提示框 var labelEntity = viewer.entities.add({label : {sh ...
cesium常见操作：鼠标点击获取对象
目录一.viewer.scene.pick(获取Cartesian2) 二. viewer.scene.pickPosition(获取Cartesian3) 三.viewer.scene.drill ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
OpenGL学习笔记3 —— 绘制3D物体、鼠标交互、反向变换
/* reference http://nehe.gamedev.net/article/using_gluunproject/16013/ */#include <windows.h> ...
python xycoords_python可视化节点关系（三）：matplotlib（2）鼠标交互
实现鼠标交互 1. 实现鼠标点击节点高亮直接上代码: # -*- coding: utf-8 -*- # -*- coding: utf-8 -*- import matplotlib.pyplot ...
OpenCV中鼠标交互-绘制矩形框
OpenCV中鼠标交互-绘制矩形框 ·具体流程: 1.绑定回调函数 2.在回调函数中检测触发的事件 3.根据不同事件做出不同动作一.绑定回调函数 cv2.setMouseCallback('orig ...
python opencv 截取矩形区域_python+OpenCV 鼠标交互图片切割矩形区域
about 本文参考了: 不用鼠标交互,手动设参先来个热身运动的先,直接手动设参选择.一个要点就是把一个RGB图片看成一个3维的数组. import cv2 def main(): org = cv ...
Unity 进阶之简单模仿鼠标交互（场景：手机屏幕当做触摸板Touch Pad，移动鼠标，鼠标确定等操作）
Unity 进阶之简单模仿鼠标交互(场景:手机屏幕当做触摸板Touch Pad,移动鼠标,鼠标确定等操作) 目录 Unity 进阶之简单模仿鼠标交互(场景:手机屏幕当做触摸板Touch Pad ...
计算机图形学实验四 OpenGL的鼠标交互绘制
一.实验目的 1.掌握OpenGL的鼠标按钮响应函数. 2.掌握OpenGL的鼠标移动响应函数. 3.进一步巩固OpenGL的基本图元绘制基础. 二.实验内容 1.鼠标画草图--实现鼠标点到哪,线就画 ...

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

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

最新文章

热门文章