地图区域背景效果

src/views/emergency-rescue/workOrder/index.vue

@@ -43,7 +43,6 @@
               <dict-tag :options="gd_status" :value="scope.row.status" />
             </template>
           </el-table-column>
-
           <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width ">
             <template #default="scope">
               <div class="table-operation-row">

src/views/visualization/emergency/index.vue

@@ -14,6 +14,7 @@ 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";
 
 //地图配置
 const configUrl = "lib/config/config.json";
@@ -28,19 +29,26 @@ const initAreaCover = async () => {
   const arr = mars3d.Util.geoJsonToGraphics(jsonData); // 解析geojson
 
   arr.forEach((item) => {
-    inintEntity(item, "#8EF4FF");
+    inintEntity(item, true);
   });
 };
 
-const inintEntity = (data, lineColor, height, outline = true,) => {
+const inintEntity = (data, fill=false, height, ) => {
   const polylineGraphic = new mars3d.graphic.PolygonEntity({
     positions: data.positions,
     style: {
-      fill:false,
-      outline: outline, //是否有边框
-      outlineWidth: 3,
-      outlineColor: lineColor,
-      height:height
+      fill:fill,
+      materialType: "Image",
+      materialOptions: {
+        image: areaBg,
+        opacity: 1,
+        repeat_x: 1,
+        repeat_y: 1,
+        materialType: "Image",
+      },
+      workMaterialType: "Image",
+      stRotationDegree: 6,
+      height: height,
     },
   });
   mapLayer.arealayer.addGraphic(polylineGraphic);
@@ -75,7 +83,7 @@ const initStyleFeatures = async () => {
     url: "/lib/geoJson/park-rectangle.json",
   });
   const arr = mars3d.Util.geoJsonToGraphics(jsonData); // 解析geojson
-  inintEntity(arr[0],"#395EB0",10,false);
+  inintEntity(arr[0],  false);
 };
 
 /**