vue-cesium
Version:
Vue 3.x components for CesiumJS.
308 lines (305 loc) • 11.4 kB
JavaScript
import '../../../composables/index.mjs';
import usePosition from '../../../composables/private/use-position.mjs';
import { VcBtn, VcTooltip } from '../../ui/index.mjs';
import { $ } from '../../../utils/private/vm.mjs';
import { defineComponent, getCurrentInstance, ref, reactive, computed, onUnmounted, h, createCommentVNode } from 'vue';
import _Viewer from '../../viewer/index.mjs';
import { hSlot } from '../../../utils/private/render.mjs';
import { commonEmits } from '../../../utils/emits.mjs';
import { compareCesiumVersion, makeColor } from '../../../utils/cesium-helpers.mjs';
import useCommon from '../../../composables/use-common/index.mjs';
import { useLocale } from '../../../composables/use-locale/index.mjs';
"use strict";
const overviewProps = {
position: {
type: String,
default: "bottom-right",
validator: (v) => ["top-right", "top-left", "bottom-right", "bottom-left"].includes(v)
},
offset: {
type: Array,
validator: (v) => v.length === 2
},
width: {
type: String,
default: "150px"
},
height: {
type: String,
default: "150px"
},
border: {
type: String,
default: "solid 4px rgb(255, 255, 255)"
},
borderRadius: {
type: String
},
toggleOpts: {
type: Object
},
viewerOpts: {
type: Object
},
centerRectColor: {
type: [Object, Array, String],
default: "#ff000080"
},
widthFactor: {
type: Number,
default: 2
},
heightFactor: {
type: Number,
default: 2
},
modelValue: {
type: Boolean,
default: true
}
};
var OverviewMap = defineComponent({
name: "VcOverviewMap",
props: overviewProps,
emits: {
...commonEmits,
"update:modelValue": (value) => true
},
setup(props, ctx) {
const instance = getCurrentInstance();
instance.cesiumClass = "VcOverviewMap";
instance.cesiumEvents = [];
const commonState = useCommon(props, ctx, instance);
if (commonState === void 0) {
return;
}
const { t } = useLocale();
const { $services } = commonState;
const rootRef = ref(null);
const toggleBtnRef = ref(null);
const rootStyle = reactive({});
const tooltipRef = ref(null);
const viewerRef = ref(null);
const positionState = usePosition(props, $services);
const showing = ref(props.modelValue);
let unwatchFns = [];
let overviewViewer;
let centerRect;
const toggleOpts = computed(() => {
return Object.assign(
{},
{
color: "#fff",
background: "#3f4854",
icon: "vc-icons-overview-toggle",
size: "15px",
tooltip: {
delay: 500,
anchor: "bottom middle",
offset: [0, 20],
tip: void 0
}
},
props.toggleOpts
);
});
const viewerOpts = computed(() => {
return Object.assign(
{},
{
removeCesiumScript: false,
showCredit: false,
sceneMode: 2,
containerId: "vc-overview-map"
},
props.viewerOpts
);
});
instance.createCesiumObject = async () => {
const { viewer } = $services;
const viewerElement = viewer._element;
viewerElement.appendChild($(rootRef));
return [$(rootRef), $(viewerRef)];
};
instance.mount = async () => {
updateRootStyle();
const { viewer } = $services;
viewer.clock.onTick.addEventListener(onClockTick);
return true;
};
instance.unmount = async () => {
const { viewer } = $services;
const viewerElement = viewer._element;
viewer.clock.onTick.removeEventListener(onClockTick);
viewerElement.contains($(rootRef)) && viewerElement.removeChild($(rootRef));
return true;
};
const onClockTick = () => {
if (overviewViewer) {
const { viewer: parentViewer } = $services;
const parentCameraRectangle = parentViewer.camera.computeViewRectangle();
const { defined } = Cesium;
if (!defined(parentCameraRectangle)) {
return;
}
const rectangle = parentCameraRectangle.expand(props.widthFactor, props.heightFactor);
overviewViewer.camera.flyTo({
destination: rectangle.clone(),
// destination: parentViewer.camera.position,
orientation: {
heading: parentViewer.camera.heading,
pitch: parentViewer.camera.pitch,
roll: parentViewer.camera.roll
},
duration: 0
});
const { Cartesian3, SceneTransforms } = Cesium;
const wnPosition = Cartesian3.fromRadians(parentCameraRectangle.west, parentCameraRectangle.north);
const enPosition = Cartesian3.fromRadians(parentCameraRectangle.east, parentCameraRectangle.north);
const wsPosition = Cartesian3.fromRadians(parentCameraRectangle.west, parentCameraRectangle.south);
const esPosition = Cartesian3.fromRadians(parentCameraRectangle.east, parentCameraRectangle.south);
const scene = overviewViewer.scene;
compareCesiumVersion(Cesium.VERSION, "1.121") ? SceneTransforms.worldToWindowCoordinates(scene, wnPosition) : SceneTransforms["wgs84ToWindowCoordinates"](scene, wnPosition);
const wnWindowPosition = compareCesiumVersion(Cesium.VERSION, "1.121") ? SceneTransforms.worldToWindowCoordinates(scene, wnPosition) : SceneTransforms["wgs84ToWindowCoordinates"](scene, wnPosition);
const enWindowPosition = compareCesiumVersion(Cesium.VERSION, "1.121") ? SceneTransforms.worldToWindowCoordinates(scene, enPosition) : SceneTransforms["wgs84ToWindowCoordinates"](scene, enPosition);
const wsWindowPosition = compareCesiumVersion(Cesium.VERSION, "1.121") ? SceneTransforms.worldToWindowCoordinates(scene, wsPosition) : SceneTransforms["wgs84ToWindowCoordinates"](scene, wsPosition);
const esWindowPosition = compareCesiumVersion(Cesium.VERSION, "1.121") ? SceneTransforms.worldToWindowCoordinates(scene, esPosition) : SceneTransforms["wgs84ToWindowCoordinates"](scene, esPosition);
if (!defined(wnWindowPosition) || !defined(enWindowPosition) || !defined(wsWindowPosition) || !defined(esWindowPosition)) {
return;
}
const width = enWindowPosition.x - wnWindowPosition.x;
const height = wsWindowPosition.y - wnWindowPosition.y;
const x = (wnWindowPosition.x + enWindowPosition.x) / 2 - width / 2;
const y = (wnWindowPosition.y + wsWindowPosition.y) / 2 - height / 2;
if (width <= 0 || height <= 0) {
return;
}
const boundingRectangle = new Cesium.BoundingRectangle(x, y, width, height);
centerRect.rectangle = boundingRectangle;
centerRect.material.uniforms.color = makeColor(props.centerRectColor);
centerRect.show = true;
}
};
const onViewerReady = (readyObj) => {
const { viewer } = readyObj;
overviewViewer = viewer;
const control = viewer.scene.screenSpaceCameraController;
control.enableRotate = false;
control.enableTranslate = false;
control.enableZoom = false;
control.enableTilt = false;
control.enableLook = false;
overviewViewer.scene.highDynamicRange = false;
overviewViewer.scene.globe.enableLighting = false;
overviewViewer.scene.globe.showWaterEffect = false;
overviewViewer.scene.globe.depthTestAgainstTerrain = false;
overviewViewer.scene.skyAtmosphere.show = false;
overviewViewer.scene.fog.enabled = false;
overviewViewer.scene.skyBox.show = false;
overviewViewer.scene.sun.show = false;
overviewViewer.scene.moon.show = false;
overviewViewer.scene.highDynamicRange = false;
overviewViewer.scene.globe.showGroundAtmosphere = false;
centerRect = new Cesium.ViewportQuad(new Cesium.BoundingRectangle(150, 100, 100, 50));
centerRect.show = false;
overviewViewer.scene.primitives.add(centerRect);
};
const updateRootStyle = () => {
var _a;
const css = positionState.style.value;
rootStyle.left = css.left;
rootStyle.top = css.top;
rootStyle.transform = css.transform;
rootStyle["pointer-events"] = "none";
css.borderRadius = props.borderRadius;
css.border = props.border;
if (showing.value) {
css.width = props.width;
css.height = props.height;
} else {
const reg = /(\d+)/g;
const regResult = reg.exec(props.border);
const boder = (regResult == null ? void 0 : regResult.length) ? parseFloat(regResult[0]) : 0;
const toggleBtnRefStyle = getComputedStyle((_a = $(toggleBtnRef)) == null ? void 0 : _a.$el);
css.width = `${parseFloat(toggleBtnRefStyle.width) + parseFloat(toggleBtnRefStyle.padding) + boder}px`;
css.height = `${parseFloat(toggleBtnRefStyle.height) + parseFloat(toggleBtnRefStyle.padding) + boder}px`;
}
Object.assign(rootStyle, css);
};
const onToggle = () => {
if (showing.value) {
minimize();
} else {
restore();
}
showing.value = !showing.value;
ctx.emit("update:modelValue", showing.value);
};
const minimize = () => {
var _a;
const reg = /(\d+)/g;
const regResult = reg.exec(props.border);
const boder = (regResult == null ? void 0 : regResult.length) ? parseFloat(regResult[0]) : 0;
const toggleBtnRefStyle = getComputedStyle((_a = $(toggleBtnRef)) == null ? void 0 : _a.$el);
rootStyle.width = `${parseFloat(toggleBtnRefStyle.width) + parseFloat(toggleBtnRefStyle.padding) + boder}px`;
rootStyle.height = `${parseFloat(toggleBtnRefStyle.height) + parseFloat(toggleBtnRefStyle.padding) + boder}px`;
};
const restore = () => {
rootStyle.width = props.width;
rootStyle.height = props.height;
};
onUnmounted(() => {
unwatchFns.forEach((item) => item());
unwatchFns = [];
});
return () => {
const children = [];
children.push(
h(
VcBtn,
{
ref: toggleBtnRef,
class: "toggle toggle-" + props.position + (!showing.value ? " minimized " : ""),
flat: true,
dense: true,
icon: toggleOpts.value.icon,
size: toggleOpts.value.size,
style: { color: toggleOpts.value.color, background: toggleOpts.value.background, "pointer-events": "auto" },
onClick: onToggle
},
() => toggleOpts.value.tooltip ? h(
VcTooltip,
{
ref: tooltipRef,
...toggleOpts.value.tooltip
// onBeforeShow: onTooltipBeforeShow
},
() => h("strong", {}, toggleOpts.value.tooltip.tip || t(`vc.overview.${!showing.value ? "show" : "hidden"}`))
) : createCommentVNode("v-if")
)
);
children.push(
h(
_Viewer,
{
ref: viewerRef,
...viewerOpts.value,
onReady: onViewerReady
},
() => hSlot(ctx.slots.default)
)
);
return h(
"div",
{
ref: rootRef,
class: "vc-overview-map " + positionState.classes.value,
style: rootStyle
},
children
);
};
}
});
export { OverviewMap as default, overviewProps };
//# sourceMappingURL=index.mjs.map