|
|
@@ -52,11 +52,13 @@ import { ScenePoint, Scene, scenePoints, scenes } from "@/store/scene";
|
|
|
import { initRelics, initSelfRelics, relics } from "@/store/relics";
|
|
|
import { computed, onMounted, ref, watchEffect, watch } from "vue";
|
|
|
import { Manage } from "./manage";
|
|
|
+import ScaleLine from "ol/control/ScaleLine";
|
|
|
|
|
|
const activeId = ref<ScenePoint["id"] | null>();
|
|
|
const active = computed(() =>
|
|
|
scenePoints.value.find((point) => point.id === activeId.value)
|
|
|
);
|
|
|
+
|
|
|
const activePixel = ref<number[] | null>();
|
|
|
const triggerRef = ref({
|
|
|
getBoundingClientRect() {
|
|
|
@@ -123,6 +125,24 @@ onMounted(async () => {
|
|
|
});
|
|
|
refreshHots();
|
|
|
refreshTileType();
|
|
|
+ const scaleLine = new ScaleLine({
|
|
|
+ className: "scale-view",
|
|
|
+ maxWidth: 150,
|
|
|
+ minWidth: 100,
|
|
|
+ units: "metric",
|
|
|
+ });
|
|
|
+ // 加载比例尺
|
|
|
+ mapManage.map.addControl(scaleLine);
|
|
|
+ watch(
|
|
|
+ tileType,
|
|
|
+ (type) => {
|
|
|
+ const el = (scaleLine as any).element as HTMLDivElement;
|
|
|
+ el.classList.add(type === "影像底图" ? "light" : "dark");
|
|
|
+ el.classList.remove(type === "影像底图" ? "dark" : "light");
|
|
|
+ console.log(el, type);
|
|
|
+ },
|
|
|
+ { flush: "post", immediate: true }
|
|
|
+ );
|
|
|
});
|
|
|
|
|
|
const activeScenePoint = (point: ScenePoint) => {
|
|
|
@@ -257,4 +277,32 @@ watchEffect(() => {
|
|
|
right: 10px;
|
|
|
top: 10px;
|
|
|
}
|
|
|
+
|
|
|
+.scale-view {
|
|
|
+ --color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ height: 8px;
|
|
|
+ color: var(--color);
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid var(--color);
|
|
|
+ border-top: none;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
+ &.light {
|
|
|
+ --color: #fff;
|
|
|
+ > div {
|
|
|
+ text-shadow: 0 0 2px #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.dark {
|
|
|
+ --color: #000;
|
|
|
+ > div {
|
|
|
+ text-shadow: 0 0 2px #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
