import { Loadglb } from "./loadglb.js"; const loadMap = 3; let $entityTransparent = []; const clickModel = new Map(); let enclosure = null; let entities = null; export const initMap = (corp) => { window.$scene = new window.CustomCesium.Scene( "map", corp.CORP_NAME, Number(loadMap) ); window.$icy = window.$scene.getIcy(); window.$carmer = new window.CustomCesium.Carmer(window.$icy); window.$icy.viewer.targetFrameRate = "30"; window.$icy.viewer.scene.light = new window.Cesium.DirectionalLight({ // 去除时间原因影响模型颜色 direction: new window.Cesium.Cartesian3( 0.35492591601301104, -0.8909182691839401, -0.2833588392420772 ), }); const [wgsLat, wgsLon] = bd09ToWgs84(corp.LATITUDE, corp.LONGITUDE); flyTo(wgsLon, wgsLat); // 亮度设置 const stages = window.$icy.viewer.scene.postProcessStages; window.$icy.viewer.scene.brightness = window.$icy.viewer.scene.brightness || stages.add(window.Cesium.PostProcessStageLibrary.createBrightnessStage()); window.$icy.viewer.scene.brightness.enabled = true; window.$icy.viewer.scene.brightness.uniforms.brightness = Number(1.05); // 此处亮度值为倍数 createGlb(); // 加载glb }; const bd09ToWgs84 = (bdLat, bdLon) => { 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 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({ // 视角飞入 maxHeight: 1500, time: 1, position: [lng, lat, 200], angle: [0, -60, 0], }); }; const createGlb = () => { // 加载glb(建筑模型) const loadGlb = new Loadglb(window.$icy); loadGlb.model(window.CustomCesium.Model); }; // eslint-disable-next-line no-unused-vars export const handleMouseClick = (model_id) => { // 加载鼠标拾取 const $mouse = new window.CustomCesium.Mouse(window.$icy); // 隐藏逻辑 $mouse.mouseLeft((model) => { if (model._name === "建筑") { if (model_id) model_id.value = model._id; clickBuilding(model); } }); }; const clickBuilding = (model) => { if ( Loadglb.modelMap[ `${model._id.split("-")[3].slice(0, model._id.split("-")[3].length - 2)}` ] ) { if ( clickModel.get( `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}` ) === undefined ) { // 如果这个模型是第一次点击 const m = Loadglb.modelMap[ `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}` ]; // 整栋楼的id集合 // console.log(m, '整栋楼id'); if (m.length > 1) { // 当前点击这建筑是否有多层 m.forEach((id) => { const entity = window.$icy.viewer.entities.getById(id); if (model.id !== id) { // 排除当前点击楼层 if (entity._icy.height > model._icy.height) { if ( $entityTransparent.map((a) => a._id).indexOf(entity._id) === -1 ) { $entityTransparent.push(entity); } // console.log(this.$entityTransparent, '被隐藏的模型楼层集合'); entity.model.show = false; } } else { clickModel.set( `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}`, model._icy.height ); // 存储这个模型数据 } }); } } else { // 如果点击过这个模型 const m = Loadglb.modelMap[ `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}` ]; // 整栋楼的id集合 // console.log(m, '整栋楼id'); if (m.length > 1) { // 当前点击这建筑是否有多层 if ( model._icy.height === clickModel.get( `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}` ) ) { m.forEach((id) => { const entity = window.$icy.viewer.entities.getById(id); entity.model.show = true; clickModel.delete( `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}` ); }); } else { m.forEach((id) => { const entity = window.$icy.viewer.entities.getById(id); if (model.id !== id) { // 排除当前点击楼层 if (entity._icy.height > model._icy.height) { if ( $entityTransparent.map((a) => a._id).indexOf(entity._id) === -1 ) { $entityTransparent.push(entity); } // console.log(this.$entityTransparent, '被隐藏的模型楼层集合'); entity.model.show = false; } } else { clickModel.set( `${model._id .split("-")[3] .slice(0, model._id.split("-")[3].length - 2)}`, model._icy.height ); // 存储这个模型数据 } }); } } } // model.model.color = new Cesium.Color(1, 1, 1, 0.6); } }; // 还原建筑物 export const reduction = () => { // 揭盖一键还原 if ($entityTransparent.length !== 0) { $entityTransparent = $entityTransparent.forEach((item) => { item.model.color = new window.Cesium.Color(1, 1, 1, 1); item.model.show = true; }); $entityTransparent = []; } }; export const handleEnclosure = (positions) => { const $mouse = new window.CustomCesium.Mouse(window.$icy); enclosure = new window.CustomCesium.Enclosure(window.$icy); // 编辑围栏使用鼠标控件参照demo.html enclosure.start(); $mouse.mouseRight((e) => { enclosure.add(e.lng, e.lat, e.alt); positions.push([e.lng, e.lat, e.alt]); }); }; export const clearEnclosure = () => { if (enclosure) { try { enclosure.show(false); } catch (e) {} enclosure.clear(); enclosure = new window.CustomCesium.Enclosure(window.$icy); enclosure.start(); } }; export const showEnclosure = (positions) => { enclosure.finish(); enclosure.showDataSource( positions, // 数据 30, // 高度 "yellow" // 颜色默认黄色 ); 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); }; export const handleViewAlarm = (alarm, userList) => { const canvas = document.createElement("canvas"); const width = 100; const height = 30; canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, 100, 50); ctx.fillStyle = "#ff0000"; ctx.font = "normal bold 20px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("聚集告警", width / 2, height / 2); // 聚集圆锥特效 const Cone = new window.CustomCesium.Cone(window.$icy); Cone.add( [alarm.lon, alarm.lat, alarm.alt], // 坐标 alarm.color, // 圆锥颜色 { width: 20, height: 40 }, // 圆锥的宽高 canvas, // 圆锥铭牌 "100201", // 圆锥实体id "10020101" // 铭牌实体id ); const labelPixelOffset = new window.Cesium.Cartesian2(0, -55); userList.forEach((user) => { const obj = {}; obj.entity = window.$icy.viewer.entities.add( new window.Cesium.Entity({ id: "user_" + user.card, name: user.psnName, position: window.Cesium.Cartesian3.fromDegrees( user.lon, user.lat, user.alt ), billboard: { image: "src/assets/images/map/peoIcon_blueImg.png", height: 36, width: 30, verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM, horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY, }, label: { text: user.psnName, font: "13px sans-serif", pixelOffset: labelPixelOffset, showBackground: true, // 地图上扎点的名字背景色 // eslint-disable-next-line new-cap backgroundColor: new window.Cesium.Color.fromCssColorString( "rgba(20, 58, 142, 1)" ), backgroundPadding: new window.Cesium.Cartesian2(7, 5), disableDepthTestDistance: Number.POSITIVE_INFINITY, }, }) ); obj.show = (e) => { obj.entity.show = e; }; obj.destroy = () => { window.$icy.viewer.entities.remove(obj.entity); }; }); };