park-shanghai/src/views/visualization/emergency/index.vue

<template>
  <div class="emergency-container">
    <div class="main-left">
      <panelBlock title="应急抢险资源"></panelBlock>
      <panelBlock title="应急抢险工单"></panelBlock>
      <panelBlock title="工单派发及完成率分析"></panelBlock>
    </div>
    <div class="main-right">
      <panelBlock title="最新预警信息"></panelBlock>
      <panelBlock title="工单数量变化分析"></panelBlock>
      <panelBlock title="工作量统计分析"></panelBlock>
    </div>
    <div class="main-bottom">
      <panelBlock title="最新应急抢险工单"></panelBlock>
    </div>
    <MarsMap
      :url="configUrl"
      :options="mapOptions"
      map-key="emergency"
      @onload="marsOnload"
    />
  </div>
</template>

<script setup>
import MarsMap from "@/components/mars-work/mars-map.vue";
import mapOptions from "../mapOptions";
import { onUnmounted } from "vue";
import wallImg from "@/assets/images/visualization/fence-top.png";
import areaBg from "@/assets/images/visualization/area-bg.png";
import { panelBlock } from "@/views/visualization/components/index";
//地图配置
const configUrl = "lib/config/config.json";
let mapData = null;
let mapLayer = {};

// 渲染徐汇区面
const initAreaCover = async () => {
  const jsonData = await mars3d.Util.fetchJson({
    url: "/lib/geoJson/xuhuiArea.json",
  });
  const arr = mars3d.Util.geoJsonToGraphics(jsonData); // 解析geojson

  arr.forEach((item) => {
    inintEntity(item, true);
  });
};

const inintEntity = (data, fill = false, height) => {
  const polylineGraphic = new mars3d.graphic.PolygonEntity({
    positions: data.positions,
    style: {
      fill: fill,
      materialType: "Image2",
      materialOptions: {
        image: areaBg,
        opacity: 1,
        repeat_x: 1,
        repeat_y: 1,
        materialType: "Image",
      },
      workMaterialType: "Image",
      stRotationDegree: 6,
      outline: fill,
      outlineWidth: 2,
      outlineColor: "#8EF4FF",
      height: height,
    },
  });
  mapLayer.arealayer.addGraphic(polylineGraphic);
};
/**
 * 墙
 * @param positions
 */
const inintEntityWall = (positions) => {
  const wall = new mars3d.graphic.WallPrimitive({
    positions: positions,
    style: {
      setHeight: -2500,
      diffHeight: 2500, // 墙高
      width: 100,
      materialType: mars3d.MaterialType.Image2,
      materialOptions: {
        image: wallImg,
        color: "#144C8F",
      },
    },
  });

  mapLayer.arealayer.addGraphic(wall);
};

/**
 * 风貌区
 */
const initStyleFeatures = async () => {
  const jsonData = await mars3d.Util.fetchJson({
    url: "/lib/geoJson/park-rectangle.json",
  });
  const arr = mars3d.Util.geoJsonToGraphics(jsonData); // 解析geojson
  inintEntity(arr[0], false);
};

/**
 * 地图构建完成
 * @param map
 */
const marsOnload = (map) => {
  mapData = map;
  createMapLayer();
  initAreaCover();
  initStyleFeatures();
};

/**
 * 创建地图矢量图层
 */
const createMapLayer = () => {
  mapLayer.arealayer = new mars3d.layer.GraphicLayer();
  mapLayer.styleFeatures = new mars3d.layer.GraphicLayer();
  mapData.addLayer(mapLayer.arealayer);
  mapData.addLayer(mapLayer.styleFeatures);
};

/**
 * 销毁一些数据防止影响性能
 */
onUnmounted(() => {
  if (mapData) {
    mapData.destroy();
    mapData = null;
  }
  mapLayer.arealayer?.clear();
  mapLayer.styleFeatures?.clear();
  mapLayer = null;
});
</script>

<style lang="scss" scoped>
.emergency-container {
  position: relative;
  height: 100%;
  .main-left,
  .main-right {
    position: absolute;
    z-index: 10;
    top: 0;
    box-sizing: border-box;
    padding-top: calc(96px + 34px);
    padding-bottom: 34px;
    width: 16%;
    height: 100%;
    display: flex;
    flex-direction: column;
    &>div{
      flex: 1;
    }
  }

  .main-left {
    left: 42px;
  }
  .main-right {
    right: 42px;
  }
  .main-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height:calc((100% / 3) - 20px);
    z-index: 10;
    width:55%;
    padding-bottom: 34px;
  }
}
</style>