cesium 绘制工具鼠标提示tips工具组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了cesium 绘制工具鼠标提示tips工具组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

本专题主要是针对学习cesium小伙伴，在项目中实践总结的一些工具，以及会详细介绍，知识和封装的原理，废话不多说，此文介绍的是，鼠标提示tips工具组件，在项目中使用会优化交互效果，对客户友好，例如标绘工具，地图操作。

一、PlotDrawTip组件

之前在网上看到的都是，通过动态创建，编辑div位置，定位到鼠标的位置，当然效果也能实现，但是发现一个问题就是鼠标移动过快，鼠标会浮到div上，导致div静止，位置已经错位。
cesium 绘制工具鼠标提示tips工具组件,cesium,计算机外设,vue.js,javascript

PlotDrawTip提示组件的思路是采用的，场景渲染事件实时更新标签的位置使其与笛卡尔坐标一致，ui样式单独封装成tip.vue
组件，其原理和自定义label组件类似。

二、调用方式

import PlotDrawTip from "@/utils/PlotDrawTip"

初始化
this.plotDrawTip = new PlotDrawTip(this.viewer);

设置文本内容
this.plotDrawTip.setContent(['左键点击开始绘制'])//setCentent接受的是文本array数组，看自己的需要

更新笛卡尔坐标位置
this.plotDrawTip && this.plotDrawTip.updatePosition(position);

销毁提示组件
this.plotDrawTip.remove();

1.PlotDrawTip类

代码如下（示例）：

import Vue from "vue"

import TipVue from "./Tip.vue"
let TipVm = Vue.extend(TipVue)

//绘制鼠标提示类
export default class PlotDrawTip {
    constructor(viewer) {
        this.viewer = viewer;
        //创建模板
        this.vmInstance = new TipVm({
            propsData: {
                contents: []
            }
        }).$mount(); 

        viewer.cesiumWidget.container.appendChild(this.vmInstance.$el); //将字符串模板生成的内容添加到DOM上
        this.addPostRender();
    }

    setContent(contents) {
        this.vmInstance.contents = contents;
    }

    updatePosition(newPosition) {
        this.position = newPosition;
    }

    //添加场景事件
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }

    //场景渲染事件 实时更新标签的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
        if (!this.position) return;

        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
        this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y - 20 + "px";
        const elWidth = this.vmInstance.$el.offsetWidth;
        this.vmInstance.$el.style.left = windowPosition.x + 50 + "px";
    }

    //移除标绘
    remove() {
        this.viewer.cesiumWidget.container.removeChild(this.vmInstance.$el); //删除DOM
        this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
    }
}

2.Tip.vue组件

样式根据自己的情况修改

<template>
  <div class="plot-draw-tip-container">
    <div  v-for="(text,index) in contents" :key="index">{{text}}</div>
  </div>
</template>
<script>
export default {
  name: "PlotDrawTip",
  props: {
    contents: {
      type: Array
    }
  }
};
</script>

<style lang="css" scoped>
.plot-draw-tip-container {
  position: absolute;
  background: rgba(0, 0, 0, 0.637);
  padding: 6px;
  color: white;
    pointer-events: none;
}

.plot-draw-tip-container::before {
  position: absolute;
  content: "";
  top: calc(50% - 10px);
  left:  -10px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.637);
}
</style>