cesium中加自定义点位标签，以及页面刷新

1、利用cesium中的方法，当用户点击地图时，获取点击位置的经纬度坐标，获取鼠标点击位置的屏幕坐标，将屏幕坐标转换为世界坐标；

//监听按钮的点击事件绘制点
var handler
function addPoint(){
    if(handler != null){
        handler.destroy(); //关闭事件句柄
        handler = null
    }
    //注册屏幕的点击事件
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    //右键事件
    handler.setInputAction(function (movement) {
        //定义position为
        position = viewer.camera.pickEllipsoid(movement.position);
        var cartographic = Cesium.Cartographic.fromCartesian(position);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        $("#saveTags").show()
        document.getElementById("mayLon").value = longitude;
        document.getElementById("mayLat").value = latitude;
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 还有其他的鼠标事件是：
    // 左键事件：Cesium.ScreenSpaceEventType.LEFT_CLICK
    // 左键双击事件：Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    // 中键点击事件：Cesium.ScreenSpaceEventType.MIDDLE_CLICK 
    // 左键事件：Cesium.ScreenSpaceEventType.LEFT_CLICK
    // 左键双击事件：Cesium.ScreenSpaceEventType.LEFT_LEFT_DOUBLE_CLICK

    //左键事件
    handler.setInputAction(function () {
        handler.destroy(); //关闭事件句柄
        handler = null; //重新定义handler
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

2、写一个弹窗，用户可以输入自定义标签，利用form表单，自动填入经纬度坐标，当用户点击保存按钮时，获取输入框中的标签名称，
使用Cesium API在指定位置添加标签。

<div class="box_seachTag" id="saveTag">
    <div class="deptCloseSeach" @click="closeDivTag">
        <!-- <div>参演部门详情：</div> -->
        <!-- <i class="el-icon-close" size="12"></i> -->
    </div>
    <div class="box_seachTag_content">
    <div class="seachtag">
        名称：
        <input id="mayInput" placeholder="请输入标绘点名称" maxlength="50" class="input-text" name="name">
    </div>
    <div class="seachtag">
        经度：
        <input id="mayLon" placeholder="请输入经度" class="input-text" name="name">
    </div>
    <div class="seachtag">
        纬度：
        <input id="mayLat" placeholder="请输入纬度"  class="input-text" name="name">
    </div>
</div>
    <div style="display: flex;align-items: center;justify-content: center;">
        <el-button type="primary" size="mini" @click="handleClick">保存</el-button>
        <el-button type="info" size="mini" @click="closeDivTag">关闭</el-button>
    </div>
</div>

<script>
    var saveTagVue = new Vue({
        el: '#saveTag',
        data() {
            return {
                form: {},
            }
        },
        mounted() {
        },
        methods: {
           //保存
            handleClick() {
               let name = document.getElementById('mayInput').value;
              let lng = document.getElementById('mayLon').value;
              let lat = document.getElementById('mayLat').value;
              //调用创建标签的方法
              CreatNewpointforserverPoint(Number(lng), Number(lat), name,)
              viewer.scene.requestRender()
            },

            closeDivTag() {
                $("#saveTags").hide()
                document.getElementById("mayLon").value = null;
                document.getElementById("mayLat").value = null;
                document.getElementById("mayInput").value = null;
            }
        }
    })

</script>
<style scoped>
    .box_seachTag {
        position: absolute;
        top: 116px;
        left: 426px;
        background: url(../../src/assets/newImage/bg.png) no-repeat;
        background-size: 100% 100%;
        width: 190px;
        height: 176px;
    }

    .seachtag {
        display: flex;
        padding: 5px 14px;
    }
    .box_seachTag_content {
        margin: 18px 0px;
    }
    .input-text {
        width: 72%;
    }
    .deptCloseSeach {
        position: absolute;
        top: 0px;
        font-size: 24px;
        right: 2px;
        cursor: pointer;
        color: #fff;
        pointer-events: all;
    }

</style>

3、创建标签方法，也可以自己家icon，注释掉的image就是可以自定义icon，我这边用不上，可随自己更改；

//创建点
function CreatNewpointforserverPoint(lng, lat, name) {
    //地面高度线，虚线
    var tmypostion = Cesium.Cartesian3.fromDegrees(lng, lat, 10);
    var pointGeometry = viewer.entities.add({
      position: tmypostion,
      typeid: "serverpoint",
    //   billboard: {
    //     image: img,
    //     width: 30,
    //     height: 30,
    //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
    //       0,
    //       5000000
    //     ),
    //     disableDepthTestDistance: Number.POSITIVE_INFINITY,
    //   },
      label: {
  
        text: name,
        font: '500 18px Helvetica', // 15pt monospace
        scale: 0.85,
        show: true,
        //backgroundColor: Cesium.Color.GREEN,
        //showBackground: true,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor: Cesium.Color.WHITE,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        // outlineColor: Cesium.Color.WHITE,
        outlineWidth: 30.0,
        pixelOffset: new Cesium.Cartesian2(0, -60), //偏移量 
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5000.0),
      },
    });
    Serverpointlist.push(pointGeometry);
  }

4、创建成功后，页面可能未加载出来，记得刷新

      viewer.scene.requestRender()

5、效果

最后感谢阅读，如有不足指出，请指正，谢谢。