Cesium实现文字、点、多段线、多边形的实时绘制

最新推荐文章于 2024-07-31 09:52:29 发布

weixin_30849591

最新推荐文章于 2024-07-31 09:52:29 发布

阅读量3.2k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SUNYZBlog/p/10013715.html

版权

本文介绍了Cesium如何实现实时绘制文字、点、多段线和多边形。Cesium提供两种绘制方式，Entity实体和Primitives接口，适合小数据量的实时绘制。通过ScreenSpaceEventHandler监听鼠标操作，CallbackProperty监测坐标变化，实现动态矢量图形和文字注记的绘制。文章还展示了具体的代码实现和最终效果。

摘要由CSDN通过智能技术生成

背景知识

点、线、面以及文字的实时绘制是GIS很重要的一个功能，是用户对感兴趣区域标注的业务需要。同时Cesium提供了点、线（多段线）、面及文字（label）绘制的接口，绘制方式总共有两种，一种是通过Entity实体的方式，一种是通过Primitives的方式。第一种使用较为简单，是在Primitives基础上进行了封装；第二种则更加贴近WebGL底层，语法更复杂但是绘制效率更高效率。鉴于实时绘制数据量并不大，不需要使用复杂高效的方法，第一种方法完全适用。

Cesium通过ScreenSpaceEventHandler方法添加鼠标监听，包括鼠标的移动、点击等，同时会把鼠标的位置信息以回调函数方式返回。通过监听用户鼠标状态实现矢量图形及文字注记的位置记录。

CallbackProperty监听：当变量变化时触发该监听，通过监听鼠标拾取坐标的变化实现动态绘制。

代码实现

记录点位

var location = {
    latitude: 0,
    longitude: 0,
    height: 0,
    endPosition: null,
    cartesian : null
};
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
    //记录移动位置
    location.endPosition = viewer.scene.pickPosition(movement.endPosition);
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
    var cartesian = viewer.scene.pickPosition(movement.position);
    //记录点击位置
    location.cartesian = cartesian;
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    location.latitude = Cesium.Math.toDegrees(cartographic.latitude);
    location.longitude = Cesium.Math.toDegrees(cartographic.longitude);
    location.height = cartographic.height;
},Cesium.ScreenSpaceEventType.LEFT_CLICK);