0.0.3 • Published 5 months ago

ux-cesium v0.0.3

Weekly downloads
-
License
-
Repository
github
Last release
5 months ago

cesium promitive加载点位,动态追踪label,点位弹窗(支持传入标签,component),标会plot

##点位操作

import { map, mapConfig, AddMarker,DragPoint }  from 'ux-cesium'

AddMarker.add 添加, params: ({ list = [], type = 'billbord', name = 'default', icon = '', config = {}, nodetail = false })  type:billboard,label,text,polygon,polyline,clusterPoint,modal
AddMarker.selected 当前选中, params: (data = {}, config = {})
AddMarker.get 获取, params: (names = '', isData = false)
AddMarker.del 删除, params: (names = '')
AddMarker.show 显隐, params: (names = '', isShow)
AddMarker.textFn({list:[],html:'html字符串或者render函数',config,name})  自定义追踪label 或者AddMarker.add type:text
AddMarker.modalFn({item:{},html:'html字符串或者render函数',config,name}) 点位弹窗 或者AddMarker.add type:modal
AddMarker.clusterPointFn({list:[{ lng:114.1135659351782, lat:22.602362676248773}],name:'',config:{},nodetail:false,clusterIcon:'',icon:''}) primitive点位聚合 clusterIcon 聚合icon

增加拖动点位方法
new DragPoint({callback:(p)=>{
      console.log('p: ', p);
  
}})

PLOT标会使用方法

import {Plot, plotConfig , AddMarker } from 'ux-cesium'
const defaultConfig = {
  // 设置默认参数
  // imgUrl: '', // 图标
  pointSize: 1, //点位大小
  textColor: '#fff', //标注颜色
  textSize: 16, //标注大小
  style: 'solid', //样式
  color: '#BCA00D', //填充
  borderColor: 'red', //边框,线条颜色
  borderSize: 4, //粗细
  labelShow: true,
  styleImg: '0',
  alpha: 0.2,
};
const tabsActive = ref(0)
const curPlot = ref({}) // 当前标绘
const plotData = ref([]) // 标绘数据
function plotClick(item){
  curPlot.value = item;
  let newConfig = {
    type:item.type, // type (必传)
    customConfig:{ // 使用自定义配置参数如 (案例:billboard 属性)
      image:'/favicon.jpg',
      with:20,
      height:30,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      disableDepthTestDistance: Number.MAX_VALUE,
    }
  }
  let config = {...defaultConfig,...item} // 方式1:变量式新增
  // config = newConfig // 方式2:自定义属性新增
  const plot = new Plot(config,e=>{
    plotData.value.unshift(e.getData())
    // console.error("🚀 ~ file: index.vue:40 ~ plot ~ e:", JSON.stringify(plotData.value))
  })
}
// 删除标绘
function clear(id,i) {
  Plot.clear(id);
  plotData.value.splice(i,1)
}
// 默认载入数据
function showData() {
  // const parent =  window.viewer.entities.getOrCreateEntity('父实体-可有可无');
  plotData.value.forEach(async (item: any) => {
    const plot = await Plot.toData(item, null);
    const parent =  window.viewer.entities.getOrCreateEntity('父实体-可有可无');
    plot.addDraw.parent = parent;
  });
}
let handler = null
function init(){
  handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
  handler.setInputAction((evt) => {
    const pick = window.viewer.scene.pick(evt.position);
    if (pick?.id?.objId || pick?.id.startsWith("plot")) {
      const row = plotData.value.find(o=>o.config.objId == pick.id?.objId || pick.id == o.config.objId)
      if(!row) return;
      // Plot.edit({ curData:row , allData:plotData}) // 或
      Plot.edit({ curData:row, moveMultiple:true  },(callback)=>{ 
        //allData:用来处理删除当前实体;或传入 callback:删除实体后回调, moveMultiple: 启用整体移动; hide:不显示编辑
        plotData.value = plotData.value.filter(o=> o.config.objId != row.config.objId)
      })
    }else{
      Plot.edit({ hide:true}) // 隐藏编辑点位
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
onMounted(() => {
  plotData.value =[{"positions":[{"x":-2389410.806483038,"y":5387079.825678937,"z":2431229.991352521}],"config":{"pointSize":0.5,"textColor":"#fff","textSize":16,"style":"solid","color":"#BCA00D","borderColor":"red","borderSize":4,"labelShow":true,"styleImg":"0","alpha":0.2,"label":"已灭火点","type":"drawPoint","imgUrl":"/images/plot/allPlots.png","isPrimitives":true,"imageSubRegion":[200,65,64,64],"showType":[3,4],"objId":"plot-1678895315394"}},{"positions":[{"x":-2370599.1889191885,"y":5397758.915520606,"z":2425989.03947019}],"config":{"pointSize":0.5,"textColor":"#fff","textSize":16,"style":"solid","color":"#BCA00D","borderColor":"red","borderSize":4,"labelShow":true,"styleImg":"0","alpha":0.2,"label":"烟点","type":"drawPoint","imgUrl":"/images/plot/allPlots.png","imageSubRegion":[68,65,64,64],"showType":[3,4],"objId":"plot-1678895313072"}}]
  nextTick(()=>{
      showData()
      init()
  })
});