integrated_traffic_vue/src/components/map_tools/map.js

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);
    };
  });
};