wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

摄像头摆放

pull/1/head
fangjiakai 2024-02-26 15:37:47 +08:00
parent 691796b63b
commit d9308c7fad
8 changed files with 294 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/lib/Cesium/CustomCesium.js
View File

@ -127,13 +127,6 @@ var CustomCesium;
navigationHelpButton: !1,
fullscreenButton: !1
}), this.icy.viewer.scene.mode, Cesium.SceneMode.COLUMBUS_VIEW, this.icy.viewer.scene.screenSpaceCameraController.enableTilt = !0, this.icy.viewer._cesiumWidget._creditContainer.style.display = "none", this.icy.viewer.scene.globe.depthTestAgainstTerrain = !0, this.icy.viewer.scene.sampleHeightSupported || window.alert("浏览器不支持 sampleHeight."), this.icy.viewer.scene.pickPositionSupported || window.alert("不支持深度纹理,无法绘制多边形，地形开挖功能无法使用！"), this.icy.viewer.scene.globe.enableLighting = !1, this.icy.viewer.shadows = !1, this.icy.viewer.scene.globe.fillHighlightColor = 1, this.icy.viewer.scene.postProcessStages.fxaa.enabled = !0, this.fPSShow(!0), this.initMaterial();
var r = document.createElement("canvas"), n = r.getContext("2d");
let s = "@%E5%BE%97%E7%91%9E%E7%B4%AB%E8%9C%82";
r.width = 12 * decodeURIComponent(s).length, r.height = 18, n.fillStyle = "#ffffff00", n.fillRect(0, 0, r.width, r.height), n.fillStyle = "#8500ff20", n.font = "bold 11px Arial", n.textAlign = "right", n.textBaseline = "bottom";
var a = decodeURIComponent(s);
n.fillText(a, r.width - 2, r.height - 2);
var o = r.toDataURL(), l = document.createElement("img");
l.src = o, l.style = "position:fixed;z-index:9999999;bottom: 5px;left: 5px", document.body.appendChild(l), window.copyright = decodeURIComponent("%E6%9C%ACSDK%E5%9F%BA%E4%BA%8ECesiumJS%EF%BC%8C%E7%94%B1%EF%BC%9A%E5%8C%97%E4%BA%AC%E5%BE%97%E7%91%9E%E7%B4%AB%E8%9C%82%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%20-%20%E5%86%AF~~%20%E5%B0%81%E8%A3%85")
}
fPSShow(e) {

BIN
src/assets/images/map/peoIcon_green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

35
src/components/map_tools/index.vue
View File

@ -1,9 +1,15 @@
<template>
<div id="bi_container">
<div id="map" class="map_bg"></div>
<el-button type="primary" @click="confrim">完成绘制</el-button>
<el-button type="primary" @click="clear">清除绘制</el-button>
<el-button type="primary" @click="reduction">还原建筑</el-button>
<el-button v-show="type === 1" type="primary" @click="confrim"
>完成绘制</el-button
>
<el-button v-show="type === 1" type="primary" @click="clear"
>清除绘制</el-button
>
<el-button v-show="type === 1" type="primary" @click="reduction"
>还原建筑</el-button
>
<span>当前选中楼层id:{{ model_id }}</span>
</div>
</template>
@ -15,6 +21,7 @@ import {
clearEnclosure,
handleEnclosure,
handleMouseClick,
handlePut,
initMap,
reduction,
showEnclosure,
@ -23,11 +30,21 @@ import { useUserStore } from "@/pinia/user.js";
import { getEnterpriseInfo } from "@/request/enterprise_management.js";
const props = defineProps({
type: {
type: Number,
required: true,
default: 1,
},
positions: {
type: Array,
required: true,
default: () => [],
},
position: {
type: Array,
required: true,
default: () => [],
},
modUuid: {
type: String,
required: true,
@ -38,8 +55,12 @@ const userStore = useUserStore();
const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
const data = [];
const model_id = ref(0);
const emits = defineEmits(["update:positions", "update:modUuid"]);
const { positions, modUuid } = useVModels(props, emits);
const emits = defineEmits([
"update:positions",
"update:position",
"update:modUuid",
]);
const { positions, position, modUuid } = useVModels(props, emits);
const confrim = () => {
showEnclosure(data);
@ -55,7 +76,11 @@ onMounted(async () => {
const corp = await getEnterpriseInfo({ CORPINFO_ID });
initMap(corp.pd);
handleMouseClick(model_id);
if (props.type === 1) {
handleEnclosure(data);
} else {
handlePut(position);
}
});
onBeforeUnmount(() => {
window.$scene = null;

119
src/components/map_tools/map.js
View File

@ -5,6 +5,7 @@ let $entityTransparent = [];
const clickModel = new Map();
let enclosure = null;
let entities = null;
export const initMap = (corp) => {
window.$scene = new window.CustomCesium.Scene(
"map",
@ -23,7 +24,6 @@ export const initMap = (corp) => {
),
});
const [wgsLat, wgsLon] = bd09ToWgs84(corp.LATITUDE, corp.LONGITUDE);
console.log(corp.LATITUDE, corp.LONGITUDE);
flyTo(wgsLon, wgsLat);
// 亮度设置
const stages = window.$icy.viewer.scene.postProcessStages;
@ -36,17 +36,84 @@ export const initMap = (corp) => {
};
const bd09ToWgs84 = (bdLat, bdLon) => {
const pi = Math.PI;
const x_pi = (pi * 3000.0) / 180.0;
const x_pi = (Math.PI * 3000.0) / 180.0;
const x = bdLon - 0.0065;
const y = bdLat - 0.006;
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
const wgsLon = z * Math.cos(theta);
const wgsLat = z * Math.sin(theta);
const gcjLon = z * Math.cos(theta);
const gcjLat = z * Math.sin(theta);
let dlat = transformlat(gcjLon - 105.0, gcjLat - 35.0);
let dlng = transformlng(gcjLon - 105.0, gcjLat - 35.0);
const radlat = (gcjLat / 180.0) * Math.PI;
let magic = Math.sin(radlat);
magic = 1 - 0.006693421622965943 * magic * magic;
const sqrtmagic = Math.sqrt(magic);
dlat =
(dlat * 180.0) /
(((6378245.0 * (1 - 0.006693421622965943)) / (magic * sqrtmagic)) *
Math.PI);
dlng =
(dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI);
const mglat = gcjLat + dlat;
const mglng = gcjLon + dlng;
const wgsLon = gcjLon * 2 - mglng;
const wgsLat = gcjLat * 2 - mglat;
return [wgsLat, wgsLon];
};
const transformlat = (lng, lat) => {
let ret =
-100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * Math.PI) +
20.0 * Math.sin(2.0 * lng * Math.PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) *
2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * Math.PI) +
320 * Math.sin((lat * Math.PI) / 30.0)) *
2.0) /
3.0;
return ret;
};
// 纬度转换
const transformlng = (lng, lat) => {
let ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * Math.PI) +
20.0 * Math.sin(2.0 * lng * Math.PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) *
2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * Math.PI) +
300.0 * Math.sin((lng / 30.0) * Math.PI)) *
2.0) /
3.0;
return ret;
};
// eslint-disable-next-line no-unused-vars
const flyTo = (lng, lat) => {
window.$carmer.flyTo({
@ -72,7 +139,6 @@ export const handleMouseClick = (model_id) => {
$mouse.mouseLeft((model) => {
if (model._name === "建筑") {
model_id.value = model._id;
console.log(model_id);
clickBuilding(model);
}
});
@ -226,3 +292,44 @@ export const showEnclosure = (positions) => {
);
enclosure.show(true);
};
export const handlePut = (pos) => {
const $mouse = new window.CustomCesium.Mouse(window.$icy);
$mouse.mouseRight((e) => {
if (entities && entities.children) {
entities.children.forEach((e) => {
e.destroy();
});
entities = null;
}
entities = new window.CustomCesium.GroupModel("摆放地图实例");
addEntity("put_entity_00001", "put_entity_00001", e.lng, e.lat, e.alt);
pos.value = [e.lng, e.lat, e.alt];
});
};
const addEntity = (id, name, lon, lat, height) => {
const obj = {};
obj.entity = window.$icy.viewer.entities.add(
new window.Cesium.Entity({
id,
name,
position: window.Cesium.Cartesian3.fromDegrees(lon, lat, height),
billboard: {
image: "src/assets/images/map/peoIcon_green.png",
height: 36,
width: 30,
verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
})
);
obj.show = (e) => {
obj.entity.show = e;
};
obj.destroy = () => {
window.$icy.viewer.entities.remove(obj.entity);
};
entities.add(obj);
};

2
src/request/map_settings.js
View File

@ -29,3 +29,5 @@ export const getPathPlanningList = (params) =>
post("/positAlarm/coordinateLine/tree", params); // 路径规划列表
export const setPathPlanningDelete = (params) =>
post("/positAlarm/coordinateLine/batchDelete", params); // 路径规划删除
export const setPositioning = (params) =>
post("/videomanager/setPositioning", params); // 摆放摄像头

75
src/views/BI/js/map.js
View File

@ -49,17 +49,84 @@ export const initMap = (corp) => {
};
const bd09ToWgs84 = (bdLat, bdLon) => {
const pi = Math.PI;
const x_pi = (pi * 3000.0) / 180.0;
const x_pi = (Math.PI * 3000.0) / 180.0;
const x = bdLon - 0.0065;
const y = bdLat - 0.006;
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
const wgsLon = z * Math.cos(theta);
const wgsLat = z * Math.sin(theta);
const gcjLon = z * Math.cos(theta);
const gcjLat = z * Math.sin(theta);
let dlat = transformlat(gcjLon - 105.0, gcjLat - 35.0);
let dlng = transformlng(gcjLon - 105.0, gcjLat - 35.0);
const radlat = (gcjLat / 180.0) * Math.PI;
let magic = Math.sin(radlat);
magic = 1 - 0.006693421622965943 * magic * magic;
const sqrtmagic = Math.sqrt(magic);
dlat =
(dlat * 180.0) /
(((6378245.0 * (1 - 0.006693421622965943)) / (magic * sqrtmagic)) *
Math.PI);
dlng =
(dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI);
const mglat = gcjLat + dlat;
const mglng = gcjLon + dlng;
const wgsLon = gcjLon * 2 - mglng;
const wgsLat = gcjLat * 2 - mglat;
return [wgsLat, wgsLon];
};
const transformlat = (lng, lat) => {
let ret =
-100.0 +
2.0 * lng +
3.0 * lat +
0.2 * lat * lat +
0.1 * lng * lat +
0.2 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * Math.PI) +
20.0 * Math.sin(2.0 * lng * Math.PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) *
2.0) /
3.0;
ret +=
((160.0 * Math.sin((lat / 12.0) * Math.PI) +
320 * Math.sin((lat * Math.PI) / 30.0)) *
2.0) /
3.0;
return ret;
};
// 纬度转换
const transformlng = (lng, lat) => {
let ret =
300.0 +
lng +
2.0 * lat +
0.1 * lng * lng +
0.1 * lng * lat +
0.1 * Math.sqrt(Math.abs(lng));
ret +=
((20.0 * Math.sin(6.0 * lng * Math.PI) +
20.0 * Math.sin(2.0 * lng * Math.PI)) *
2.0) /
3.0;
ret +=
((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) *
2.0) /
3.0;
ret +=
((150.0 * Math.sin((lng / 12.0) * Math.PI) +
300.0 * Math.sin((lng / 30.0) * Math.PI)) *
2.0) /
3.0;
return ret;
};
// eslint-disable-next-line no-unused-vars
const flyTo = (lng, lat) => {
window.$carmer.flyTo({

58
src/views/video_manager/video_manager/components/selecting_points.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<el-dialog v-model="visible" title="选点" :on-close="fnClose">
<map-tools
v-if="visible"
ref="mapToolsRef"
v-model:position="position"
:type="2"
/>
<template #footer>
<el-button @click="fnClose">关闭</el-button>
<el-button type="primary" @click="fnSubmit">保存</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { useVModels } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";
import MapTools from "@/components/map_tools";
import { setPositioning } from "@/request/map_settings.js";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
id: {
type: Number,
required: true,
default: 0,
},
});
const emits = defineEmits(["update:visible", "get-data"]);
const { visible } = useVModels(props, emits);
const position = ref([]);
const fnClose = () => {
visible.value = false;
};
const fnSubmit = debounce(
1000,
async () => {
if (position.value.length < 3) {
ElMessage.warning("请选择坐标点");
return;
}
await setPositioning({ camId: props.id, lon: position.value[0], lat: position.value[1], alt: position.value[2] });
ElMessage.success("保存成功");
fnClose();
emits("get-data");
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>

23
src/views/video_manager/video_manager/index.vue
View File

@ -58,7 +58,12 @@
>
修改
</el-button>
<el-button type="primary" text link @click="fnSetPositioning(row)">
<el-button
type="primary"
text
link
@click="fnSetPositioning(row.PLS_ID)"
>
定位
</el-button>
<el-button type="primary" text link @click="fnDeleteVideo(row)">
@ -90,6 +95,11 @@
v-model:visible="data.videoDialog.visible"
:src="data.videoDialog.src"
/>
<selecting-points
:id="data.selectingPointsDialog.id"
v-model:visible="data.selectingPointsDialog.visible"
@get-data="fnResetPagination"
/>
</div>
</template>
@ -107,6 +117,7 @@ import { nextTick, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import VideoView from "./components/video.vue";
import { setVideoManagerList } from "@/request/eightwork_videomanager.js";
import SelectingPoints from "./components/selecting_points.vue";
const data = reactive({
addDialog: {
@ -122,6 +133,10 @@ const data = reactive({
visible: false,
src: "",
},
selectingPointsDialog: {
id: "",
visible: false,
},
});
const { list, pagination, searchForm, fnGetData, fnResetPagination } =
@ -152,9 +167,9 @@ const fnAddOrEdit = async (VIDEOMANAGER_ID, type) => {
data.addDialog.form = resData.pd;
}
};
const fnSetPositioning = async () => {
// 接口路径 /videomanager/setPositioning
// 参数 {"camId":1,"lon":119.44794324054146,"lat":39.91841473114172,"alt":12.189401230148036}
const fnSetPositioning = async (id) => {
data.selectingPointsDialog.id = id;
data.selectingPointsDialog.visible = true;
};
const fnUpToBi = async (VIDEOMANAGER_ID) => {
await ElMessageBox.confirm("确定要置顶吗？置顶后将会默认展示在Bi页", {