diff --git a/public/lib/Cesium/CustomCesium.js b/public/lib/Cesium/CustomCesium.js index 9522293..87bfe83 100644 --- a/public/lib/Cesium/CustomCesium.js +++ b/public/lib/Cesium/CustomCesium.js @@ -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) { diff --git a/src/assets/images/map/peoIcon_green.png b/src/assets/images/map/peoIcon_green.png new file mode 100644 index 0000000..b6df067 Binary files /dev/null and b/src/assets/images/map/peoIcon_green.png differ diff --git a/src/components/map_tools/index.vue b/src/components/map_tools/index.vue index 7d9e494..1ab30e0 100644 --- a/src/components/map_tools/index.vue +++ b/src/components/map_tools/index.vue @@ -1,9 +1,15 @@ @@ -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); - handleEnclosure(data); + if (props.type === 1) { + handleEnclosure(data); + } else { + handlePut(position); + } }); onBeforeUnmount(() => { window.$scene = null; diff --git a/src/components/map_tools/map.js b/src/components/map_tools/map.js index 2ca1a01..5e7b951 100644 --- a/src/components/map_tools/map.js +++ b/src/components/map_tools/map.js @@ -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); +}; diff --git a/src/request/map_settings.js b/src/request/map_settings.js index eb33b12..a19aa2e 100644 --- a/src/request/map_settings.js +++ b/src/request/map_settings.js @@ -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); // 摆放摄像头 diff --git a/src/views/BI/js/map.js b/src/views/BI/js/map.js index 553eab1..f8eb1b7 100644 --- a/src/views/BI/js/map.js +++ b/src/views/BI/js/map.js @@ -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({ diff --git a/src/views/video_manager/video_manager/components/selecting_points.vue b/src/views/video_manager/video_manager/components/selecting_points.vue new file mode 100644 index 0000000..4b4a939 --- /dev/null +++ b/src/views/video_manager/video_manager/components/selecting_points.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/views/video_manager/video_manager/index.vue b/src/views/video_manager/video_manager/index.vue index 380fe61..db4ecda 100644 --- a/src/views/video_manager/video_manager/index.vue +++ b/src/views/video_manager/video_manager/index.vue @@ -58,7 +58,12 @@ > 修改 - + 定位 @@ -90,6 +95,11 @@ v-model:visible="data.videoDialog.visible" :src="data.videoDialog.src" /> + @@ -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页", {