vue-cesium
Version:
Vue 3.x components for CesiumJS.
347 lines (344 loc) • 12.3 kB
JavaScript
import { defineComponent, getCurrentInstance, watch, onUnmounted, h, createCommentVNode } from 'vue';
import '../../../composables/index.mjs';
import { show, enableMouseEvent } from '../../../utils/cesium-props.mjs';
import { addCustomProperty, kebabCase } from '../../../utils/util.mjs';
import { primitiveEmits } from '../../../utils/emits.mjs';
import '../../../shared/index.mjs';
import { hSlot } from '../../../utils/private/render.mjs';
import { cloneDeep, differenceBy } from 'lodash-unified';
import usePrimitives from '../../../composables/use-primitives/index.mjs';
import PrimitiveCluster$1 from '../../../shared/src/PrimitiveCluster.mjs';
;
const primitiveClusterProps = {
...show,
enabled: {
type: Boolean,
default: true
},
pixelRange: {
type: Number,
default: 80
},
minimumClusterSize: {
type: Number,
default: 2
},
clusterBillboards: {
type: Boolean,
default: true
},
clusterLabels: {
type: Boolean,
default: true
},
clusterPoints: {
type: Boolean,
default: true
},
billboards: {
type: Array,
default: () => []
},
labels: {
type: Array,
default: () => []
},
points: {
type: Array,
default: () => []
},
...enableMouseEvent
};
var PrimitiveCluster = defineComponent({
name: "VcPrimitiveCluster",
props: primitiveClusterProps,
emits: {
...primitiveEmits,
clusterEvent: (ids, cluster) => true
},
setup(props, ctx) {
var _a;
const instance = getCurrentInstance();
instance.cesiumClass = "VcPrimitiveCluster";
instance.cesiumEvents = ["clusterEvent"];
const primitivesState = usePrimitives(props, ctx, instance);
const unwatchFns = [];
unwatchFns.push(
watch(
() => props.show,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.show = val;
}
)
);
unwatchFns.push(
watch(
() => props.enabled,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.enabled = val;
}
)
);
unwatchFns.push(
watch(
() => props.minimumClusterSize,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.minimumClusterSize = val;
}
)
);
unwatchFns.push(
watch(
() => props.clusterBillboards,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.clusterBillboards = val;
instance.proxy["reload"]();
}
)
);
unwatchFns.push(
watch(
() => props.clusterLabels,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.clusterLabels = val;
instance.proxy["reload"]();
}
)
);
unwatchFns.push(
watch(
() => props.clusterBillboards,
(val) => {
const primitiveCluster = instance.cesiumObject;
primitiveCluster.clusterPoints = val;
instance.proxy["reload"]();
}
)
);
unwatchFns.push(
watch(
() => cloneDeep(props.billboards),
(newVal, oldVal) => {
if (!instance.mounted) {
return;
}
const primitiveCluster = instance.cesiumObject;
const billboardCollection = primitiveCluster._billboardCollection;
if (newVal.length === oldVal.length) {
const modifies = [];
for (let i = 0; i < newVal.length; i++) {
const options = newVal[i];
const oldOptions = oldVal[i];
if (JSON.stringify(options) !== JSON.stringify(oldOptions)) {
modifies.push({
newOptions: options,
oldOptions
});
}
}
modifies.forEach((modify) => {
const modifyBillboard = billboardCollection._billboards.find((v) => (v == null ? void 0 : v.id) === modify.oldOptions.id);
modifyBillboard && Object.keys(modify.newOptions).forEach((prop) => {
if (modify.oldOptions[prop] !== modify.newOptions[prop]) {
modifyBillboard[prop] = primitivesState == null ? void 0 : primitivesState.transformProp(prop, modify.newOptions[prop]);
}
});
});
} else {
const addeds = differenceBy(newVal, oldVal, "id");
const deletes = differenceBy(oldVal, newVal, "id");
const deleteBillboards = [];
for (let i = 0; i < deletes.length; i++) {
const deleteBillboard = billboardCollection._billboards.find((v) => v.id === deletes[i].id);
deleteBillboard && deleteBillboards.push(deleteBillboard);
}
deleteBillboards.forEach((v) => {
billboardCollection.remove(v);
});
addBillboards(billboardCollection, addeds);
setTimeout(() => {
primitivesState.$services.viewer.scene.camera.changed.raiseEvent();
});
}
},
{
deep: true
}
)
);
unwatchFns.push(
watch(
() => cloneDeep(props.labels),
(newVal, oldVal) => {
if (!instance.mounted) {
return;
}
const primitiveCluster = instance.cesiumObject;
const labelCollection = primitiveCluster._labelCollection;
if (newVal.length === oldVal.length) {
const modifies = [];
for (let i = 0; i < newVal.length; i++) {
const options = newVal[i];
const oldOptions = oldVal[i];
if (JSON.stringify(options) !== JSON.stringify(oldOptions)) {
modifies.push({
newOptions: options,
oldOptions
});
}
}
modifies.forEach((modify) => {
const modifyLabel = labelCollection._labels.find((v) => v.id === modify.oldOptions.id);
modifyLabel && Object.keys(modify.newOptions).forEach((prop) => {
if (modify.oldOptions[prop] !== modify.newOptions[prop]) {
modifyLabel[prop] = primitivesState.transformProp(prop, modify.newOptions[prop]);
}
});
});
} else {
const addeds = differenceBy(newVal, oldVal, "id");
const deletes = differenceBy(oldVal, newVal, "id");
const deleteLabels = [];
for (let i = 0; i < deletes.length; i++) {
const deleteLabel = labelCollection._labels.find((v) => v.id === deletes[i].id);
deleteLabel && deleteLabels.push(deleteLabel);
}
deleteLabels.forEach((v) => {
labelCollection.remove(v);
});
addLabels(labelCollection, addeds);
setTimeout(() => {
primitivesState.$services.viewer.scene.camera.changed.raiseEvent();
});
}
},
{
deep: true
}
)
);
unwatchFns.push(
watch(
() => cloneDeep(props.points),
(newVal, oldVal) => {
if (!instance.mounted) {
return;
}
const primitiveCluster = instance.cesiumObject;
const pointCollection = primitiveCluster._pointCollection;
if (newVal.length === oldVal.length) {
const modifies = [];
for (let i = 0; i < newVal.length; i++) {
const options = newVal[i];
const oldOptions = oldVal[i];
if (JSON.stringify(options) !== JSON.stringify(oldOptions)) {
modifies.push({
newOptions: options,
oldOptions
});
}
}
modifies.forEach((modify) => {
const modifyPoint = pointCollection._pointPrimitives.find((v) => v && v.id === modify.oldOptions.id);
modifyPoint && Object.keys(modify.newOptions).forEach((prop) => {
if (modify.oldOptions[prop] !== modify.newOptions[prop]) {
modifyPoint[prop] = primitivesState.transformProp(prop, modify.newOptions[prop]);
}
});
});
} else {
const addeds = differenceBy(newVal, oldVal, "id");
const deletes = differenceBy(oldVal, newVal, "id");
const deletePoints = [];
for (let i = 0; i < deletes.length; i++) {
const deletePoint = pointCollection._pointPrimitives.find((v) => v.id === deletes[i].id);
deletePoint && deletePoints.push(deletePoint);
}
deletePoints.forEach((v) => {
pointCollection.remove(v);
});
addPoints(pointCollection, addeds);
setTimeout(() => {
primitivesState.$services.viewer.scene.camera.changed.raiseEvent();
});
}
},
{
deep: true
}
)
);
instance.createCesiumObject = async () => {
const primitiveCluster = new PrimitiveCluster$1({
show: props.show,
enabled: props.enabled,
pixelRange: props.pixelRange,
minimumClusterSize: props.minimumClusterSize,
clusterBillboards: props.clusterBillboards,
clusterLabels: props.clusterLabels,
clusterPoints: props.clusterPoints
});
const billboardCollection = new Cesium.BillboardCollection();
addBillboards(billboardCollection, props.billboards);
const labelCollection = new Cesium.LabelCollection();
addLabels(labelCollection, props.labels);
const pointCollection = new Cesium.PointPrimitiveCollection();
addPoints(pointCollection, props.points);
primitiveCluster._billboardCollection = billboardCollection;
primitiveCluster._labelCollection = labelCollection;
primitiveCluster._pointCollection = pointCollection;
primitiveCluster._initialize(primitivesState.$services.viewer.scene);
setTimeout(() => {
primitivesState.$services.viewer.scene.camera.changed.raiseEvent();
});
return primitiveCluster;
};
const addPoints = (pointCollection, points) => {
for (let i = 0; i < points.length; i++) {
const pointOptions = points[i];
pointOptions.id = Cesium.defined(pointOptions.id) ? pointOptions.id : Cesium.createGuid();
const pointOptionsTransform = primitivesState.transformProps(pointOptions);
const point = pointCollection.add(pointOptionsTransform);
addCustomProperty(point, pointOptionsTransform);
}
};
const addBillboards = (billboardCollection, billboards) => {
for (let i = 0; i < billboards.length; i++) {
const billboardOptions = billboards[i];
billboardOptions.id = Cesium.defined(billboardOptions.id) ? billboardOptions.id : Cesium.createGuid();
const billboardOptionsTransform = primitivesState.transformProps(billboardOptions);
const billboard = billboardCollection.add(billboardOptionsTransform);
addCustomProperty(billboard, billboardOptionsTransform);
}
};
const addLabels = (labelCollection, labels) => {
for (let i = 0; i < labels.length; i++) {
const labelOptions = labels[i];
labelOptions.id = Cesium.defined(labelOptions.id) ? labelOptions.id : Cesium.createGuid();
const labelOptionsTransform = primitivesState.transformProps(labelOptions);
const label = labelCollection.add(labelOptionsTransform);
addCustomProperty(label, labelOptionsTransform);
}
};
onUnmounted(() => {
unwatchFns.forEach((item) => item());
unwatchFns.length = 0;
});
const name = ((_a = instance.proxy) == null ? void 0 : _a.$options.name) || "";
return () => ctx.slots.default ? h(
"i",
{
class: kebabCase(name),
style: { display: "none !important" }
},
hSlot(ctx.slots.default)
) : createCommentVNode(kebabCase(name));
}
});
export { PrimitiveCluster as default, primitiveClusterProps };
//# sourceMappingURL=index.mjs.map