Cesium标签实例化

cesium撒点是一个常见的需求，关联的开发会涉及到标签的闪烁的处理，气泡框的处理，根据业务数据反向拾取标签等。而目前基于已有的cesiumViewer组件中仅仅提供了addMarkerToMap方法（向cesium添加标签），以及建管平台中添加的addHtml方法（用来处理气泡框，然后除此之外的，会涉及到基本的比如标签的闪烁，窗口的销毁等等粒度很细的api，最后，还不能忘记了对于事件的销毁。总而言之，需要考虑到的细节很多。
markerEntity让一些具有内在逻辑的关联关系已经被处理掉，让开发者直接关于业务的开发，关注于不同业务数据呈现不同的标签图标，关注于气泡框组件的开发。

# 初始化

import MarkerEntity from '@/components/CesiumViewer/kit/markerEntity.js' // 引入
let testMarker = null // 创建变量
// 创建实例 --- 这里的实例包括广告牌和文字图形（广告牌就是图片，文字图形就是文字）
testMarker = new MarkerEntity({
        viewer: viewer,
        context: this,
        position: {
          x: -2385013.7159148525,
          y: 5390817.750106864,
          z: 2427286.1960613653
        },
        imageType: 'gongdian',
        label: 'Hello World',
        options: {
          textfillColor: 'rgba(184, 20, 20, 0.5)', // 文字的颜色
          textFont: '12px'
        },
        renderWin(h, { destory }) {
          return <PersonInfoWin onClose={destory} info={POINTS_RES.result[0]} />
        },
        postRender(div) { // 设置弹窗的样式
          div.style.left = '1000px'
        },
        winOffest: { // 弹窗的偏移量
          x: 150,
          y: 150
        }
      })

# 参数说明

# 属性

属性	描述	类型	可选值	默认值
viewer	视图资源	`Object`	必填	-
context	连接上下文的this	`Object`	必填	—
position	实体的位置	`Object`	必填	-
imageType	图片的名称，默认放在'static/Cesium/imgs'文件下	`String`	-	-
label	要展示的文字	`String`	-	-
options	展示的文字/图片的各种属性,下面细说它的每个key	`Object`	-	-
options.textfillColor	展示的文字的颜色	`String`	#rgb、#rgba、#rrggbb、#rrggbbaa、rgb()、rgba()、hsl() 或 hsla() 格式的 CSS 颜色值	白色
options.textFont	展示文字的大小	`String`	可选，比如 `'15px'`	`'16px sans-serif'` ********
options.showBackground	展示的文字的背景颜色是否显示	`Boolean`	-	true
options.backgroundColor	展示的文字的背景色	`String`	-	`'#15a5e2'`，蓝色
options.imgWidth	展示的图片的宽度	`Number`	-	30
options.imgHeight	展示的图片的高度	`Number`	-	30
winOffest	弹窗相对于实体的偏移量，x指左右，y指上下	`Object`	-	{x: 30, y: 30}
clickShowWin	判断点击事件发生后，是否展示弹窗	`Boolean`	-	true
clickTwinkle	判断点击事件发生后实体是否闪烁	`Boolean`	-	true
twinkleInterval	延迟多久执行闪烁	`Number`	-	600
click	鼠标左键实体的时候能接受一个参数，该参数是类中的this	`Function`	-	-

# 事件

事件名称	说明	回调参数	参数说明
renderWin	点击实体事件发生的时候触发，画弹窗，return一个组件出去就行	(h, {destroy, fatherEle, currentEle})	h是render函数的渲染函数，必填；destroy是为了销毁弹窗的方法；fatherEle是视图元素；currentEle：当前弹窗的元素
postRender	点击实体事件发生的时候触发，可以修改弹窗的位置	div,随便写的名字，可以改的	比如：div.style.left = '1000px'，这样是让弹窗相对于视图的最左侧距离1000px的像素

# 方法

方法名	说明	参数	参数说明
addClick	在点击事件发生的时候将接受this，连接上下文。`obj.addClick((that) => {console.log(that)})`	回调函数	其中接受一个this参数，连接上下文的作用
removeClick	移除点击事件的click方法	-	-
setPosition	可以修改实体的位置，如果循环调用，可以不停的换位置噢	`position`，数据类型`Object`	，希望实体出现的位置
setImage	更换实体的广告牌（实体的图片）	`imgType`，数据类型是`String`	默认放在`static/Cesium/imgs`这个文件夹下面
destory	销毁弹窗、闪烁、实体，点击事件也会被移除	-	-
triggerClick	模拟点击，调用这个方法就跟点击了一样的效果	`{ isTwinkle, showWin }`, 参数是一个对象，必须传递一个对象。如果不想传递isTwinkle, showWin这两个，也得传一个空对象过去。({})	isTwinkle控制是否闪烁，showWin控制弹窗是否展示。数据类型布尔值
flyTo	相机飞到该实体，谁调用这个方法实体就是谁	`Number`，一个参数.单位s	表示飞行持续时间