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

<template>
  <div class="emergency-container">
    <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";

//地图配置
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, "#8EF4FF");
  });
};

const inintEntity = (data, lineColor, height, outline = true,) => {
  const polylineGraphic = new mars3d.graphic.PolygonEntity({
    positions: data.positions,
    style: {
      fill:false,
      outline: outline, //是否有边框
      outlineWidth: 3,
      outlineColor: lineColor,
      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],"#395EB0",10,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 scoped>
.emergency-container {
  height: 100%;
}
</style>