ux-cesium
v0.0.4
Published
<!-- * @Descripttion: * @version: * @Author: houqiangxie * @Date: 2022-11-24 17:13:54 * @LastEditors: houqiangxie * @LastEditTime: 2024-10-28 11:36:16 --> # cesium promitive加载点位,动态追踪label,点位弹窗(支持传入标签,component),标会plot
Downloads
19
Readme
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()
})
});