一、需求
是在地图中展示鼠标的经纬度
二、成果展示
三、思路和方法
html
<div class="mouseMove" v-if="mouseMove.lat">
<div v-if="mouseMove.lat">经度:{{ mouseMove.lng }}</div>
<div v-if="mouseMove.lng">纬度:{{ mouseMove.lat }}</div>
</div>
属性
data() {
return {
mouseMove: {},
};
},
css文章来源:https://www.toymoban.com/news/detail-526938.html
.mouseMove {
background: #303336;
position: absolute;
bottom: 3px;
right: 33px;
padding: 0.429rem;
z-index: 1;
color: #fff;
font-size: 0.6rem;
}
cesium鼠标移动的方法在初始化cesium之后调用这个方法文章来源地址https://www.toymoban.com/news/detail-526938.html
getMouseMove() {
let that = this;
let handler = new Cesium.ScreenSpaceEventHandler(
that.CesiumViewer.scene.canvas
);
handler.setInputAction(function (movement) {
//具体事件的实现
var ellipsoid = that.CesiumViewer.scene.globe.ellipsoid;
//捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
var cartesian = that.CesiumViewer.camera.pickEllipsoid(
movement.endPosition,
ellipsoid
);
if (cartesian) {
//将笛卡尔三维坐标转为地图坐标(弧度)
var cartographic =
that.CesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
cartesian
);
//将地图坐标(弧度)转为十进制的度数
that.mouseMove = {
lat: Cesium.Math.toDegrees(cartographic.latitude),
lng: Cesium.Math.toDegrees(cartographic.longitude),
alt: that.CesiumViewer.camera.positionCartographic.height / 1000,
};
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
},
到了这里,关于vue+cesium 获取鼠标浮动的经纬度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!