123 lines
3.4 KiB
Vue
123 lines
3.4 KiB
Vue
<template>
|
||
<vc-viewer :showCredit="false" @ready="ready" @leftDoubleClick="leftDoubleClick" :info-box="false">
|
||
<vc-layer-imagery>
|
||
<vc-imagery-provider-urltemplate
|
||
:projectionTransforms="projectionTransforms"
|
||
:url="img_url"
|
||
>
|
||
</vc-imagery-provider-urltemplate>
|
||
</vc-layer-imagery>
|
||
|
||
<vc-layer-imagery>
|
||
<vc-imagery-provider-urltemplate
|
||
:projectionTransforms="projectionTransforms"
|
||
:url="ann_url"
|
||
>
|
||
</vc-imagery-provider-urltemplate>
|
||
</vc-layer-imagery>
|
||
|
||
<vc-status-bar />
|
||
|
||
<slot></slot>
|
||
|
||
<vc-navigation
|
||
:offset="[10, 30]"
|
||
:position="'bottom-left'"
|
||
:printOpts="false"
|
||
:locationOpts="false"
|
||
:otherOpts="false"
|
||
/>
|
||
<Compass @Pointing = "pointTo"/>
|
||
</vc-viewer>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Compass from '/@/components/Compass.vue'
|
||
import { usePointStore } from "/@/stores/point";
|
||
import { usePositionStore } from "/@/stores/position";
|
||
import { useFlytoStore } from "/@/stores/flyto";
|
||
import {
|
||
VcViewer,
|
||
VcStatusBar,
|
||
VcLayerImagery,
|
||
VcImageryProviderUrltemplate,
|
||
VcNavigation,
|
||
} from "vue-cesium";
|
||
import { isLnglat } from "/@/api/util";
|
||
|
||
const projectionTransforms = { from: "GCJ02", to: "WGS84" };
|
||
|
||
const img_url = "https://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&style=6";
|
||
const ann_url = "https://webst01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&style=8";
|
||
|
||
let Cesium = null,
|
||
viewer = null;
|
||
const ready = (readyObj) => {
|
||
Cesium = readyObj.Cesium;
|
||
viewer = readyObj.viewer;
|
||
|
||
viewer._selectionIndicator = false;
|
||
//不显示选中指示器
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||
//屏蔽Cesium的默认双击追踪选中entity行为
|
||
};
|
||
|
||
const point = usePointStore();
|
||
const leftDoubleClick = ({ position }) => {
|
||
if (!viewer) return;
|
||
|
||
if (point.index >= point.length) {
|
||
alert(`最多只能够添加 ${point.length} 个点`);
|
||
return;
|
||
}
|
||
|
||
const cartesian = viewer.camera.pickEllipsoid(position, viewer.scene.globe.ellipsoid);
|
||
|
||
if (!cartesian) return;
|
||
|
||
const lnglat = cartesian2Lonlat(cartesian);
|
||
|
||
point.addItem(lnglat);
|
||
};
|
||
|
||
const cartesian2Lonlat = (cartesian) => {
|
||
if (!Cesium) return;
|
||
|
||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
const lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);
|
||
const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);
|
||
|
||
return { lng, lat };
|
||
};
|
||
|
||
const position = usePositionStore();
|
||
position.$subscribe((_, state) => {
|
||
// 侦听到state变化时，把state存在localStorage中
|
||
// localStorage.setItem('cart', JSON.stringify(state))
|
||
if (!isLnglat(state)) return;
|
||
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(state.lng, state.lat, 2000.0),
|
||
});
|
||
});
|
||
|
||
const flyto = useFlytoStore();
|
||
flyto.$subscribe((_, state) => {
|
||
if (!isLnglat(state)) return;
|
||
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(state.lng, state.lat, 2000.0),
|
||
});
|
||
});
|
||
|
||
// 默认值 天安门广场经纬度 116.39140105, 39.90452844 高度 2000.0
|
||
const pointTo = () => {
|
||
let initialPosition = Cesium.Cartesian3.fromDegrees(position.lng?position.lng:116.39140105, position.lat?position.lat:39.90452844, 2000.0);
|
||
let initialOrientation = Cesium.HeadingPitchRoll.fromDegrees(0.0, -90.0, 0.0);
|
||
viewer.camera.flyTo({
|
||
destination: initialPosition,
|
||
orientation: initialOrientation,
|
||
endtransform: Cesium.Matrix4.IDENTITY,
|
||
});
|
||
}
|
||
</script> |