Cesium撒点管理

markerManageer.js主要是对撒点进行批量管理。即对markerEntity的多个实例进行统一处理。

# 初始化

import MarkersManager2 from '...' // 工具所在路径
import PersonInfoWin from './personInfoWin.vue' // 引入气泡框
Vue.component('PersonInfoWin', PersonInfoWin) // 全局注册气泡框组件
let markersManager = null
export default {
  ...
  methods:{
   getViewer(viewer) {
     markersManager = new MarkersManager({
       viewer, // 实例
       context: this, // 当前上下文
       dealMarkerImg(item) { // 这个item是我们调用markersManager.initSprinkle({ data })中data的每一项数组元素。
          let type = null
          switch (item.imgType) {
            case 'person': type = 'env_point'
            break
            case 'xinxin': type = 'shipinold'
            break
            default:
            type = 'gongdian'
          }
          return type
        },
        imgWidth: 50, // 实体广告牌（图片）的宽度
        imgHeight: 50,
        matchWindow(item) { // 这个item和dealMarkerImg中的来源一致。返回的obj包括下面三个
          const obj = {}
          obj.render = (h, { destory }) => {
            return <PersonInfoWin onClose={destory} info={POINTS_RES.result[item.num]} />
          }
          obj.offset = { x: 50, y: 50 }
          obj.postRender = (div) => { if (item.id > 20) { div.style.left = '300px' } }
          return obj
        },
        markerClick(marker) { // 点击相应实体的实例
          console.log(marker, 'ddadasdsdd6566')
        }
     })
     markersManager.initSprinkle({ data }) // 撒点
   }
  }
}

提示

可以发现这里采用的是markersManager = new MarkersManager({...})，而不是采用this.markersManager = new MarkersManager({...})，因为后者会触发vue的监听机制导致性能的消耗。
markerClick通常的使用场景是，当点击标签时，表格需要滚动到对应的位置。
MarkersManager会依赖到全局的Cesium,因此需要确保Cesium是正常加载的，并且是加载完成的，对于建管平台是有@loadResource('Cesium/Cesium.js')是有来保证的，而另一个基本的依赖是viewer，这个是Cesium的实例化对象。

# 图标

可以发现进行初始化时是有参数dealMarkerImg进行标签图标处理,dealMarkerImg作用的时机是在撒点过程中的，而一旦撒点完成，要想进行标签图标的更改（通常的情况是调用接口，根据业务类型，进行图标的选择），此时就是需要使用changeMarkerImgs。

markersManager && markersManager.changeMarkerImgs({ filter: (item) => item.imageType === 'env_point', img: 'risk_point_1' })

提示

最终的图标地址是static/Cesium/imgs/${img}.png。

# 参数说明

# 属性

属性	描述	类型	可选值	默认值
viewer	视图资源	`Object`	必填	-
context	连接上下文的this	`Object`	必填	—
imgWidth	实体图片的宽度	`Number`	-	30
imgHeight	实体图片的高度	`Number`	-	30
matchWindow	带一个参数(item),是初始化撒点传入的data中的每一项数组元素。需要返回一个obj = {render， offset， postRender} .obj.render是气泡框，obj.offset是气泡框偏移{x:num,y:num} ,obj.postRender可以根据接收的参数（一个气泡框元素）修改气泡框的样式	`Function`	-	-
markerClick	接收一个参数marker，点击实体的实例化对象.写了这个方法，实体的点击状态只能出现一个	`Function`	-	-
dealMarkerImg	接收一个参数，代表撒点实例化传入的data的每一项数组元素，可以根据该自定义的方法撒出点的不同图标	`Number`	-	30
isSingleInstance	控制是否需要单实例处理	`Boolean`	-	true

# 方法

方法名	说明	参数	参数说明
initSprinkle	初始化撒点	{data}	data是一个数组对象`[{id,position,...}]`
removeAllMarkers	销毁data中所有的实体	-	-
dealSingleInstance	单实例的处理，用于清除所有的实体的闪烁和弹框	marker	传入的实例
closeAllWinAndTwinkle	销毁所有的窗口与闪烁	-	-
changeMarkerImgs	根据传入的筛选条件，批量更换图标	{ filter, img }	filter -- `Function`,筛选条件，放在filter()方法里面的回调；img -- `String`更换的图片
getMarker	根据id获取相应实体	id	data里面的id
pickMarker	根据传入的id获取对应实体，再消除其它实体的闪烁和弹框然后视图飞到对应的实体中并且模拟点击	{ id, interval, isTwinkle, showWin }	interval是视图飞行时间，isTwinkle判断标签是否闪烁，showWin判断是否展示弹窗
sprinkle	撒点	{ data, isInit }	data是一个数组对象`[{id,position,...}]`，isInit -- `Boolean`是否要清除所有的实体重新初始化撒点
refreshSprinkle	根据新传入的data，进行撒点的刷新	{data}	data是一个数组对象`[{id,position,...}]`

# 源码及示例参考

源码 (opens new window) 示例 (opens new window)

Cesium标签实例化 Cesium图片移动轨迹

建设管理平台

Choose mode